Bài giảng Thiết kế web - Chương 2: Tổng quan về một hệ thống web

Nội dung text: Bài giảng Thiết kế web - Chương 2: Tổng quan về một hệ thống web

1. CH NG 2 TTNGNG QUANQUAN VV MMTT HH THTH NGNG WEBWEB
2. THÀNH PH N C A WEBSITE • Webpage Là trang web. hi n th các thông tin di dng vn bn, hình nh, âm thanh, • Homepage: Trang ch . Th ng là trang u tiên khi truy cp mt website. • Website Tp hp các trang web. Web site ca các t ch c hay cá nhân trên mng bao gm tp hp các trang web liên quan n t ch c này. • Uniform Resource Locator (URL) a ch ca web trên internet • Web Browser ng dng truy cp n trang web qua URL
3. NI DUNG • Mc ích ca website cn thi t k • Chi n lc thi t k • Các khái ni m cơ bn • Quy trình thi t k website • Thi t k giao di n
4. MC ÍCH C A WEBSITE C N THI T K •Ni dung chính ca website •S dng hình nh • Ngu n gc ca d li u trên website chính xác • Ch ch o mà website hng n •Mc tiêu chính xác rõ ràng => h tr nhi u cho vi c thi t k, hi u ch nh website, d dàng tìm ki m thông tin phù hp vi ni dung ó.
5. CHI N L C THI T KÊ • La ch n giao di n web phù hp • To ra giá tr v ni dung • Quy ho ch b cc trang web • Ci thi n tc truy cp web
6. MT S KHÁI NI M C B N Các thành ph n ca mt trang web
7. MT S KHÁI NI M C B N Sơ trang (sitemap) Bi u di n ki n trúc ca mt website, thông th ng c bi u di n di dng hình cây phân cp hay dng vn bn ch a các link. Sitemap dùng trong quá trình thi t k website và giúp cho ng i truy cp trang web d dàng truy cp n các trang ca website.
8. MT S KHÁI NI M C B N Khung sn (Wireframe) ca trang web •
9. QUY TRÌNH THI T K WEBSITE 15 bc thi t k website 1. Th o lu n (Discussion) 2. ng não (Brainstorming) 3. Lên khung sưn (Wireframe) 4. Thi t lp ni dung (Planning the Content) 5. Bt u thi t k (Initial Design) 6. Khách hàng ph n hi (Client Feedback) 7. Thi t k li (Design Rework) 8. Khách hàng ch p nh n (Client Approval)
10. QUY TRÌNH THI T K WEBSITE 15 bc thi t k website 9. Thêm thi t k trang (Additional Page Design) 10. Xác nh n (Confirmation) 11. Xây dng trang HTML (Build the HTML) 12. To tp tin CSS và JScript (Build the CSS and JS) 13. Gi i thi u cho khách hàng (Present to Client) 14. Ki m th (Test) 15. Tri n khai (Launch)
11. QUY TRÌNH THI T K WEBSITE Bưc 1: Th o lu n (Discussion) – Th o lu n vi khách hàng ly yêu cu – Xác nh ph m vi ca website – Vai trò, trách nhi m ca các thành viên trong nhóm xây dng website Bưc 2: ng não (Brainstorming) – Suy ngh v ni dung, cu trúc và ch c nng ca website – Xác nh rõ nh ng th quan tr ng và không quan tr ng ca website ( mục đích, ng ười truy cập, mỗi trang cần có gì ?) – Thi t k sitemap cho website
12. QUY TRÌNH THI T K WEBSITE Bưc 3: Lên khung sưn (Wireframe) – Khung sn là xơ ng sng ca website, bao gm s dch chuy n gi a các trang,ch c nng và ni dung s c hi n th trong website cu i cùng (ch ỉ vẽ khung sườn, không cần thi ết kế đồ ho ạ ở bước này) Bưc 4: Thi t lp ni dung (Planning the Content) – Làm vi c cùng khách hàng chu n b ni dung (vn bn, hình nh) s c hi n th trong website – ây là công vi c mt rt nhi u th i gian, c bi t i vi khách hàng
13. QUY TRÌNH THI T K WEBSITE Bưc 5: Bt u thi t k (Initial Design) – Các designer bt u phát th o các thi t k website mc cơ bn – Trang ch và các trang con (sub-level) quan tr ng ca website Bưc 6: Khách hàng ph n hi (Client Feedback) – Sau khi xem phát th o cơ bn ca website, khách hàng ki m tra li xem có úng vi yêu cu ban u và có th a ra yêu cu mi hay ngh mt s s iu ch nh hay thay i trong bn thi t k
14. QUY TRÌNH THI T K WEBSITE Bưc 7: Thi t k li (Design Rework) – iu ch nh bn thi t k theo yêu cu mi ca khách hàng –Nu yêu cu ca khách hàng có s thay i ln trong bn thi t k, có th ph i th c hi n hay iu ch nh li các công vi c ã th c hi n các bc tr c Bưc 8: Khách hàng ch p nh n (Client Approval) – Th c hi n bc 7 cho n khi khách hàng hoàn toàn va ý vi bn thi t k – ây là mt trong nh ng xác nh n quan tr ng ca khách hàng i vi website
15. QUY TRÌNH THI T K WEBSITE Bưc 9: Thêm thi t k trang (Additional Page Design) – Sau khi khách hàng ã ch p nh n bn thi t k cơ bn ca website, các designer bt u thi t k chi ti t b cc (layout) cho tng trang ca website Bưc 10: Xác nh n (Confirmation) – Khách hàng xem bn thi t k chi ti t ca website, ki m tra li và a ra xác nh n sau cùng
16. QUY TRÌNH THI T K WEBSITE Bưc 11: Xây dng trang HTML (Build the HTML) –Lp trình viên bt u xây dng cáctrang HTML t bn thi t k chi ti t ca designer Bưc 12: To tp tin CSS và JS (Build the CSS and JavaScript) –Lp trình viên ti p tc to tp tin CSS nh dng cách trình bày cho website – Vi t on mã JavaScript s lý các s ki n/ hành ng cho các trang ca website (nu có)
17. QUY TRÌNH THI T K WEBSITE Bưc 13: Gi i thi u cho khách hàng (Present to Client) – Gi i thi u website cho khách hàng – Khách hàng có th s a ra mt s ý ki n hay yêu cu mt s thay i trong phiên bn website u tiên này Bưc 14: Ki m th (Test) – Website s c ki m tra li v ni dung, li, kh nng tơ ng thích vi các trình duy t cng nh tơ ng thích vi các platform khác nhau
18. QUY TRÌNH THI T K WEBSITE Bc 15: Tri n khai (Launch) – Website c a vào ho t ng (upload website lên mng Internet) – Giao quy n qu n lý website li cho khách hàng – Khách hàng có th s ph n hi mt s li mi phát sinh trong quá trình tri n khai s dng website –Lp trình viên cp nh t/s a li cho trang web (nu có)
19. THI T K GIAO DI N Khung nhìn
20. THI T K GIAO DI N Mu ví d
21. THI T K GIAO DI N Centered with three columns
22. THI T K GIAO DI N Cu trúc ph c tp
23. THI T K GIAO DI N Xác nh kích th c khung nhìn • Ph i làm cho ng ưi s dng cm nh n ưc kích th ưc ca trang thông tin.
24. THI T K GIAO DI N Xác nh cu trúc website •H th ng phân cp •H th ng các trang ni ti p • Ô Lưi •Mng nh n
25. THI T K GIAO DI N Xác nh cu trúc website - Phân cp • Dùng t ch c các kh i thông tin ph c hp. • Là h th ng c dùng thông dng nh t •Gn vi mô hình t ch c th gi i th c •D hình dung t ch c website • Cái nhìn tng quan t trang ch
26. THI T K GIAO DI N Xác nh cu trúc website -Ni ti p • Bi u di n thông tin tu n t, các bng tng thu t ni ti p theo th i gian – Các thông tin tra cu tham kh o: t in báck khoa, t in thu t ng – Thích hp cho h th ng website nh .
27. THI T K GIAO DI N Xác nh cu trúc website – Ô li • Danh sách khóa hc, các bi n c, s ki n •Tng ơ n v trong cu trúc ph i có cùng cu trúc cho các ch ln và nh • Khó hi u i vi khi xác nh mi liên quan gi a các lo i thông tin. •Rt tt i vi nh ng c gi có kinh nghi m, có sn ki n th c v h th ng, ch trong h th ng
28. THI T K GIAO DI N Xác nh cu trúc website –Mng nh n •T ch c ít hn ch cho vi c s dng mu thông tin • Mô hình t khám phá, khai thác tri t u im ca hyperlink •Cu trúc phi th c t nh t, khó hi u, khó d oán cho ng i s dng • Thích hp nh ng site nh , ng i s dng chuyên nghi p ho c trình cao, tìm ki m các ki n th c chuyên sâu
29. THI T K GIAO DI N Xác nh ki u ch , màu sc Font ph thu c vào: – c im thông tin – Ng ưi dùng – Trìnhch n duylc các mediat, tiêuphânim, có gi dungi lưng nh và cho hi n th – Ngôn ng s dng – Font có chân, không chân Gam màu: Th ng nh t trong toàn b Website. Font ti ngVi t: Unicode
30. Tc truy cp web •Tc truy cp và x lý trang web cng ph thu c rt nhi u vào vi c thi t k website. • Các on flash, video, nh c, hình nh phân gi i cao, hi u ng hi n th • Ch n lc các media tiêu im, có dung lưng nh và cho hi n th