» 
 » 

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

Chia sẻ: Na Na | Ngày: | Loại File: PDF | Số trang:18

0
Thêm vào BST
Báo xấu
97
lượt xem 29
download

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

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng học phần Thiết kế lập trình Web: Chương 1 có các 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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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

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

CÓ THỂ BẠN MUỐN DOWNLOAD

CEO.04: Bộ Tài Liệu Hệ Thống Mô Tả Công Việc Dành Cho Nhân Viên IT
121 tài liệu
1910 lượt tải
THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Giấy phép ICP số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2009-2019 TaiLieu.VN. All rights reserved. TaiLieu.VN hiển thị tốt nhất với trình duyệt Chrome, Firefox, Internet Explorer 8.

Đồng bộ tài khoản