bài giảng học phần thiết kế lập trình web chương 1 - gv. trần minh hùng

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