5/10/2013
Nhắc lại một số khái niệm
Phân loại trang web
Nội dung
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
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
1
5/10/2013
Xác định một máy tính trong mạng
Mạng máy tính:
dựa trên giao thức TCP/IP. Hai máy tính trong
Computer Network:
mạng có 2 địa chỉ IP khác nhau
Có dạng x.y.z.t (0 ≤ x, y, z, t ≤255)
Hệ thống các máy tính được kết nối với nhau nhằm trao đổi dữ liệu.
Ví dụ: 203.162.168.130: địa chỉ
Giao thức: Protocol:
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
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
dùng để thử mạng
Ví dụ: TCP/IP, HTTP, FTP,…
Địa chỉ IP: IP Address Mạng và giao thức
Là tên được “gắn” với 1 địa chỉ IP.
Tên miền: Domain Name 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
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)
Thực tế: các máy chủ có cấu hình cao, khả
Đặc biệt: Tên localhost được gắn với 127.0.0.1
năng hoạt động ổn định
2
5/10/2013
– Là số [0; 65535] xác định dịch vụ
Máy khai thác dịch vụ của máy
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
xác định,
Một máy tính có thể vừa là
ví dụ:
client vừa là server
• Web: 80
Một máy tính có thể khai thác
• FTP: 21
dịch vụ của chính nó.
Máy khách: Client Cổng dịch vụ: Service Port
Giới thiệu WEB
Chương I: 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
3
5/10/2013
– 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
– Là các dịch vụ phântáncung cấp thông
– 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
tin multimedia dựa trên hypertext Các thành phần của web
(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
– Web Page – Web site – Uniform Resource Locator (URL) – Web Server, Web Browser
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)
Trang web: Web page:
Tài nguyên: file trên mạng
– Là một trang nội dung
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/10/2013
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 server, Web browser
Phân loại trang web
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
– Web động:
• Khó phát triển hơn
Dựa vào công nghệ phát triển So sánh
• 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,
– 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
gửi kết quả là HTML về NSD
5
5/10/2013
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
Một số bước chính trong phát 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
・ Thiết kế cho các loại Browser khác nhau:
・ Các tiêu chuẩn thiết kế web: Tương thích các
– Internet Explorer, Netscape Navigator,
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 bước thiết kế web Các tiêu chuẩn thiết kế
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ữ
6
5/10/2013
Nội dung là quan trọng, nhưng nội dung đơn độc
Title bar (18px) (26px) Menu bar (32px)
Thiết kế màn hình - PC Một thiết kế tốt
sẽ làm cho nó mất tác dụng trên trang web
Left edge = 2px
Rightt edge =3px
Left edge = 2px
Rightt edge =3px
Vertical scrollbar Vertical scrollbar
Status bar (23px)
Task bar (23px)
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
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ế
hoạch
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
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
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
5/10/2013
・ Phân loại trang web thiết kế:
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ẻ.
‾
– Cá nhân – Doanh nghiệp – Thương mại
‾
・ Phần nội dung chính:
‾
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 đó
Bước 2: Hoạch định cấu trúc website Bước 3: Tạo các trang đơn và đưa nội
Làm việc theo module
• 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
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ả,…
Dạng Templates, Masterpage
Phác thảo sơ đồ cây 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
8
Các thành phần cơ bản của website Thiết kế giao diện - frame
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
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:
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
– Đọ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).
Gam màu thống nhất trong toàn bộ Website Font tiếng Việt: Chỉ dùng Unicode
Thông tin chi tiết chỉ khi đi vào một vấn đề,
Kiểu chữ, màu sắc
nội dung cụ thể
9
5/10/2013
Bước 4: Thử nghiệm, kiểm tra và đánh giá
Dùng IIS Tạo Virtual Directory để kiểm
Thông tin tóm tắt – chi tiết
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ả
Khởi tạo IIS bằng cách: – Start-> Programs-> Administartive Tools -> Internet Information Service.
Bố trí một virtual directory PTTH – 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
Tạo virtual Directory Tạo virtual Directory (tt)
5/10/2013
Nhấp vào nút
Nhấp vào nút
PTTH
D:\10CDTH\PTTH
Tạo virtual Directory (tt) Tạo virtual Directory (tt)
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
5/10/2013
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
Tên miền + Hosting Free
Các trang web trên
mạng cho free
– www.webng.com
– www.somee.com
• 350MB • 10GB/m • ASP • MS Access • http://user.webng.com hoặc www.webng.com/user
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 ・ …
• 105MB • 3GB monthly bandwidth • FTP access • ASP, ASP.NET • MS Access Databases • Dạng địa chỉ: http://user.somee.com
12
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
– www.freewebpage.org
• 50MB • 1,5GB/m • Upload: 10files (max: 8MB) • No FTP access • http://user.freespaces.com/ hoặc www.freespaces.com/user
• 150MB • FTP access • 500MB/m • Upload: 10Files (max: 8MB) • Linux • http://user.freewebpage.org/
CáchI: Dùng các tiện ích của nhà cung
cấp web hosting
Cách 2: Dùng các chương trình FTP 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
Đưa website lên mạng Internet Đưa website lên mạng Internet
5/10/2013
Core FTP Lite:
Menu:
File->connect:
Đưa website lên mạng Internet Đưa website lên mạng Internet
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ì?
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
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
Tạo liên kết đến các trang thông tin (đối tác,
Thử lại (Test, test and test!!!) Đá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
Thử nghịêm lần cuối
5/10/2013
Quảng bá website
Một số nguyên tắc quan trọng trong thiết kế web
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.
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 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.
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
Thờigiantảiweb phảinhanh
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 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
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.
15
Các nguyên tắc cơ bản Các nguyên tắc cơ bản
5/10/2013
Nộidung khôngcóhìnhảnh
・ 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
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ể.
- Một yếu tố thành công khác trong
Dễtheodõi"quátrìnhbánhà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.
Các nguyên tắc cơ bản Các nguyên tắc cơ bản
Khi nào thì bắt đầu? Bắt đầu từ đâu? Cần học những gì để thiết kế web?
Định hướng
Cấu trúc website và bố 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
5/10/2013
Phần mềm trợ giúp Ngôn ngữ lập trình web
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
PHP PHP ZendStudio
ASP.NET Web Matrix
Cần học những gì? - HTML - JavaScript - DHTML - XML - PHP - Perl - ASP (ASP.NET) - JSP - ????
Internet và Web Địa chỉ trang web – URL
http://www.domain.com:8080/2007/dba
- 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
Hoạt động của trang web Các triết lý xây dựng web
se/index.html
17
5/10/2013
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ác triết lý xây dựng web
