Mở đầu về thiết kế web

Mở đầu về thiết kế web
Đào Việt Cường
Khoa CNTT-ĐHSP Hà Nội
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
Mạng, 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.18.59: địa chỉ máy chủ web của ĐHSP Hà Nội.
Đặ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ụ: cntt.dhsphn.edu.vn gắn với 203.162.18.59 trong đó:
vn: Nước Việt Nam (Cấp 1)
edu: Tổ chức giáo dục (Cấp 2)
dhsphn: Tên cơ quan (Cấp 3)
cntt: đơ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
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
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ụ: http://www.dhsphn.edu.vn:8080/html/test.htm
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
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.
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, có 2 loại:
Web tĩnh:
Dễ phát triển
Tương tác yếu
Sử dụng HTML
Người làm web tĩnh thường dùng các công cụ trực quan để 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ột số bước chính trong phát triển website
Các bước
Tương tự với phân tích và thiết kế hệ thống.
Đặc tả
Phân tích
Thiết kế
Lập trình
Kiểm thử
Một số điều cần chú ý
Đặc tả:
Web để làm gì?
Ai dùng?
Trình độ người dùng?
Nội dung, hình ảnh?
Phân tích
Mối liên quan giữa các nội dung?
Thứ tự các nội dung?
Một số điều cần chú ý (tt)
Thiết kế
Sơ đồ cấu trúc website
Giao diện
Tĩnh hay động
CSDL
Nội dung từng trang
Liên kết giữa các trang
Xây dựng
Cấu trúc thư mục
Các modul dùng chung
…
Một số điều cần chú ý (tt)
Kiểm thử
Kiểm tra trên nhiều trình duyệt
Kiểm tra trên nhiều loại mạng
Kiểm tra tốc độ
Kiểm tra các liên kết
Thử các lỗi bảo mật
…
Công bố website trên Internet
Các điều kiện cần thiết
Xây dựng website
Quyền sử dụng hợp pháp
Domain
Sử dụng tên miền con miễn phí
Đăng ký tên miền riêng
Hosting
Sử dụng miễn phí
Thuê không gian riêng
Tự host website của mình
Duy trì và phát triển và quảng bá website
Xây dựng website
Thông tin “tĩnh” hay “động”
Web tĩnh
Web động
Portal
Giá thành
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
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…
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)
Phân tích
Có nên đăng ký tên miền, thiết kế và duy trì website hay không?
Nếu có, đăng ký tên miền với tên thế nào, thể loại gì, theo hệ thống của Việt Nam hay theo các hệ thống tên miền bên ngoài
Có tự Host website của mình không?
Để phục vụ website, có các phương án dành cho?
Nhân sự
Kinh phí
Cơ chế tổ chức, hoạt động
Quy trình làm việc
Đăng ký 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
Xác định nơi đăng ký
Đăng ký tên miền càng sớm càng tốt
Thủ tục đơn giản, nhanh chóng
Kinh phí rẻ
Việt Nam: 450.000+480.000/năm
Nước ngoài: 8 – 12USD
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
Support PHP, JSP…, MySQL…
Rẻ hơn máy chủ Windows
Xác định dung lượng thực tế của website, khả năng sẽ mở rộng
Xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu…
Duy trì website
Cập nhật thông tin
Web tĩnh:
Upload Webpage thông qua Web Browser
Upload Webpage thông qua FTP program (Cute FTP, FTP Voyager,… )
Web động
Form cập nhật CSDL nếu Site có kết nối CSDL
Phát triển website
Các chiến lược marketing
Sử dụng thư điện tử
Đầu tư quảng cáo 1 đợt trên các phương tiện truyền thông (Báo, đài, Tivi…)
Liên kết với các site cùng loại
Trao đổi banner
Giới thiệu lẫn nhau.
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ấu trúc website và bố cục trang web
Tiếng Việt trong trang web