Thiết kế web - Tổng quan

2/16/2011 1 TRƯỜNG ĐẠI HỌC SÀI GÒN B THIẾT KẾ WEB P T R Ì N H W E TỔNG QUAN T K Ế V À L Ậ P GV: Trần Đình Nghĩa tdnghia1977@gmail.com T H I Ế T 1 2/16/2011 2 NỘI DUNG 1. Khái niệm cơ bản và các thành phần ủ bc a we site. 2 Nguyên tắc hoạt động cơ bản của B . website. P T R Ì N H W E 3. Các bước thiết lập website T K Ế V À L Ậ P T H I Ế T 2 2/16/2011 3 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ập hợp các quy tắc được thống nhất giữa các máy tính B trong mạng nhằm thực hiện trao đổi dữ liệu được chính xác  Ví dụ: TCP/IP, HTTP, FTP,… P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 3 2/16/2011 4 Khái niệm cơ bản  Địa chỉ IP: IP Address  Xác định một máy tính trong mạng 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 B  Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255)  Ví dụ: 118.69.204.180: địa chỉ máy chủ P T R Ì N H W E web của Đại học Sài Gòn.  Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ T K Ế V À L Ậ P loopback) là địa chỉ của chính máy tính đang sử dụng dùng để thử mạng T H I Ế T 4 2/16/2011 5 Khái niệm cơ bản  Tê iề D i Nn m n: oma n ame  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 B  Đượ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. P T R Ì N H W E  Cấp trái là con của cấp phải  Ví dụ: fit.sgu.edu.vn gắn với 112.213.89.40 trong đó: T K Ế V À L Ậ P  vn: Nước Việt Nam (Cấp 1)  edu: Tổ chức giáo dục (Cấp 2)  sgu: Tên cơ quan (Cấp 3)  fit: đơn vị nhỏ trong cơ quan (Cấp 4) T H I Ế T 5  Đặc biệt: Tên localhost được gắn với 127.0.0.1 2/16/2011 6 Khái niệm cơ bản  Má hủ á h Sy c -m y p ục vụ: erver  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 B  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 gắn với mục đích sử dụng Ví dụ: P T R Ì N H W E .  File server  Application server  Mail server T K Ế V À L Ậ P  Web server  Thực tế: các máy chủ có cấu hình cao, khả năng hoạt động ổn định T H I Ế T 6 2/16/2011 7 Khái niệm cơ bản  Má khá h Cliy c : ent  Máy khai thác dịch vụ của á hủm y c  Với mỗi dịch vụ, thường có các phần mềm chuyên biệt B để khai thác  Một máy tính có thể vừa là P T R Ì N H W E client vừa là server  Một máy tính có thể khai thác T K Ế V À L Ậ P dịch vụ của chính nó. T H I Ế T 7 2/16/2011 8 Khái niệm cơ bản  Cổ dị h S i Png c vụ: erv ce ort  Là số  [0; 65535] xác định dịch vụ của máy hủc  2 dịch vụ khác nhau chiếm các cổng khác nhau B  Mỗi dịch vụ thường chiếm các cổng xác định ví dụ: P T R Ì N H W E ,  Web: 80  FTP: 21 T K Ế V À L Ậ P T H I Ế T 8 2/16/2011 9 Khái niệm cơ 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 B máy chủ khắp thế giới  Multimedia: thông tin bao gồm text P T R Ì N H W E , graphics, sound, video. T K Ế V À L Ậ P  Hypertext: là kỹ thuật được sử dụng để truy ậ thô ti T H I Ế T 9 9 c p ng n 2/16/2011 10 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 Markup Language B  Ngôn ngữ biểu diễn các tài liệu WWW  URL-Uniform Resource Locator P T R Ì N H W E  Địa chỉ web(xác định duy nhất) T K Ế V À L Ậ P  Client-script: VB script, Java script  Server-script: ASP, PHP, JSP, ASP.NET, ... T H I Ế T 10 2/16/2011 11 W b h t độ thế à ? Khái niệm cơ bản e – oạ ng n o B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 11 2/16/2011 12 Các thành phần của website URL B Web P T R Ì N H W E Browser T K Ế V À L Ậ P Webpage T H I Ế T 12 2/16/2011 13 Khái niệm chính Browser  Lấy hiển thị (nếu có thể) các tài nguyên khác nhau  Khả năng hiển thị  Text-only B  Graphic ể P T R Ì N H W E  Hi n thị được nhiều loại ảnh  TIFT, GIF, JPEG, sound, video, postscript, … T K Ế V À L Ậ P  Hỗ trợ nhiều giao thức: HTTP, FTP, SMTP, POP  Có thể “plug-in” các công cụ vào browser để T H I Ế T 13 tăng tính năng (3D animation, SWF, …) 2/16/2011 14 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 B  Vị trí tài nguyên P T R Ì N H W E  Cú pháp chung: Protocol://host_name[:port_num][/path][/file_name] T K Ế V À L Ậ P T H I Ế T 14 URL không bao giờ chứa khoảng trắng 2/16/2011 15 Các giao tác chuẩn trên web B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 15 2/16/2011 16 World Wide Web www Các dịch vụ trên web - B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 16 2/16/2011 17 ệ ử Các dịch vụ trên Internet  Thư đi n t - 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 B  Địa chỉ email có dạng: name@domain_name P T R Ì N H W E  Được quản lý bởi Mail Server ( MailClient)  Truyền tải tập tin – FTP – File Transfer Protocol T K Ế V À L Ậ P  Là dịch vụ trao đổi các tập tin giữa các máy tính trên Internet T H I Ế T 17 Tán ngẫu – Chat – Yahoo Messenger / Google Talk 2/16/2011 18 Tra cứu thông tin trên Internet B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 18 2/16/2011 19 Một số công cụ khai thác tài nguyên Internet  Download website offline  Cho phép download website về và truy cập offline  Teleport Pro –  Offline Explorer Enterprise: B  Download file:  FlashGet www flashget com P T R Ì N H W E – . .  Tìm kiếm:  ỗ ế T K Ế V À L Ậ P Copernic – www.copernic.com: h trợ tìm ki m thông minh trên nhiều Search Engine cùng lúc, và loại bot kết quả trùng. T H I Ế T 19 2/16/2011 20 Một số thuật ngữ thông dụng  Internet: Mạng máy tính toàn cầu kết nối các mạng máy tính khắp nơi trên thế giới. Tập cá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ự B mạng Internet. Website: Tập hợp các trang web Website của các P T R Ì N H W E . tổ chức hay cá nhân trên mạng bao gồm tập hợp á ê ế ổ ứ à T K Ế V À L Ậ P c c trang web li n quan đ n t ch c n y. Webpage: Là trang web. Có thể hiển thị các T H I Ế T 20 thông tin dạng văn bản, hình ảnh, âm thanh … 2/16/2011 21 Một số thuật ngữ 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 B  Homepage: Trang chủ. Thường là trang đầu tiên (mặc định) khi truy cập một website. P T R Ì N H W E  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. T K Ế V À L Ậ P  ISA (Internet Access Provider): Nhà cung cấp đường truyền Internet.. T H I Ế T 21 2/16/2011 22 Một số thuật ngữ thông dụng  ISP (Internet Service Provider): Nhà cung cấp dịch vụ Internet. Một số ISP hiện nay ở Việt Nam: VDC, FPT, SaigonNet, VNPT, Viettel…  Search engines: Máy tìm kiếm Các công cụ tìm kiếm B hiện nay, Google, Wiki,….  HTTP, FTP, SMTP, POP3: Đây là các giao thức được P T R Ì N H W E dùng cho các dịch vụ web ftp, email trên Internet .. T K Ế V À L Ậ P T H I Ế T 22 2/16/2011 23 Các bước thiết lập website  Xác định yêu cầu Website  Mua tên miền ỗ B  Thuê ch hosting P T R Ì N H W E  Thiết kế Website T K Ế V À L Ậ P  Đưa vào hoạt động T H I Ế T 23  Duy trì thông tin, bảo dưỡng website 2/16/2011 24 Đại Học Sài Gòn – Khoa CNTT Bài thực hành 1 B P T R Ì N H W E Thao tác và sử dụng mạng Internet T K Ế V À L Ậ P T H I Ế T 24 2/16/2011 25 Bài thực hành 1  Đăng ký nhóm (file Excel)  Tì kiế thô ti ề F h tim m ng n v ree os ng  Đả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 P T R Ì N H W E website hiện có trên Internet có liên quan đến chủ đề đã chọn. T K Ế V À L Ậ P  Dùng FrontPage, Dreamweaver (MX, CS3), Photoshop (v 7 CS3) T H I Ế T 25 . , 2/16/2011 26 Tổng kết 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 B . website. P T R Ì N H W E 3. Các dịch vụ trên Internet T K Ế V À L Ậ P 4. Các bước thiết lập website T H I Ế T 26 5. Bài thực hành 1 2/16/2011 27 Đại Học Sài Gòn – Khoa CNTT Tổng quan về lập trình B ứng dụng web P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 27 2/16/2011 28 Nội dung 1. Các bước thiết lập website 2. Thiết kế website B • Thiết kế giao diện â ớ ó P T R Ì N H W E 3. X y dựng website dư i g c hì ộ hĩ h T K Ế V À L Ậ P n n ng ng n T H I Ế T 28 2/16/2011 29 Các bước thiết lập web  Xác định yêu cầu Website  Mua tên miền ỗ B  Thuê ch hosting P T R Ì N H W E  Xây dựng Website T K Ế V À L Ậ P  Đưa vào hoạt động T H I Ế T 29  Duy trì thông tin, bảo dưỡng website 2/16/2011 30 Xác định yêu cầu  M tiê ê ầ ơ bả ủục u, y u c u c n c a website  Đối tượng website phục vụ B  Chủ đề website P T R Ì N H W E  Kết quả thu được sẽ là những thông T K Ế V À L Ậ P tin quan trọng trong giai đoạn xây T H I Ế T 30 dựng web (Planning). 2/16/2011 31 Mục tiêu yêu cầu cơ bản Đề ra mục tiêu khái quát, ngắn gọn, õ à ủ b it ầ thiết kế r r ng c a we s e c n Mục đích lập website của bạn là gì? B Là công cụ để đánh giá sự thành bại P T R Ì N H W E của một website T K Ế V À L Ậ P Mục tiêu phải dài hạn, bao trùm t à bộ kế h h hát t iể T H I Ế T 31 o n oạc p r n 2/16/2011 32 Đối tượng phục vụ Xác định loại đối tượng phục vụ chính Tìm hiểu đối tượng phục vụ  Sự hiểu biết B  Trình độ  Sở thích P T R Ì N H W E  Kinh nghiệm duyệt web .. T K Ế V À L Ậ P  Thiết kế tốt sẽ thích hợp cho nhiều dạng đối tượng có trình độ nhu cầu khác nhau T H I Ế T 32 2/16/2011 33 Chủ đề website Giúp định hướng cho công việc thiết kế Giới thiệu công ty tổ chức hàng hoá, , , … Tuỳ thuộc ngành nghề: giáo dục, giải trí … B Diễn đàn trao đổi thảo luận Diễn đàn trao đổi, mua bán, kinh doanh trực P T R Ì N H W E tuyến Hay cung cấp dịch vụ và thu lợi từ quảng cáo T K Ế V À L Ậ P , … T H I Ế T 33 2/16/2011 34 Mua tên miền ê ề ê bT n mi n = T n we site  Tên ngắn  Gợi nhớ  ễ ô â ầ ẫ B D đọc, kh ng g y nh m l n  Thể hiện được tên công ty hoặc nhãn P T R Ì N H W E hiệu chính của công ty  Vd IBM T K Ế V À L Ậ P : .com Lenovo.com T H I Ế T 34 2/16/2011 35 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ết tắt B  Xác định nơi đăng ký ề ố P T R Ì N H W E  Đăng ký tên mi n càng sớm càng t t  Thủ tục đơn giản, nhanh chóng T K Ế V À L Ậ P  Kinh phí rẻ  Việt Nam: 450.000+480.000/năm T H I Ế T 35  Nước ngoài: 8 – 12USD 2/16/2011 36 Mua tên miền B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 36 2/16/2011 37 Thuê hosting  Hệ điều hành của máy chủ Dung lượng  Băng thông B  Ngôn ngữ hỗ trợ P T R Ì N H W E  Hệ quản trị CSDL hỗ trợ  Email POP3 T K Ế V À L Ậ P  SSL T H I Ế T 37 … 2/16/2011 38 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 B  Support PHP, JSP…, MySQL…  Rẻ hơn máy chủ Windows P T R Ì N H W E  Xác định dung lượng thực tế của website, khả năng sẽ mở rộng T K Ế V À L Ậ P  Xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu… T H I Ế T 38 2/16/2011 39 Thuê hosting B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 39 2/16/2011 40 Thuê hosting B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 40 2/16/2011 41 Thuê hosting B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 41 2/16/2011 42 Thuê hosting B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 42 2/16/2011 43 Thuê hosting B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 43 2/16/2011 44 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) B  Thiết kế giao diện (Interface – GUI)  Lập trình (Code – Develop) P T R Ì N H W E  Kiểm tra (Test) ể T K Ế V À L Ậ P  Tri n khai (Deploy)  Nâng cấp (Upgrade) T H I Ế T 44 2/16/2011 45 Xây dựng website  Thông tin “tĩnh” hay “động”  Web tĩnh  W b độe ng  Portal  Giá thành B  Web tĩnh: Tính theo các kiểu trang  Trang đơn giản: 70 – 150.000đ/trang  Trang hiệu ứng hình ảnh tốt: 150 – 350 000đ/trang P T R Ì N H W E .  Web động: Tính theo các mục, các khối chức năng  Thiết kế CSDL  Các chức năng phía user: đưa tin phân loại tìm kiếm T K Ế V À L Ậ P , , …  Các chức năng phía Admin: Đăng nhập, xem/thêm/sửa/xóa tin bài, báo cáo, thống kê…  Tóm lại: Từ 5 triệu trở lên (Thông dụng: 10-30 triệu) T H I Ế T 45 . 2/16/2011 46 Các thành phần cơ bản trong thiết kế giao diện  Trang chủ (Homepage)  Hệ thống định hướng (navigation – site map) B  Các trang chức năng thành viên P T R Ì N H W E T K Ế V À L Ậ P  Giao diện website T H I Ế T 46 2/16/2011 47 Trang chủ  Toàn bộ website đều được thiết lập quanh trang chủ.  Trang chủ xác định rõ chủ đề B website P T R Ì N H W E  Trang chủ xác định phong cách thiết kế của website T K Ế V À L Ậ P  Lưu ý khi sử dụng đồ hoạ T H I Ế T 47 2/16/2011 48 Hệ thống menu, logo, định danh  Hệ thống định hướng (navigation – site map)  Hệ thống menu, naviation đầy đủ, B rõ ràng. P T R Ì N H W E  Vị trí nhất quán, logic (logo công ty)  Cần quan tâm đến việc sử dụng T K Ế V À L Ậ P hiệu ứng. T H I Ế T 48 2/16/2011 49 Các trang chức năng thành viên  Hiển thị nội dung  Một nhóm t ang thành iên 1 r v ~ chức năng B  Xây dựng theo cấu trúc cơ bản P T R Ì N H W E  Nhất quán, phù hợp với các thuộc tính đã định dạng trước và phải T K Ế V À L Ậ P theo phong cách của trang chủ T H I Ế T 49 2/16/2011 50 Thiết kế giao diện web HeaderLogo C B Menu ontent  2 x 2  3 3 P T R Ì N H W E x  Table T K Ế V À L Ậ P  Mixed style. T H I Ế T 50 2/16/2011 51 Thiết kế giao diện: 2x2 layout B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 51 2/16/2011 52 Thiết kế giao diện: dạng 3 columns B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 52 2/16/2011 53 Thiết kế giao diện: Mixed style B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 53 2/16/2011 54 Xác định kiểu chữ, màu sắc Font chữ phụ thuộc vào Đặc điểm thông tin Độc giả Trình duyệt, độ phân giải B Ngôn ngữ sử dụng Font có chân không chân P T R Ì N H W E , … Gam màu: thống nhất trong toàn bộ Website T K Ế V À L Ậ P Font tiếng Việt: VNI, TCVN3, Unicode… Cắt đoạn và tóm lược thông tin trong văn bản. T H I Ế T 54 2/16/2011 55 Xác định kích thước khung nhìn  Người đọc phải cảm nhận được kích thước của trang thông tin, biết họ đang ở đâu, có thể làm gì B  Hầu hết các trang web đều không vừa khớp với màn hình 14-15’’ P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 55 2/16/2011 56 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 B feel, if you style related elements the same way in one area, continue that trend for other areas for consistency.  Alignment: Everything on the page needs to be visually P T R Ì N H W E connected to something else, nothing should be out of place or distinct from all other design elements.  Proximity: Proximity creates related meaning: elements T K Ế V À L Ậ P that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different. T H I Ế T 56  site-design/ 2/16/2011 57 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 P T R Ì N H W E  Ô lưới T K Ế V À L Ậ P  Mạng nhện. T H I Ế T 57 2/16/2011 58 Xác định cấu trúc website: Phân Cấp  Tổ chức các khối thông tin phức tạp  Hệ thống được dùng thông dụng nhất  Gần với môi trường tổ chức thế giới thực B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 58 2/16/2011 59 Xác định cấu trúc website: Nối tiếp  Biểu diễn thông tin tuần tự, nối tiếp th thời ieo g an  Các thông tin tra khảo dạng từ điển B  Thích hợp cho hệ thống nhỏ P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 59 2/16/2011 60 Xác định cấu trúc website: Ô lưới  Danh sách khoa học, các biến cố sự kiện  Mỗi thành viên phải có cùng cấu trúc B  Khó hiểu, khó xác định mối liên quan iữ á l i thô ti P T R Ì N H W E g c c oạ ng n  Thích hợp cho người sử dụng có kinh T K Ế V À L Ậ P nghiệm T H I Ế T 60 2/16/2011 61 Xác định cấu trúc website: Ô lưới B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 61 2/16/2011 62 Xác định cấu trúc website: Ô lưới B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 62 2/16/2011 63 Xác định cấu trúc website: Mạng nhện  Ít hạn chế cho việc sử 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 B  Cấu trúc phi thực tế nhất, khó hiểu, ó á P T R Ì N H W E kh dự đo n  Thích hợp với những site nhỏ, dành T K Ế V À L Ậ P cho người sử dụng có nhiều kinh T H I Ế T 63 nghiệm. 2/16/2011 64 Xác định cấu trúc website: mạng nhện B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 64 2/16/2011 65 Xác định cấu trúc website: mạng nhện B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 65 2/16/2011 66 Chú trọng vào nguyên tắc thiết kế  Thiết kế 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  Băng thông và các yếu tố phần cứng  Đơn giản, nhất quán và tính ổn định P T R Ì N H W E  Phản hồi đối thoại T K Ế V À L Ậ P  Tính tương thích trên các trình duyệt  TK cho quản trị và cập nhật nội dung. T H I Ế T 66 2/16/2011 67 Thiết kế 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ốt nhất: thử nghiệm và nhận phản hồi. B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 67 2/16/2011 68 Các giúp đỡ định hướng rõ ràng  Độc giả có thể trả lời các câu hỏi  Đ ở đâ ?ang u  Có thể làm gì ? B  Có thể đi tiếp đến đâu ? P T R Ì N H W E  Biểu tượng nhất quán, dễ hiểu, theo h ẩ i đị h T K Ế V À L Ậ P c u n qu n . T H I Ế T 68 2/16/2011 69 Các giúp đỡ định hướng rõ ràng B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 69 2/16/2011 70 Không có trang cuối (dead-end)  Mỗi trang có ít nhất một liên kết. Luôn có khả năng quay về trang chủ các, trang chủ chốt trên trang B  Trang dead-end: sẽ là trang không thể đi đế ới á t thà h iê t P T R Ì N H W E n v c c rang n v n rong website. T K Ế V À L Ậ P  Nên để liên kết về trang chủ cho tất cả T H I Ế T 70 trang thành viên. 2/16/2011 71 Băng thông và ảnh hưởng  Sự kiên nhẫn của độc giả có giới hạn  Tốc độ đôi khi là yếu tố quyết định B đến việc lựa chọn website. P T R Ì N H W E  Phân biệt giữa các thiết kế intranet à i t t T K Ế V À L Ậ P v n erne T H I Ế T 71 2/16/2011 72 Băng thông và ảnh hưởng B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 72 2/16/2011 73 Thiết kế trang web cho mạng Intranet Một số site thiết kế riêng cho các tổ chức, sử dụng mạng LAN Mục tiêu: nâng cao thời gian truy cập, ẫ B d n dắt vào sâu trong cấu trúc website  đòi hỏi thông tin phải hấp dẫn, có giá P T R Ì N H W E trị ể T K Ế V À L Ậ P Đừng đ ý tới băng thông và tốc độ  chú trọng đến nội dung có giá trị và sự T H I Ế T 73 hấp dẫn cho website. 2/16/2011 74 Tính đơn giản và tính nhất quán Tuỳ vào loại ứng dụng Cái ời ầ là thời i àngư xem c n g an v thông tin chính xác. B Đừng để ý tới băng thông và tốc độ P T R Ì N H W E  chú trọng đến nội dung có giá trị à ự hấ dẫ h b it T K Ế V À L Ậ P v s p n c o we s e. T H I Ế T 74 2/16/2011 75 Tính ổn định Ổn định về cấu trúc và 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. B Nội dung:  Các mối liên kết luôn đảm bảo có đích đến P T R Ì N H W E  Nội dung luôn đảm bảo thích hợp và phải cập nhật cho phù hợp với ngữ cảnh tại thời điểm T K Ế V À L Ậ P đọc giả duyệt Web. T H I Ế T 75 2/16/2011 76 Phản hồi và đối thoại Chuẩn bị trước cho việc trả lời, đáp ứng các đòi hỏi góp ý của người sử, dụng một cách nhanh nhất có thể. B Luôn có cung cấp địa chỉ liên kết P T R Ì N H W E với “Webmaster”. Lên kế hoạch nhân sự phụ trách lâu T K Ế V À L Ậ P dài. T H I Ế T 76 2/16/2011 77 Tương thích trên các trình duyệt khác nhau Không phải mọi trình duyệt đều hiển thị trang web của chúng ta giống nhau  Lưu ý khi có người sử dụng web browser B không có khả năng hỗ trợ đồ hoạ (mobile PDA ) P T R Ì N H W E , ,… Sử dụng nhãn (tag) ALT trong HTML để T K Ế V À L Ậ P thay thế. T H I Ế T 77 2/16/2011 78 Thiết kế cho việc quản trị và cập nhật nội dung B P T R Ì N H W E T K Ế V À L Ậ P T H I Ế T 78 2/16/2011 79 Đưa vào hoạt động – thời gian quản lý Website cần được cập nhật thông tin. Nếu phần nào đó được cập nhật  thêm ký hiệu “New” B Ghi thời gian cập nhật, số người truy cập,… P T R Ì N H W E Nếu website phức tạp  thêm một trang T K Ế V À L Ậ P “What new ?” T H I Ế T 79 2/16/2011 80 Liên kết trang web, quảng cáo Tạo liên kết đến các thông tin (đối tác khách hàng )  tăng uy tín, ,… Khi đã ổn định  chuyển đổi hình B thức kinh doanh, thu phí: P T R Ì N H W E Thuê đặt logo quảng cáo Thu phí thành viên T K Ế V À L Ậ P T H I Ế T 80 2/16/2011 81 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… B  Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới.  Google rank (the important of website: 1-10) P T R Ì N H W E  Alexa rank: Traffic ranking of website.  Nâng tầm phát triển Website T K Ế V À L Ậ P  Tự động hoá dần các chức năng của Website.  Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24 trên Internet T H I Ế T 81 . 2/16/2011 82 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): ỗ B Lý tưởng cho việc thiết kế website h trợ. P T R Ì N H W E Giảm thiểu nhân sự và chi phí cho ỗ T K Ế V À L Ậ P việc h trợ, tư vấn khách hàng. T H I Ế T 82 2/16/2011 83 Duy trì website  Cập nhật thông tin Web tĩnh:  Upload Webpage thông qua Web Browser B  Upload Webpage thông qua FTP program (Cute FTP FTP Voyager ) P T R Ì N H W E , ,… Web động  Form cập nhật CSDL nếu Site có kết T K Ế V À L Ậ P nối CSDL T H I Ế T 83 2/16/2011 84 Xây dựng website dưới góc nhìn ngộ nghĩnh Nguồn từ:  T ần Thị Bích Hạnh (2007) Q á t ình âr , u r x y dựng 1 website dưới góc nhìn ngộ B nghĩnh, P T R Ì N H W E  Bài giảng môn: Lập trình và thiết kế web, Khoa CNTT, ĐH KHTN T K Ế V À L Ậ P  T H I Ế T 84 websitedevelopment-process/ 2/16/2011 85 Đại Học Sài Gòn – Khoa CNTT Bài thực hành 1 B Tổng quan về lập trình P T R Ì N H W E ứng dụng web T K Ế V À L Ậ P T H I Ế T 85 2