›
›

Bài giảng Thiết kế Web - Chương 1: Tổng quan

pdf 91 trang phuongnguyen 9930
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Web - Chương 1: Tổng quan", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_web_tran_dinh_nghia.pdf

Nội dung text: Bài giảng Thiết kế Web - Chương 1: Tổng quan

  1. 2/16/2011 TRƯỜNG ĐẠI HỌC SÀI GÒN THIẾT KẾ WEB B TỔNG QUAN TRÌNH WE P P Ậ GV: Trần Đình Nghĩa VÀ L Ế tdnghia1977@gmail.com K TT Ế THI 1 1
  2. 2/16/2011 NỘI DUNG 1. Khái niệm cơ bản và các thành phần của website. 2. Nguyên tắc hoạt động cơ bản của website. B 3. Các bước thiết lập website TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 2 2
  3. 2/16/2011 Khái niệm cơ bản  Mạng máy tính: Computer Network: Hệ thống các máy tính được kết nối với nhau nhằm trao đổi dữ liệu.  Giao thức: Protocol:  Tậphp hợp các quy tắc đượcthc thống nhấtgit giữa các máy tính trong mạng nhằm thực hiện trao đổi dữ liệu được chính xác B  Ví dụ: TC/CP/IP, HTTP,,, FTP, TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 3 3
  4. 2/16/2011 Khái niệm cơ bản  Địa chỉ IP: IP Address  Xác định một máy tính tr on g mạngdg dựa trên giao thức TCP/IP. Hai máy tính trong mạng có 2 địa chỉ IP khác nhau  Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255)  Ví dụ: 118.69.204.180: địa chỉ máy chủ B web của Đại học Sài Gòn. TRÌNH WE  Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ PP Ậ loopback) là địa chỉ của chính máy tính VÀ L Ế đang sử dụng dùng để thử mạng K TT Ế THI 4 4
  5. 2/16/2011 Khái niệm cơ bản  Tên mi ền: DiNDomain Name  Là tên được “gắn” với 1 địa chỉ IP.  Máy chủ DNS thực hiện việc “gắn” (ánh xạ)  Ở dạng văn bản nên thân thiện với con người  Được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). Đánh số cấp lần lượt từ phải sang trái bắt đầu từ 1. B  Cấp trái là con của cấp phải  Ví dụ: fit.sgu.edu.vn gắn với TRÌNH WE 112.213.89.40 trong đó: PP Ậ . vn: Nước Việt Nam (Cấp 1) . edu: Tổ chức giáo dục (Cấp 2) VÀ L Ế . sgu: Tên cơ quan (Cấp 3) K TT . fit: đơnvn vị nhỏ trong c ơ quan (Cấp4)p 4) Ế  Đặc biệt: Tên localhost được gắn THI với 127.0.0.1 5 5
  6. 2/16/2011 Khái niệm cơ bản  Máy c hủ-máháy phục vụ: Server  Là máy tính chuyên cung cấp tài nguyên, dịch vụ cho máy tính khác.  Thường được cài các phần mềm chuyên dụng để có khả năng cung cấp  Một máy chủ có thể dùng cho một hay nhiều mục đích. Tên máy chủ thường B gắnnv vớiim mục đích s ử dụng. Ví d ụ: . File server . Application server TRÌNH WE . Mail server PP Ậ . Web server VÀ L Ế  Thực tế: các máy chủ có cấu hình cao, K TT khả năng hoạt động ổn định Ế THI 6 6
  7. 2/16/2011 Khái niệm cơ bản  Máy khá c h: Client  Máy khai thác dịch vụ của máháy chủ  Với mỗi dịch vụ, thường có các phầnmn mềm chuyên biệt để khai thác B  Một máy tính có th ể vừaalà là client vừa là server TRÌNH WE PP  Một máy tính có th ể khai thác Ậ dịch vụ của chính nó. VÀ L Ế K TT Ế THI 7 7
  8. 2/16/2011 Khái niệm cơ bản  Cổng dịch vụ: SiPService Port  Là số [0; 65535] xác định dịch vụ của máy chủ  2 dịch vụ khác nhau chiếm các cổng khác nhau  Mỗi dịch vụ thường chiếm các cổng xác B định, ví dụ: . Web: 80 TRÌNH WE PP . FTP: 21 Ậ VÀ L Ế K TT Ế THI 8 8
  9. 2/16/2011 Khái niệmcơ bản  Web là gì? Là các dịch vụ phân tán cung cấp thông tin multimedia dựa trên hypertext  Phân tán: Thông tin được đặt trên nhiều máy chủ khắpthế giới B  Multimedia: thông tin bao gồm text, graphics, sound, video. TRÌNH WE PP Ậ VÀ L  Hypertext: là kỹ thuật đượcsử dụng để truy Ế K TT Ế cập thông tin THI 9 9 9
  10. 2/16/2011 Khái niệm cơ bản  Web = protocol + language + naming infrastructure  HTTP -HyperText Transport Protocol  Là giao thức giao tiếp giữa WWW client and server  HTML -HyperText Marku p Lan gua ge  Ngôn ngữ biểu diễn các tài liệu WWW B  URL-Uniform Resource Locator  Địa chỉ web(xác định duy nhất) TRÌNH WE PP Ậ  Client-script: VB script, Java script VÀ L Ế  Server-script: ASP, PHP, JSP, ASP.NET, K TT Ế THI 10 10
  11. 2/16/2011 Khái niệm cơ bản WbWeb – hoạt động thế nào ? B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 11 11
  12. 2/16/2011 Các thành phầncủawebsite URL B Web Browser TRÌNH WE PP Ậ VÀ L Ế Webpage K TT Ế THI 12 12
  13. 2/16/2011 Khái niệm chính Browser  Lấyhiểnthị (nếucóthể) các tài nguyên khác nhau  Khả năng hiểnthị  Text-only  Graphic B  Hiểnthịđược nhiềuloại ảnh TRÌNH WE  TIFT, GIF, JPEG, sound, video, postscript, PP Ậ  Hỗ trợ nhiềugiaothức: HTTP, FTP, SMTP, POP VÀ L Ế K TT  Có thể “plugplug-in” các công cụ vào browser để Ế THI tăng tính năng (3D animation, SWF, ) 13 13
  14. 2/16/2011 URL định vị các tài nguyên trên Internet  URL là định danh duy nhất cho các tài nguyên Internet  Chỉ ra:  Cách truy cập  Vị trí tài nguyên B  Cú pháp chung: Protocol://host_name[:port_num][/path][/file_name] TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI  URL không bao giờ ch14ứa khoảng trắng 14
  15. THIẾT KẾ VÀ LẬP TRÌNH WEB á iotcchu tác giao Các ẩ ntrênweb 15 2/16/2011 15
  16. 2/16/2011 Các dịch vụ trên web  World Wide Web - www B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 16 16
  17. 2/16/2011 Các dịch vụ trên Internet  Thưđiệntử - email (Electronic mail)  Là dịch vụ trao đổi các thông điểm qua mạng viễn thông  Sử dụng giao thức SMTP/POP3 để gởi nhận email  Địachỉ email có dạng: name@domain_name B  Đượcquảnlýbởi Mail Server ( <> MailClient) TRÌNH WE  Truyềntảitập tin – FTP – File Transfer Protocol PP Ậ  Là dịch vụ trao đổicáctậptin giữa các máy tính trên VÀ L Ế K TT Ế Internet THI  Tán ngẫu – Chat – Yahoo17 Messenger / Google Talk 17
  18. THIẾT KẾ VÀ LẬP TRÌNH WEB Tra c ứ u thôngtintrên Internet 18 2/16/2011 18
  19. 2/16/2011 Mộtsố công cụ khai thác tài nguyên Internet  Download website offline  Cho ppphép download website về và truy cập offline  Teleport Pro –  Offline Explorer Enterprise:  Download file: B  FlashGet – www.flashget . com  Tìm kiếm: TRÌNH WE PP Ậ  Copernic – www.copernic.com: hỗ trợ tìm kiếm thông minh VÀ L trên nhiều Search Engine cùng lúc, và loại bot kếtquả trùng. Ế K TT Ế THI 19 19
  20. 2/16/2011 Mộtsố thuậtngữ thông dụng  Internet: Mạng máy tính toàn cầukếtnốicác mạng máy tính khắpnơitrênthế giới. Tậpcác giao thức được dùng gọi chung là TCP/IP  Intranet: Mạng cục bộ có kiến trúc tương tự mạng Internet. B  Website: Tập hợp các trang web. Website của các tổ chức hay cá nhân trên mạng bao gồmtậphợp TRÌNH WE PP Ậ cáctrangweb liênquanđếntổ chức này. VÀ L Ế  Webpage: Là trang web. Có thể hiểnthị các K TT Ế thông tin dạng vănbản, hình ảnh, âm thanh THI 20 20
  21. 2/16/2011 Mộtsố thuậtngữ thông dụng  Web browser: Trình duyệt web, dùng để hiển thị các trang web. Các web browser thông dụng hiện nay là IE và Firefox  Homepage: Trang chủ. Thường là trang đầu tiên (mặc định) khi truy cập một website. B  Hyperlink: siêu liên kết. Dùng để liên kết các trang web và dịch vụ của các website trên Internet. TRÌNH WE PP Ậ  ISA (Internet Access Provider): Nhà cung cấp VÀ L Ế K đường truyền Internet TT Ế THI 21 21
  22. 2/16/2011 Mộtsố thuậtngữ thông dụng  ISP (Internet Service Provider): Nhà cung cấp dịch vụ Internet. Mộtsố ISP hiệnnay ở ViệtNam: VDC, FPT, SaigonNet, VNPT, Viettel  Search engines: Máy tìm kiếmCáccông cụ tìm kiếm hiện nay, Google, Wiki, . B  HTTP,,,S,O FTP, SMTP, POP3: Đây là các ggaoiao thức được dùng cho các dịch vụ web ftp, email trên Internet TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 22 22
  23. 2/16/2011 Các bướcthiếtlậpwebsite  Xác định yêu cầu Website  Mua tên miền  Thuê chỗ hosting B  Thiếtkế Website TRÌNH WE PP Ậ  Đưa vào hoạt động VÀ L Ế K TT Ế  Duy trì thông tin, bảo dưỡng website THI 23 23
  24. 2/16/2011 ĐạiHọc Sài Gòn – Khoa CNTT Bài thực hành 1 B Thao tác và sử dụng TRÌNH WE PP Ậ mạng Internet VÀ L Ế K T T Ế THI 24 24
  25. 2/16/2011 Bài thựchành1  Đăng ký nhóm (file Excel)  Tìm kiếm thông tin về Free hhtiosting  Đảm bảo mỗi người có Email B  Khảo sát giao diện, tính năng của các website hiện có trên Internet có liên quan đến chủ đề đãchọn. TRÌNH WE PP Ậ VÀ L Ế  Dùng FrontPage, Dreamweaver (MX, CS3), K TT Ế Photoshop (v.7, CS3) THI 25 25
  26. 2/16/2011 Tổng kết 1. Khái niệmcơ bản và các thành phần của website. 2. Nguyên tắc hoạt động cơ bản của website. B 3. Các dịch vụ trên Internet TRÌNH WE PP Ậ VÀ L 4. Các bướcthiếtlậpwebsite Ế K TT Ế THI 5. Bài thựchành1 26 26
  27. 2/16/2011 ĐạiHọc Sài Gòn – Khoa CNTT Tổng quan về lập trình ứng dụng web B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 27 27
  28. 2/16/2011 Nội dung 1. Các bướcthiếtlập website 2. Thiếtkế website • Thiếtkế giao diện B 3. Xâydựng website dướigóc TRÌNH WE PP Ậ nhìnngộ nghĩnh VÀ L Ế K TT Ế THI 28 28
  29. 2/16/2011 Các bướcthiếtlậpweb  Xác định yêu cầu Website  Mua tên miền  Thuê chỗ hosting B  Xây dựng Website TRÌNH WE PP Ậ  Đưa vào hoạt động VÀ L Ế K TT Ế  Duy trì thông tin, bảo dưỡng website THI 29 29
  30. 2/16/2011 Xác định yêu cầu  Mục tiêu, yêucầucơ bảncủa website  Đốitượng website phụcvụ  Chủđềwebsite B TRÌNH WE PP  Kết quả thu được sẽ là những thông Ậ VÀ L Ế tin quan trọng trong giai đoạnxây K TT Ế THI dựng web (Planning). 30 30
  31. 2/16/2011 Mụctiêuyêucầu cơ bản Đề ra mục tiêu khái quát, ngắngọn, rõ ràng củawebbitsitecần thiết kế Mục đích lập website củabạnlàgì? Là công cụđểđánh giá sự thành bại B củamộtwebsite TRÌNH WE PP Ậ Mụctiêuphảidàihạn, bao trùm VÀ L Ế K TT Ế tàtoàn bộ kế hoạch phát titriển THI 31 31
  32. 2/16/2011 Đốitượng phụcvụ Xác định loại đốitượng phụcvụ chính Tìm hiểu đối tượng phục vụ  Sự hiểubiết  Trình độ B  Sở thích  Kinh nghiệm duyệt web TRÌNH WE PP Ậ  Thiếtkế tốtsẽ thích hợp cho nhiềudạng VÀ L Ế K TT Ế đối tượng có trình độ nhu cầu khác nhau THI 32 32
  33. 2/16/2011 Chủđềwebsite Giúp định hướng cho công việcthiếtkế Giới thiệu công ty, tổ chức, hàng hoá, Tuỳ thuộc ngành nghề:giáodục, giảitrí Diễn đàn trao đổithảoluận B Diễn đàn trao đổi, mua bán, kinh doanh trực tuyến TRÌNH WE PP Ậ Hay cung cấp dịch vụ và thu lợi từ quảng cáo, VÀ L Ế K TT Ế THI 33 33
  34. 2/16/2011 Mua tên miền Tên miền= Têênwebsite  Tên ngắn  Gợinhớ  Dễ đọc, không gâynhầmlẫn B  Thể hiện đượctêncông ty hoặc nhãn hiệu chính củacôngty TRÌNH WE PP Ậ  Vd: IBM.com VÀ L Ế K Lenovo.com TT Ế THI 34 34
  35. 2/16/2011 Mua tên miền  Xác định tên  Tên ti ếng Vi ệt  Tên giao dịch tiếng Anh  Tên viếttt tắt  Xác định nơi đăng ký B  Đăng ký tên miền càng sớm càng tốt TRÌNH WE  Thủ tục đơn giản, nhanh chóng PP Ậ  Kinh phí rẻ VÀ L Ế K . Việt Nam: 450.000+480.000/năm TT Ế THI . Nước ngoài: 8 – 12USD 35 35
  36. THIẾT KẾ VÀ LẬP TRÌNH WEB u ê mi tên Mua ề n 36 2/16/2011 36
  37. 2/16/2011 Thuê hosting . Hệ điềuhànhcủamáychủ . Dung lượng . Băng thông . Ngôn ngữ hỗ trợ B . Hệ quảntrị CSDL hỗ trợ TRÌNH WE PP Ậ . Email POP3 VÀ L Ế K TT . SSL Ế THI . 37 37
  38. 2/16/2011 Thuê hosting  Xác định môi trường vận hành của website  Máy chủ Windows . Support ASP, PHP , SQL Server, MySQL . Đắt hơn máy chủ Linux  Máy chủ Linux . Support PHP, JSP , MySQL . Rẻ hơn máy chủ Windows B  Xác định dung lượng thực tế của website, khả năng sẽ mở rộng TRÌNH WE PP Ậ  Xác định băng thông, các dịch vụ đảm bảo an VÀ L Ế toàn, an ninh, backup dữ liệu K TT Ế THI 38 38
  39. THIẾT KẾ VÀ LẬP TRÌNH WEB Thuê hosting 39 2/16/2011 39
  40. THIẾT KẾ VÀ LẬP TRÌNH WEB Thuê hosting 40 2/16/2011 40
  41. THIẾT KẾ VÀ LẬP TRÌNH WEB Thuê hosting 41 2/16/2011 41
  42. THIẾT KẾ VÀ LẬP TRÌNH WEB hêhosting Thuê 42 2/16/2011 42
  43. THIẾT KẾ VÀ LẬP TRÌNH WEB hêhosting Thuê 43 2/16/2011 43
  44. 2/16/2011 Xây dựng website  Xác định yêu cầu (Planning)  Phân tích và thiết kế hệ thống (Analysys & Design)  Thiếtkế giao diện (Interface – GUI) B  Lập trình (Code – Develop)  Kiểmtra(Test) TRÌNH WE PP Ậ  Triển khai (Deploy) VÀ L Ế K TT  Nâng cấp (Upgrade ) Ế THI 44 44
  45. 2/16/2011 Xây dựng website  Thông tin “tĩnh” hay “động”  Web tĩnh  WWbeb động  Portal  Giá thành  Web tĩnh: Tính theo các kiểu trang . Trang đơn giản: 70 – 150.000đ/trang B . Trang hi ệu ứng hình ảnh tốt: 150 – 350.000đ/trang  Web động: Tính theo các mục, các khối chức năng . Thiết kế CSDL TRÌNH WE PP . Các chứcnc năng phía user: đưa tin, phân loại, tìm ki ếm Ậ . Các chức năng phía Admin: Đăng nhập, xem/thêm/sửa/xóa VÀ L Ế tin bài, báo cáo, thống kê K TT . Tóm lại: Từ 5 triệutru trở lên. (Thông dụng: 10-30 triệu) Ế THI 45 45
  46. 2/16/2011 Các thành phầncơ bảntrongthiếtkế giao diện  Trang chủ (Homepage)  Hệ thống định hướng (navigation – site map)  Các trang chức năng thành viên B TRÌNH WE PP Ậ VÀ L Ế  Giao diện website K TT Ế THI 46 46
  47. 2/16/2011 Trang chủ  Toàn bộ website đều đượcthiếtlập quanh trang chủ.  Trang chủ xác định rõ chủ đề website B  Trang chủ xác định phong cách thiết TRÌNH WE PP Ậ kế của website VÀ L Ế K TT  Lưu ý khi sử dụng đồ hoạ Ế THI 47 47
  48. 2/16/2011 Hệ thống menu, logo, định danh  Hệ thống định hướng (navigation – site map)  Hệ thống,g menu, naviation đầy đủ, rõ ràng. B  Vị trí nhất quán, logic (logo công ty) TRÌNH WE PP Ậ  Cần quan tâm đến việc sử dụng VÀ L Ế K TT hiệu ứng. Ế THI 48 48
  49. 2/16/2011 Các trang chức năng thành viên  Hiểnthị nội dung  Một nhóm trang thành viên ~ 1 chức năng  Xây dựng theo cấutrúccơ bản B  Nhất quán, phù hợpvớicácthuộc TRÌNH WE PP Ậ tính đã định dạng trước và phải VÀ L Ế K TT theo ppghong cách củatrang chủ Ế THI 49 49
  50. 2/16/2011 Thiếtkế giao diện web Logo Header Menu Content  2 x 2 B  3 x 3 TRÌNH WE PP  Table Ậ VÀ L Ế  Mixed style. K TT Ế THI 50 50
  51. THIẾT KẾ VÀ LẬP TRÌNH WEB Thi ế tk ế giao di giao ệ n: 2x2 layout 51 2/16/2011 51
  52. 2/16/2011 Thiếtkế giao diện: dạng 3 columns B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 52 52
  53. THIẾT KẾ VÀ LẬP TRÌNH WEB Thi ế tk ế giao di giao ệ n: Mixedstyle 53 2/16/2011 53
  54. 2/16/2011 Xác định kiểu chữ, màu sắc Font chữ phụ thuộcvào Đặc điểm thông tin Độc giả Trình duyệt, độ phân giải Ngôn ngữ sử dụng B Font có chân, không chân Gam màu: thống nhất trong toàn bộ Website TRÌNH WE PP Ậ Font tiếng Việt: VNI, TCVN3, Unicode VÀ L Ế Cắt đoạnvàtómlược thông tin trong vănbản. K TT Ế THI 54 54
  55. 2/16/2011 Xác định kích thước khung nhìn  Người đọcphảicảmnhận đượckíchthước của trang thông tin, biết họ đang ở đâu, có thể làm gì  Hầuhết các trang web đều không vừa B khớp với màn hình 14-15’’ TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 55 55
  56. 2/16/2011 How C.R.A.P is Your Site Design?  C.R.A.P. stands for Contrast Repetition Alignment Proximity  Contrast: Elements that aren ’ t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist.  Repetition: Repeat styles down the page for a cohesive feel, if you style related elements the same way in one area, continue that trend for other areas for consistency. B  Alignment: Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements. TRÌNH WE PP  Proximity: Proximity creates related meaning: elements Ậ that are related should be grouped together, whereas VÀ L separate design elements should have enough space in Ế K TT between to communicate they are different. Ế THI  site-design/ 56 56
  57. 2/16/2011 Xác định cấu trúc website  Hệ thống phân cấp  Hệ thống các trang tiếp nối B  Ô lưới TRÌNH WE PP Ậ VÀ L Ế K TT  Mạng nhện. Ế THI 57 57
  58. 2/16/2011 Xác định cấu trúc website: Phân Cấp  Tổ chứccáckhối thông tin phứctạp  Hệ thống được dùng thông dụng nhất  Gầnvớimôitrường tổ chứcthế giớithực B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 58 58
  59. 2/16/2011 Xác định cấu trúc website: Nối tiếp  Biểudiễn thông tin tuầntự, nốitiếp theo thời gian  Các thông tin tra khảo dạng từ điển  Thích hợpchohệ thống nhỏ B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 59 59
  60. 2/16/2011 Xác định cấu trúc website: Ô lưới  Danh sách khoa học, các biếncố sự kiện  Mỗi thành viên phải có cùng cấutrúc  Khó hiểu, khó xác định mối liên quan B giữ các loại thông tin TRÌNH WE  Thích hợp cho ngườisử dụng có kinh PP Ậ VÀ L nghiệm Ế K TT Ế THI 60 60
  61. THIẾT KẾ VÀ LẬP TRÌNH WEB Xác đị nh c ấ u trúc website: Ô l u trúcwebsite: 61 ướ i 2/16/2011 61
  62. THIẾT KẾ VÀ LẬP TRÌNH WEB Xác đị nh c ấ u trúc website: Ô l u trúcwebsite: 62 ướ i 2/16/2011 62
  63. 2/16/2011 Xác định cấu trúc website: Mạng nhện  Ít hạnchế cho việcsử dụng thông tin  Cấu trúc liên kết phức tạp, nhưng khai thác triệt để ưu điểm hyperlink  Cấutrúcphi thựctế nhất, khó hiểu, B khó dự đoán TRÌNH WE PP  Thích hợp với những site nhỏ, dành Ậ VÀ L Ế cho ngườisử dụng có nhiều kinh K TT Ế THI nghiệm. 63 63
  64. 2/16/2011 Xác định cấu trúc website: mạng nhện B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 64 64
  65. 2/16/2011 Xác định cấu trúc website: mạng nhện B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 65 65
  66. 2/16/2011 Chú trọng vào nguyên tắc thiết kế  Thiếtkế hướng người sử dụng  Các giúp đỡ định hướng rõ ràng  Không có trang cuối (dead-end)  Băng thông và các yếutố phầncứng B  Đơn giản, nhất quán và tính ổn định  Phảnhồi đốithoại TRÌNH WE PP Ậ  Tính tương thích trên các trình duyệt VÀ L Ế K TT  TK cho quản trị và cập nhật nội dung. Ế THI 66 66
  67. 2/16/2011 Thiếtkế hướng người sử dụng  Yêu cầu mức độ hoàn hảo của giao diện  Cách tốtnhất: thử nghiệmvànhậnphản hồi. B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 67 67
  68. 2/16/2011 Các giúp đỡ định hướng rõ ràng  Độcgiả có thể trả lờicáccâuhỏi  Đang ở đâu ?  Có thể làm gì ?  Có thểđitiếp đến đâu ? B  Biểutượng nhất quán, dễ hiểu, theo TRÌNH WE PP Ậ chuẩnqui định. VÀ L Ế K TT Ế THI 68 68
  69. THIẾT KẾ VÀ LẬP TRÌNH WEB á giúp Các đỡ đị nh h ướ 69 ng rõ ràng 2/16/2011 69
  70. 2/16/2011 Không có trang cuối (dead-end)  Mỗi trang có ít nhấtmột liên kết. Luôn có khả năng quay về trang chủ, các trang chủ chốttrêntrang  Trang dead-end: sẽ là trang không thể B đi đếnvới các trang thành viên trong TRÌNH WE website. PP Ậ VÀ L  Nên để liên kếtvề trang chủ cho tấtcả Ế K TT Ế trang thành viên. THI 70 70
  71. 2/16/2011 Băng thông và ảnh hưởng  Sự kiên nhẫncủa độcgiả có giới hạn  Tốc độ đôi khi là yếu tố quyết định đếnviệclựachọn website. B  Phân biệtgiữacácthiếtkế intranet TRÌNH WE PP Ậ và itinterne t VÀ L Ế K TT Ế THI 71 71
  72. THIẾT KẾ VÀ LẬP TRÌNH WEB B ă gthôngvà ng ả nh h 72 ưở ng 2/16/2011 72
  73. 2/16/2011 Thiếtkế trang web cho mạng Intranet Mộtsố site thiếtkế riêng cho các tổ chức, sử dụng mạng LAN Mục tiêu: nâng cao thờigiantruycập, dẫndắtvàosâutrongcấutrúcwebsite B đòi hỏi thông tin phải hấp dẫn, có giá trị TRÌNH WE PP Ậ Đừng để ýtớibăng thông và tốc độ VÀ L Ế K TT chú trọng đếnnộidung có giá trị và sự Ế THI hấpdẫn cho website. 73 73
  74. 2/16/2011 Tính đơn giản và tính nhất quán Tuỳ vào loại ứng dụng Cái người xem cần là thời gian và thông tin chính xác. Đừng để ýtớibăng thông và tốc độ B chú trọng đếnnội dung có giá trị TRÌNH WE PP Ậ và sự hấp dẫnchowebitbsite. VÀ L Ế K TT Ế THI 74 74
  75. 2/16/2011 Tính ổn định  Ổn định về cấutrúcvànội dung  Cấu trúc: các thành phần được đặt đúng chỗ và hoạt động nhịp nhàng.  Nội dung: B  Các mối liên kếtluônđảmbảocóđích đến  Nội dung luôn đảmbảothíchhợpvàphảicập TRÌNH WE PP nhật cho phù hợp với ngữ cảnh tại thời điểm Ậ VÀ L đọcgiả duyệtWeb. Ế K TT Ế THI 75 75
  76. 2/16/2011 Phảnhồi và đối thoại Chuẩnbị trướcchoviệctrả lời, đáp ứng các đòi hỏi, góp ý của người sử dụng một cách nhanh nhấtcóthể. Luôn có cung cấp địachỉ liên kết B với“Webmaster”. TRÌNH WE PP Ậ Lên kế hoạch nhân sự phụ trách lâu VÀ L Ế K TT dài. Ế THI 76 76
  77. 2/16/2011 Tương thích trên các trình duyệt khác nhau  Không phảimọitrìnhduyệt đềuhiểnthị trang web của chúng ta giống nhau  Lưuýkhicóngườisử dụng web browser không có khả năng hỗ trợđồhoạ B (mobile, PDA, )  Sử dụng nhãn (tag) ALT trong HTML để TRÌNH WE PP Ậ thay thế. VÀ L Ế K TT Ế THI 77 77
  78. 2/16/2011 Thiếtkế cho việcquảntrị và cậpnhật nội dung B TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 78 78
  79. 2/16/2011 Đưa vào hoạt động – thời gian quản lý  Website cần đượccậpnhật thông tin.  Nếu phần nào đó được cập nhật thêm ký hiệu“New”  Ghi thờigiancậpnhật, số ngườitruy B cập,  Nếuwebsitephứctạp thêm mộttrang TRÌNH WE PP Ậ “What new ?” VÀ L Ế K TT Ế THI 79 79
  80. 2/16/2011 Liên kết trang web, quảng cáo Tạo liên kết đếncácthôngtin(đối tác, khách hàng, ) tăng uy tín Khi đã ổn định chuyển đổihình thức kinh doanh, thu phí: B Thuê đặtlogoquảng cáo TRÌNH WE PP Ậ Thu phí thành viên VÀ L Ế K TT Ế THI 80 80
  81. 2/16/2011 Quảng bá website  Quảng bá Website  Đăng ký Website vào các máy tìm kiếm trong nước và thế giới (search engine) . Vietnam Searchengine: Panvietnam, vinaseek . Global Searchengine: google, altavista, hotboot  Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới. B . Google rank (the important of website: 1 -10) . Alexa rank: Traffic ranking of website.  Nâng tầm phát triển Website TRÌNH WE PP Ậ  Tự động hoá dần các chức năng của Website. VÀ L  Biến Website thành một môi trường kinh doanh thực sự Ế K TT hiệuquu quả 24/24 trên Internet. Ế THI 81 81
  82. 2/16/2011 Phụ lục, nguồn thông tin, các trang giúp đỡ FAQ  Thông tin báo cáo thường cô đọng trên web có thêm các phụ lục  FAQ (Frequently Answer Questions): Lý tưởng cho việcthiếtkế website hỗ B trợ. Giảmthiểunhânsự và chi phí cho TRÌNH WE PP Ậ việchỗ trợ,tư vấn khách hàng. VÀ L Ế K TT Ế THI 82 82
  83. 2/16/2011 Duy trì website  Cập nhật thông tin  Web t ĩnh: . Upload Webpage thông qua Web Browser . Upload Webpage thông qua FTP B program (Cute FTP, FTP Voyager , )  Web động TRÌNH WE PP Ậ . Form cậppnh nhậtCSDLnt CSDL nếuuSitecók Site có kết VÀ L nối CSDL Ế K TT Ế THI 83 83
  84. 2/16/2011 Xây dựng website dưới góc nhìn ngộ nghĩnh Nguồntừ:  Trần Thị Bích Hạnh (2007), QQáuá ttìnhrình xây dựng 1 website dưới góc nhìn ngộ nghĩnh, B  Bài giảng môn: Lậptrìnhvàthiếtkế TRÌNH WE web, Khoa CNTT, ĐHKHTN PP Ậ VÀ L Ế  K TT Ế THI websitedevelopment-process/ 84 84
  85. 2/16/2011 ĐạiHọc Sài Gòn – Khoa CNTT Bài thực hành 1 B Tổng quan về lập trình ứng dụng web TRÌNH WE PP Ậ VÀ L Ế K T T Ế THI 85 85
  86. 2/16/2011 Khảo sát các website Khảo sát các trang Web và rút ra các nhận xét về cách thiết kế trang Web Làm quen với cách sử dụng một số công cụ tiệníchhỗ trợ trong quá B trình thiếtkế Web TRÌNH WE PP Ậ Frontpage, Dreamweaver, VÀ L Ế K TT Ế THI Photoshop, Flash, 86 86
  87. 2/16/2011 Khảo sát các website  Mộtsố trang web cung cấphìnhảnh làm web www.clipart.com   Mộtsố trang web cung cấp các kiểufont chữ  B  Một số tangtrang web cngcung cấp mẫu thiết kế giao diện web TRÌNH WE PP Ậ  VÀ L Ế K TT Ế THI 87 87
  88. 2/16/2011 Chuẩnbị chọn chủđềđồán Hướng dẫncáchướng làm website B Tham khảocácwebitbsite TRÌNH WE PP Ậ VÀ L Ế K TT Ế  chọn website cho nhóm THI 88 88
  89. 2/16/2011 Tổng kết 1. Các bướcthiếtlập website 2. Thiếtkế lập trình website • Thiếtkế giao diện B 3. Xây dựng website dướigóc TRÌNH WE PP Ậ nhìn ngộ nghĩnh VÀ L Ế K TT Ế THI 4. Bài thực hành 1 89 89
  90. 2/16/2011 Yêu cầu đọcsách  31/10-ppprinciples-of-effective-web-desig/gn/  beautifulweb-design/ B httpppp://www.december.com/web/develop/proce sses.html TRÌNH WE PP Ậ http: //we bs ty legu ide.com /process /in dex. htm l VÀ L Ế K  TT Ế THI ment_process.htm 90 90
  91. 2/16/2011 Yêu cầu đọcsách Lisa Lopuck(2006), Web Design For DDiummies (2nd Edition) , Wiley Publishing - Chapter 17, 18 GOOGLE, GOOGLE, GOOGLE , B GOOGLE , GOOGLE TRÌNH WE PP Ậ VÀ L Ế K TT Ế THI 91 91