Chương 1 Mở đầu về thiết kế web

5/10/2013 1 Mở đầu về thiết kế web Nội dung  Nhắc lại một số khái niệm  Phân loại trang web  Một số bước chính trong phát triển website  Công bố website trên internet  Một số nguyên tắc quan trọng trong thiết kế web  Cấu trúc website và bố cục trang web  Tiếng Việt trong trang web Nhắc lại một số khái niệm Nhắc lại một số khái niệm  Mạng và giao thức  Địa chỉ IP: IP Address  Tên miền: Domain Name  Máy chủ - máy phục vụ: Server  Máy khách: Client  Cổng dịch vụ: Service Port 5/10/2013 2 Mạng và giao thức  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 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,… Đị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  Có dạng x.y.z.t (0 ≤ x, y, z, t ≤255)  Ví dụ: 203.162.168.130: địa chỉ máy chủ web của báo điện tử ViệtNamNet.  Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ loopback) là địa chỉ của chính máy tính đang sử dụng dùng để thử mạng Tên miền: Domain 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.  Cấp lớn hơn là con của cấp nhỏ hơn  Ví dụ: xxxx.rtc2.edu.vn gắn với 210.245.22.25 trong đó: – vn: Nước Việt Nam (Cấp 1) – edu: Tổ chức giáo dục (Cấp 2) – rtc2: Tên cơ quan (Cấp 3) – xxxx: đơn vị nhỏ trong cơ quan (Cấp 4)  Đặc biệt: Tên localhost được gắn với 127.0.0.1 Máy chủ - má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 gắn với mục đích sử dụng. Ví dụ: – File server – Application server – Mail server – Web server  Thực tế: các máy chủ có cấu hình cao, khả năng hoạt động ổn định 5/10/2013 3 Máy khách: Client  Máy khai thác dịch vụ của máy chủ Với mỗi dịch vụ, thường có các phần mềm chuyên biệt để khai thác  Một máy tính có thể vừa là client vừa là server  Một máy tính có thể khai thác dịch vụ của chính nó. Cổng dịch vụ: Service 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 định, ví dụ: • Web: 80 • FTP: 21 Chương I: Giới thiệu WEB Giới thiệu WEB  Lịch sử  Các thành phần của web  Trang web, web site, World Wide Web  Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator)  Web server, Web browser 5/10/2013 4 Lịch sử: – Mạng Internet xuất phát từ mạng ARPANET của Mỹ (1969) - mạng giữa các trường ĐH – 1989 - Tim Berners Lee phát minh ra giao thức World Wide Web (tại phòng TN vật lý phân tử-Geneva), sau đó Hypertext Markup Language - HTML – 1990 – Tim viết trình duyệt (Web Browser) và Web server đầu tiên (info.cern.ch) – Việt nam có Internet vào tháng 11/1997 – Đến nay, có khoảng hơn 30 tỉ trang web thuộc hơn 100 triệu website Các thành phần của web  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  Các thành phần của web – Web Page – Web site – Uniform Resource Locator (URL) – Web Server, Web Browser Trang web, web site, World Wide Web Trang web: Web page: – Là một trang nội dung – Có thể được viết bằng nhiều ngôn ngữ khác nhau nhưng kết quả trả về client là HTML Web site: – Tập hợp các trang web có nội dung thống nhất phục vụ cho một mục đích nào đó World Wide Web (WWW): - Tập hợp các web site trên mạng internet. Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator)  Tài nguyên: file trên mạng  URL: Xác định vị trí và cách khai thác file  Cấu trúc: giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file Ví dụ: Trong trường hợp mặc định, nhiều thành phần có thể bỏ qua: – Giao thức, cổng: Được trình duyệt đặt mặc định – Tên file: được máy chủ đặt mặc định 5/10/2013 5 Web server, Web browser  Web server: – Máy phục vụ web – Một số phần mềm web server chuyên dụng: • Apache: mã nguồn mở • Internet Information Services (IIS): Sản phẩm của Microsoft  Web Browser: – Phần mềm chạy trên client để khai thác dịch vụ web – Một số Web browser: • Nescape • Mozilla Firefox • Internet Explorer (IE): tích hợp sẵn trong windows • ... Phân loại trang web Phân loại trang web  Dựa vào công nghệ phát triển  So sánh Phân loại trang web – Web tĩnh: • Dễ phát triển • Tương tác yếu, không cho phép NSD tương tác • Sử dụng HTML • Người làm web tĩnh thường dùng các công cụ trựcquan để tạo ra trang web – Web động: • Khó phát triển hơn • Tương tác mạnh • Sử dụng nhiều ngôn ngữ khác nhau • Thường phải viết nhiều mã lệnh. Mã lệnh được thực thi trên server, gửi kết quả là HTML về NSD 5/10/2013 6 So sánh  Trang Web tĩnh: - Có nội dung không thay đổi trên Browser, chỉ thay đổi khi nhà thiết kế thay đổi nội dung trình bày - Thường có tên mở rộng là .html, .htm bao gồm các thẻ HTML  Trang Web động: - Có thể thay đổi nội dung trình bày trên Browser khi người sử dụng triệu gọi chúng - Thường được xây dựng từ ASP, JSP, PHP, ASP.NET Một số bước chính trong phát triển website Các bước thiết kế web ・ Các tiêu chuẩn thiết kế web: Tương thích các web browser, các hệ điều hành, các loại màn hình,… ・ Tiến trình thiết kế web Các tiêu chuẩn thiết kế ・ Thiết kế cho các loại Browser khác nhau: – Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Lynx,… ・ Tương thích các loại hệ điều hành ・ Theo sở thích của người sử dụng ・ Độ phân giải màn hình hoặc kích thước cửa sổ ・ Tốc độ kết nối ・ Màu sắc, độ sáng và phông chữ 5/10/2013 7 Thiết kế màn hình - PC Left edge = 2px Rightt edge =3px Left edge = 2px Rightt edge =3px Title bar (18px) (26px) Menu bar (32px) Status bar (23px) Task bar (23px) Vertical scrollbar Vertical scrollbar Một thiết kế tốt  Nội dung là quan trọng, nhưng nội dung đơn độc sẽ làm cho nó mất tác dụng trên trang web  Một thiết kế web được gọi là tốt khi: - Dễ hiểu - Tạo ấn tượng khi vào - Dễ sử dụng - Dễ nhìn và cảm nhận - WYSIWYG (What You See Is What You Get: "thấy gì có nấy" và hiểu như là "Giao diện tương tác tức thời - mắt thấy tay làm") Tiến trình thiết kế web 1. Phân tích ý tưởng, mục tiêu, hoạch định kế hoạch 2. Hoạch định cấu trúc website 3. Tạo các trang đơn và đưa nội dung vào 4. Thử nghiệm, kiểm tra và đánh giá 5. Tải lên server và thử nghịêm lần cuối 6. Duy trì hoạt động và quản lý website Bước 1: Phân tích ý tưởng, mục tiêu, hoạch định kế hoạch  Xác định chính xác mục tiêu của trang này một cách ngắn gọn. Lập website này để làm gì? cung cấp gì cho user? cho user làm gì trên website  Xác định vấn đề giải quyết, chủ đề website website thuộc loại gì?sẽ có những tính năng gì?  Xác định người dùng  Ai là user chính? họ thuộc tầng lớp nào? dự đoán về tốc kết nối của user, HĐH, kích thước màn hình, tần xuất truy cập  Liệt kê các nguồn tài nguyên Trang thiết bị, công cụ phần mềm, trình độ chuyên môn của mình, cái gì mình làm, cái gì cần giúp?  Xây dựng bảng tiến độ thực hiện 5/10/2013 8 Bước 2: Hoạch định cấu trúc website ・ Phân loại trang web thiết kế: – Cá nhân – Doanh nghiệp – Thương mại ・ Phần nội dung chính: • Liệt kê các mục nội dung chính trong website => website có những trang chính nào ・ Chọn lựa cách thiết kế: • Dạng bảng • Dạng khung Dạng Templates, Masterpage Phác thảo sơ đồ cây của website Bước 3: Tạo các trang đơn và đưa nội  Nội dung luôn là phần quan trọng nhất  Tạo,kiểm tra, hiệu chỉnh, đánh giá, các trang riêng lẻ. ‾ Nếu thông tin không cần thay đổi thì nên dùng web tĩnh => nhanh hơn, an toàn hơn ‾ Nếu thông tin thay đổi thường xuyên => web động ‾ Nếu có nhiều trang có bố cục giống nhau => dùng masterpage cho tất cả các trang đó  Làm việc theo module ‾ Nên chia thành các module để dễ quản lý và sử dụng hơn. VD: Module menu, module kết nối CSDL, module hiển thị kết quả,… Các thành phần cơ bản của website  Trang chủ (HomePage) – Mọi website đều được thiết lập quanh Homepage – Điều kiện cơ bản để website thành công – Lưu ý khi sử dụng hệ thống đồ họa  Hệ thống Menu, Logo, định danh – Hệ thống menu phải rõ ràng, đầy đủ sẽ giúp đọc giả hình dung được cấu trúc, tổ chức website. – Cần quan tâm đến vị trí, các thể hiện (có hay không có hiệu ứng) – Vị trí logo, định danh công ty phải cố định nhất quán  Các trang thành viên Thiết kế giao diện - frame 5/10/2013 9 Thiết kế giao diện- Table within a table Thiết kế giao diện – cấu trúc phức tạp Kiểu chữ, màu sắc  Phông chữ phụ thuộc vào các yếu tố: – Đặc điểm thông tin – Độc giả – Trình duyệt, độ phân giải – Ngôn ngữ sử dụng  Gam màu thống nhất trong toàn bộ Website  Font tiếng Việt: Chỉ dùng Unicode Hiển thị thông tin tóm tắt – chi tiết  Tóm tắt thông tin có một số lợi điểm: – Đọc giả có ít thời gian để đọc các tài liệu trên màn hình. – Luôn có nhu cầu muốn tìm phần thông tin chủ định, không nên chia cắt quá nhỏ, tóm lược quá ngắn  gây thất vọng – Hình thức và cách tổ chức đồng nhất  kinh nghiệm tìm kiếm, khám phá. – Thông tin ngắn gọn, súc tích thích hợp với màn hình máy tính (bị giới hạn tầm nhìn).  Thông tin chi tiết chỉ khi đi vào một vấn đề, nội dung cụ thể 5/10/2013 10 Thông tin tóm tắt – chi tiết Bước 4: Thử nghiệm, kiểm tra và đánh giá  Dùng IIS Tạo Virtual Directory để kiểm tra (hoặc Apache Sever)  Kiểm tra hoạt động của các liên kết (nội + ngoại) và các nguồn tài nguyên.  Thử với nhiều trình duyệt khác nhau.  Đánh giá chung kết quả Tạo virtual Directory  Khởi tạo IIS bằng cách: – Start-> Programs-> Administartive Tools -> Internet Information Service. – Hoặc trong classic Start-> Settings->Control Panel -> Administartive Tools-> Internet Information Service. Tạo virtual Directory (tt)  Bố trí một virtual directory PTTH – Nhấp phải (right click) vào Default Web Site, chọn New, Virtual Directory 5/10/2013 11 Tạo virtual Directory (tt)  Nhấp vào nút và gõ PTTH ở hộp Alias PTTH Tạo virtual Directory (tt)  Nhấp vào nút và dùng  để chọn sub folder  D:\11CDTH\ PTTH D:\10CDTH\PTTH Tạo virtual Directory (tt) Tạo virtual Directory (tt)  Dùng tên PTTH như tên một trang web với điều kiện trong Documents của PTTH Properties phải có chứa trang web đó. 5/10/2013 12 Bước 5: Tải lên server và thử nghịêm lần cuối  Mua tên miền  Tên miền = Tên website  Tên ngắn  Gợi nhớ  Dễ đọc, không gây nhầm lẫn  Thể hiện được tên công ty hoặc nhãn hiệu chính của công ty  Thuê chỗ hosting  Tải lên và thử nghiệm Mua tên miền Thuê chỗ hosting  Hệ điều hành  Dung lượng  Băng thông  Ngôn ngữ hỗ trợ  Hệ quản trị CSDL hỗ trợ  Email POP3  SSL  ・ … Tên miền + Hosting Free  Các trang web trên mạng cho free – www.somee.com • 105MB • 3GB monthly bandwidth • FTP access • ASP, ASP.NET • MS Access Databases • Dạng địa chỉ: – www.webng.com • 350MB • 10GB/m • ASP • MS Access • hoặc www.webng.com/user 5/10/2013 13 Tên miền + Hosting Free  Các trang web trên mạng cho free – www.freewebpage.org • 150MB • FTP access • 500MB/m • Upload: 10Files (max: 8MB) • Linux • – www.freespaces.com • 50MB • 1,5GB/m • Upload: 10files (max: 8MB) • No FTP access • hoặc www.freespaces.com/user Tên miền + Hosting Free Đưa website lên mạng Internet  Cách I: Dùng các tiện ích của nhà cung cấp web hosting  Vào www.freewebpage.org ->Login:  Copy các file từ máy user lên máy chủ Đưa website lên mạng Internet  Cách 2: Dùng các chương trình FTP  Dùng Core FTP Lite (WS FTP, FTP Cute,…) 5/10/2013 14 Đưa website lên mạng Internet  Core FTP Lite:  Menu:  File->connect: Đưa website lên mạng Internet Thử nghịêm lần cuối  Thử các trang bằng nhiều cách kết nối khác nhau.  Thử các trang ở tình trạng mức độ truy cập cao (giờ cao điểm).  Thử các trang với nhiều dạng người dùng khác nhau trên nhiều loại máy tính với màn hình khác nhau.  Thử lại (Test, test and test!!!)  Đánh giá chung kết quả Bước 6: Duy trì hoạt động và quản lý website  Ai sẽ quản lý website  Hàng ngày cần đưa thông tin gì?  Website cần được cập nhật thông tin để đọc giả luôn cảm nhận được cái mới  Ghi thời gian cập nhật, số người truy cập…  Liên kết trang, quảng cáo  Tạo liên kết đến các trang thông tin (đối tác, khách hàng…) → tăng uy tín – Khi đã ổn định → chuyển đổi hình thức kinh doanh, thu phí: Thuê đặt logo, quảng cáo, Thu phí thành viên, …. 5/10/2013 15 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. • Google rank (the important of website: 1-10) • Alexa rank: Traffic ranking of website.  Nâng tầm phát triển Website – 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. Một số nguyên tắc quan trọng trong thiết kế web Các nguyên tắc cơ bản  Tổ chức website chặt chẽ và dễ sử dụng  Website của bạn cần có cấu trúc càng rõ ràng dễ hiểu càng tốt. Điều quan trọng ở đây là phải làm sao để khách hàng thấy được ngay các thông tin mà họ hy vọng có thể thu được từ website của bạn  Sử dụng từ ngữ dễ hiểu  Khi một người đến thăm website của bạn, có thể anh ta chưa biết bạn là ai?. Bạn đang chào bán sản phẩm gì?. Bạn phải giúp khách hàng hiểu rõ những vấn đề này trong thời gian ngắn nhất. Hãy dùng các câu ngắn gọn, cô đọng và giữ kiểu thiết kế cố định đối với tất cả các trang con. Các nguyên tắc cơ bản  Dễ dàng khám phá các đường link  Hãy tạo các đường link bằng chữ hay biểu tượng ở tất cả các trang con để mọi người có thể xem lại hoặc xem tiếp mà không phải sử dụng đến nút "Back" hay "Forward" của trình duyệt.  Thời gian tải web phải nhanh  Nhân tố thời gian là vô cùng quan trọng vì mọi người thường không kiên nhẫn khi vào mạng. Nếu trang của bạn phải mất thời gian quá lâu để tải về thì khách hàng có thể nhấn chuột và bỏ đi 5/10/2013 16 Các nguyên tắc cơ bản  Nội dung không có hình ảnh  Nếu bạn có một nội dung vô giá trong trang web, hãy làm cho nó dễ đọc. Hãy chia thành những đoạn quan trọng, gạch chân hoặc bôi đậm những câu quan trọng trong từng đoạn và bạn đừng ngại trang trí với một số màu.Tô màu văn bản thay thế file đồ hoạ nếu có thể.  Dễ theo dõi "quá trình bán hàng".  Phải tạo điều kiện để khách hàng hiểu rõ những lợi ích của sản phẩm và dịch vụ của bạn đem lại cũng như cung cấp cho khách hàng phương thức đặt hàng thuận tiện nhất. Các nguyên tắc cơ bản  ・ Tương thích với đa số trình duyệt web  ・ Một số vấn đề quan trọng khác  - Đọc và kiểm tra cẩn thận tất cả các nội dung  - Một yếu tố thành công khác trong marketing trực tuyến Cấu trúc website và bố cục trang web Định hướng  Khi nào thì bắt đầu? Bắt đầu từ đâu?  Cần học những gì để thiết kế web? - Thiết kế đồ họa, Thiết kế giao diện - Thiết kế thông tin - Tạo các trang web với HTML - Lập trình và quá trình tạo mã kịch bản - Truyền thông đa phương tiện 5/10/2013 17 Phần mềm trợ giúp Thiết kế đồ họa - Adobe Photoshop - Adobe ImageReady - Macromedia Fireworks - Adobe Illustrator - JASC Paint Shop Pro Multimedia - Macromedia Flash - Adobe LiveMotion - Apple Quicktime - Apple Final Cut Pro - Adobe Premiere ASPNET PHP ASP.NET Web Matrix PHP PHP ZendStudio Ngôn ngữ lập trình web  Cần học những gì?  - HTML  - JavaScript  - DHTML  - XML  - PHP  - Perl  - ASP (ASP.NET)  - JSP  - ???? Hoạt động của trang web  Internet và Web  Địa chỉ trang web – URL  se/index.html Các triết lý xây dựng web  - Mục đích của Website cần thiết kế  - Xác định đối tượng độc giả của Website  - Thiết lập các chủ đề  - Thiết kế các khối thông tin chủ yếu sẽ cung cấp 5/10/2013 18 Các triết lý xây dựng web  Các bước trong tổ chức thông tin  - Chia thành các đơn vị logic, cắt đoạn thông tin  - Thiết lập hệ thống cấp bậc theo tầm quan trọng và tính  tổng quát  - Tạo cấu trúc quan hệ giữa chúng  - Phân tích sự thành công về chức năng và thẩm mỹ của hệ thống