1. Chuong 1-Tổng quan về thiết kế Web

TRƯỜNG ĐẠI HỌC KINH TẾ QUỐC DÂN
VIỆN CÔNG NGHỆ THÔNG TIN VÀ KINH TẾ SỐ
CHƯƠNG I:
TỔNG QUAN VỀ THIẾT KẾ WEB
CHƯƠNG I: TỔNG QUAN VỀ THIẾT KẾ WEB
1.1. Ứng dụng Web
1.2. Thiết kế Web tĩnh
1.3. Lập trình Web động
1.4. HTML, CSS, Javascript
1.5. Các vấn đề khi thiết kế Web
1.6. Công cụ phát triển Web

CHƯƠNG I: TỔNG QUAN VỀ THIẾT KẾ WEB

1.1. ỨNG DỤNG WEB
❖ Mạng Internet:
 Hầu hết các ứng dụng
Web được truy cập thông
qua mạng Internet
❖ Mạng cục bộ (LAN-Local Area Network) kết nối các máy tính trong
phạm vi gần, thường là một mạng máy tính nội bộ trong một tổ
chức.
❖ Mạng diện rộng (WAN-Wide Area Network) gồm nhiều mạng LAN
kết nối để tạo ra một mạng với quy mô lớn hơn.
❖ Mạng Internet bao gồm các mạng WAN được kết nối với nhau và trao
đổi thông tin qua các điểm trao đổi Internet IXP (Internet eXchange
Point)
 Có khoảng 600 IXP trên thế giới.
❖ Một ISP (Internet Service Provider): cung cấp dịch vụ để truy cập
vào mạng Internet.
❖ Đị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.
o Hai máy tính trong mạng có 2 địa chỉ IP khác nhau
 IPv4 sử dụng 32 bit, có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255).

 Để biết IP: ping www.intel.com
 Ví dụ: google Việt Nam?
74.125.127.106
 Địa chỉ Loopback: 127.0.0.1
o Là địa chỉ nội bộ của máy tính cho mạng IPv4, là địa chỉ mạng bên trong của chính máy tính.
o Nếu cài đặt một dịch vụ mạng (VD: máy chủ web) trên máy tính của mình thì địa chỉ nội bộ luôn là 127.0.0.1
6
❖ Tên miền (Domain name)

 Là tên giao dịch của công ty hay tổ chức trên Internet
 Là tên gắn liền với một địa chỉ IP
 Ở dạng văn bản, thân thiện với người dùng
 Ví dụ: www.neu.edu.vn 171.244.50.30
 Localhost: 127.0.0.1
 Ánh xạ giữa tên miền và địa chỉ IP
o Do DNS server – Domain name system (service) đảm nhiệm
7
❖ Cổng dịch vụ (Service Port)

 Tại sao lại cần?
o Một Server có thể cung cấp nhiều dịch vụ → cần sử dụng cổng để xác định dịch vụ
cung cấp
 Cổng là một số nguyên không dấu 16 bit (1 đến 65535, số cổng 0 được bảo lưu
và không thể được sử dụng).
 Số hiệu cổng của 1 số dịch vụ phổ biến:
o HTTP: 80
o FTP: 20 và 21
o SMTP: 25
o POP3: 110
8
❖ Web (World Wide Web hay www)

 Web là hệ thống các tài liệu hypertext liên kết với nhau thông qua mạng
Internet
❖ Các thành phần của Web:
 Web Page
 Web Site
 Uniform Resource Locator
 Web Server
 Web Browser
9
❖ Web Page:
 Là một trang Web
 Ngôn ngữ viết: PHP, ASP, ASP.Net… nhưng kết quả trả về cho Client là HTML
❖ Website:
 Là tập hợp các WebPage có nội dung thống nhất
10
❖ Kiến trúc Client-Server

 Các ứng dụng Web hoạt
động theo kiến trúc Client
- Server
❖ Kiến trúc ứng dụng Web:

 Web Server, Web Browser
12
❖ Trình duyệt Web (Web Browser)

 Hiển thị các tài nguyên khác nhau
o TEXT, GIF, JPEG, sound, video, postscript,...
 Hỗ trợ nhiều giao thức

o HTTP, FTP, SMTP, POP, ...
 Có thể “plug-in” các công cụ vào browser để tăng tính năng (3D animation,
SWF, ...)
❖ Trình duyệt Web (Web Browser)

 Gửi yêu cầu và nhận các tập tin HTML, CSS (nhiều file khác)…
 Thông dịch trang HTML, CSS và thực thi các kịch bản Javascript nhận được
 Kết xuất (Render) hiển thị trang theo yêu cầu
Trình duyệt Thị phần
❖ Trình duyệt Web (Web Browser) Google Chrome 69.53%
 Bảng tổng kết các trình duyệt phổ biến Microsoft Edge 9.71%
trên thế giới tính đến 2/2021 Mozilla Firefox 7.15%
Internet Explorer 4.53%
Safari 3.92%
QQ browser 1.49%
Sogou Explorer 1.35%
Opera 0.9%
Yandex Browser 0.84%
UC Browser 0.29%
Các trình duyệt khác 0.29%
https://gs.statcounter.com/
❖ Web Server
 Web server là máy chủ cài đặt các chương trình phục vụ các ứng dụng web.
o Là nơi lưu trữ mã nguồn và nội dung website;
 Web Server nhận request từ các trình duyệt web và gửi phản hồi đến client
thông qua giao thức HTTP hoặc các giao thức khác.
 Có nhiều web server khác nhau:
16
❖ Web Server (máy phục vụ Web):

 Tất cả các (máy phục vụ Web đều hiểu và chạy được các file *.htm, *.html.
 Mỗi Web Server phục vụ một số kiểu file chuyên biệt:
o IIS của Microsoft dành cho *.asp, *.aspx...
o Apache dành cho *.php...
o Tomcat server dành cho *.jsp...
❖ Web Server
 Top 15 Web Servers 2021
❖ Giao thức HTTP - (HyperText Transfer Protocol)

 Là giao thức được dùng đề truyền tải dữ liệu dạng HTML, XML trên môi trường
mạng (World Wide Web)
o Web Browser và Web Server giao tiếp với nhau thông qua giao thức HTTP.
 Khi một trình duyệt (client) kết nối tới một web server nó sẽ gửi một HTTP
Request tới web server
 Web Server sau khi nhận và xử lý yêu cầu sẽ gửi một HTTP Respone – đáp
ứng lại cho Client
19
❖ HTTP Request
 Một HTTP Request được gửi từ Client đến Web Server là một tệp
có định dạng:
o Dòng đầu tiên được gọi là đầu yêu cầu (request header) chứa ba thông số:
• Phương thức yêu cầu (request method)
• URL
• Phiên bản HTTP được sử dụng
o Các dòng tiếp theo chứa thông tin về các kiểu tệp, tập ký tự được chấp nhận,
phiên bản trình duyệt, hệ điều hành sử dụng trên client
20
❖ HTTP Request:
 Ví dụ: Một HTTP Request được gửi từ Client:
21
❖ HTTP Request: Các phương thức HTTP

 GET: lấy dữ liệu của một tài nguyên (file văn bản, hình ảnh, video hoặc một trang
HTML...)
o VD: tải về avatar hoặc video,...
 POST: gửi dữ liệu đến server giúp để có thể thêm mới dữ liệu hoặc cập nhật dữ liệu
đã có vào database.
o VD: form đăng ký tài khoản người dùng, form để người dùng upload avatar hay video …
 OPTIONS: Lấy các thuộc tính của server hoặc tệp tin
 HEAD: Tương tự như GET nhưng không có dữ liệu trong response body
 PUT: Ghi một tệp tin lên server
 DELETE: Xoá một tệp tin trên server
 TRACE: lặp lại request trong response body (Hữu dụng cho việc gỡ lỗi debug)
 CONNECT: Thiết lập một tunnel tới Server được xác định bởi URI đã cung cấp
22
❖ HTTP status codes: Mã trạng thái HTTP được server phản hồi lại
mỗi khi nhận được HTTP Request
Mã1xxLoại
 phảnhồi
(Phản hồitạm thời) Mô tả
1xx Thông tin yêu cầu đã được nhận và tiến trình đang tiếp tục.
 2xx (Truy cập thành công)
hoạt động đã được nhận, được hiểu, và được chấp nhận một cách
2xx Thành công
thành công.
hoạt động phải được thực hiện để hoàn thành yêu cầu.
3xx Sự điều hướng lại
4xx Lỗi Client yêu cầu chứa cú pháp không chính xác hoặc không được thực hiện
Server thất bại với việc thực hiện một yêu cầu nhìn như có vẻ khả
5xx Lỗi Server
thi.
23
❖ HTTP status codes: Mã trạng thái HTTP được server phản hồi lại mỗi khi nhận được
HTTP Request
Mã Mô tả
100 : Người truy cập cần tiếp tục với yêu cầu truy cập.
(Continue)
101 : Khách truy cập đã yêu cầu máy chủ chuyển đổi giao thức truy cập và máy
(Switching chủ phản hồi rằng đã nhận được yêu cầu và xác nhận chuyển đổi giao thức
protocols) truy cập.
200 : Các máy chủ xử lý yêu cầu thành công.
(Successful)
202 : Thông báo rằng nó đã nhận được phần đầu của một yêu cầu truy cập và
(Accepted) đang chờ đợi nhận được phần còn lại.
204 : Các máy chủ xử lý yêu cầu thành công, nhưng không phản hồi bất kỳ nội
(No content) dung gì tới người dùng.
24
❖ HTTP status codes:

 3xx (truy cập bị chuyển hướng)
 4xx (Phát sinh lỗi trong yêu cầu truy cập)
Mã Mô tả
301
(Moved permanently) Các trang web yêu cầu đã bị di chuyển vĩnh viễn tới URL mới
302
(Moved temporarily) Trang được yêu cầu đã di chuyển tạm thời tới một URL mới
304 Các trang yêu cầu đã không được sửa đổi kể từ khi yêu cầu cuối
(Not modified)[ cùng. Khi máy chủ trả về phản hồi này, nó không trả lại các nội
dung của trang.
25

 4xx (Phát sinh lỗi trong yêu cầu truy cập)
Mã Mô tả
400 (Bad request) Máy chủ không hiểu được cú pháp của yêu cầu.
401 (Not authorized) (Không được uỷ quyền) Yêu cầu truy cập cần được chứng thực.
403 (Forbidden) Máy chủ từ chối các yêu cầu truy cập.
404 (Not found) Máy chủ không thể tìm thấy trang yêu cầu.
408 (Request timeout) Máy chủ đã hết thời gian để chờ nhận yêu cầu truy cập.
26

 5xx (Lỗi server)
Mã Mô tả
500 (Internal server error) Máy chủ đã gặp lỗi và không thể hoàn tất yêu cầu.
502 (Bad gateway) Nhận được phản hồi không hợp lệ.
Máy chủ hiện tại không thể thực hiện yêu cầu (vì bị quá tải
503 (Service unavailable)
hoặc đang phải bảo trì).
504 (Gateway timeout) Hết thời gian.
505 (HTTP version not Các máy chủ không hỗ trợ phiên bản giao thức HTTP được
supported) sử dụng trong các yêu cầu.
27
❖ URL (Uniform Resource Locator)

 URL là định danh duy nhất cho các tài nguyên Internet
 Chỉ ra:
o Cách truy cập
o Vị trí tài nguyên

 Mỗi URL trỏ đến một tài nguyên duy nhất.
o Các tài nguyên đó có thể là trang HTML, tài liệu CSS, hình ảnh, ...
 URL có thể trỏ đến tài nguyên không còn tồn tại hoặc đã chuyển đi.
 Ví dụ về các URL:
o https://developer.mozilla.org
o https://developer.mozilla.org/en-US/docs/Learn/
o https://developer.mozilla.org/en-US/search?q=URL
 Scheme
o Scheme cho biết giao thức mà trình duyệt phải sử dụng để yêu cầu tài nguyên.
o Thông thường đối với các trang web, giao thức là HTTPS hoặc HTTP.
❖ Một đường dẫn Web bao gồm các thành phần
 Authority: bao gồm miền và cổng

o Miền xác định Webserver nào sẽ sử dụng để giải quyết các yêu cầu. Miền có thể xác định bởi tên
như www.example.com hoặc địa chỉ IP như 102.39.23.201
o Với việc sử dụng cổng, Server có thể phân tán các yêu cầu đến nhiều dịch vụ hoạt động trên
Server.
o VD: dịch vụ Web với giao thức HTTP sử dụng cổng 80, giao thức HTTPS sử dụng cổng 443
 Path to resource
o là đường dẫn đến tài nguyên trên Máy chủ Web.

o Trong thời kỳ đầu path thường gắn liền với đường dẫn vật lý trên máy chủ (thư mục),
tuy nhiên ngày này điều này không còn đúng nữa.
 Parameters
o Phần Parameters là các tham số được gửi tới Máy chủ.
o Các Parameters là một danh sách các cặp khóa/giá trị.
o Các Parameters thường được sử dụng như dữ liệu gửi kèm tới Server để yêu
cầu Server thực hiện các công việc khác nhau với dữ liệu được gửi đến.
 Anchor
o Anchor đi kèm với dấu # hay còn gọi là hash.
o Một anchor như một bookmark đánh dấu một thành phần trên tài liệu HTML
giúp người dùng dễ dàng hơn trong việc điều hướng khi xem trang Web.
❖ Hoạt động của một website

 (ví dụ xem như website được cài đặt trên một máy chủ riêng)
171.244.50.30 171.244.50.30
neu.edu.vn
http://neu.edu.vn
❖ Hoạt động của một website
Máy chủ web

Hệ thống phản hồi một
DNS trả kết tập hợp các Trình duyệt
Người dùng quả phân tích Trình duyệt sẽ file bao gồm “dịch” các file
nhập vào Trình duyệt tên miền tìm đến địa HTML, CSS , mà máy chủ
thanh địa chỉ gửi yêu cầu trong đường chỉ IP đã nhận các tập tin đa đã gửi thành
của trình đến máy chủ dẫn đã gửi (máy chủ phương tiện trang web mà
duyệt: https: DNS là neu.edu.vn chứa nội dung khác như âm người dùng
//neu.edu.vn , có địa chỉ website) thanh, hình nhìn thấy trên
máy chủ là ảnh (nếu có) màn hình
171.244.50.30 cho trình
duyệt
❖ Website được chia làm 2 loại Website tĩnh (Static) và Website động
(Dynamic).
❖ Website được chia làm 2 loại:

❖ Website tĩnh (Static) và Website động (Dynamic)

 Giống nhau: Đều được xây dựng bởi HTML5, CSS3 và Javascript
 Khác nhau:
Website động Website tĩnh
▪ Không cho phép người dùng
▪ Có thêm ngôn ngữ lập trình Server như ASP.NET, tương tác với website, các thông
PHP,... và cơ sở dữ liệu SQL Server, MySQL,... tin cần thay đổi trên website cần
▪ Cho phép người dùng có thể tương tác với website can thiệp trực tiếp để sửa trên
▪ Dễ dàng bảo trì và nâng cấp website file HTML
▪ Chi phí thiết kế website cao ▪ Khó khăn trong việc bảo trì,
▪ Ứng dụng cao: Thiết kế website bán hàng, thiết kế nâng cấp
website bất động sản, thiết kế website doanh nghiệp ▪ Chi phí thiết kế website thấp
▪ Giao diện đẹp
❖ Website tĩnh (Static) và Website động (Dynamic)

❖ Xem mã nguồn Web:

 Khi Web được trả về trên Server, có thể
xem mã nguồn bằng cách chọn Xem mã
nguồn bằng trình duyệt:
o Xem mã nguồn HTML bằng cách bấm
chuột phải và chọn View page Source
o Xem mã nguồn CSS và Javascript bằng
cách bấm vào file CSS và Javascript
tương ứng
❖ Click chuột lên trang web → Inspect

 Network: thể hiện các yêu cầu ra/yêu cầu vào của website
CÁC BƯỚC ĐỂ XÂY DỰNG MỘT WEBSITE
1. Xác
định yêu 3. Thiết 5. Đưa
cầu Web kế vào hoạt
site Website động
2. Mua 4. Thuê 6. Duy trì

tên miền chỗ thông tin,
hosting bảo dưỡng
website
CHƯƠNG I – CĂN BẢN LẬP TRÌNH PYTHON

1.2. THIẾT KẾ WEB TĨNH
❖ Trang web tĩnh về cơ bản được định

nghĩa là một trang web sử dụng hoàn
toàn ngôn ngữ chính là HTML
❖ Sau khi tải trang HTML từ máy chủ
xuống, trình duyệt sẽ biên dịch mã
và hiển thị nội dung trang web, →
người dùng hầu như sẽ không thể
tương tác với trang web được.
❖ Ví dụ về một trang Web tĩnh:
1.2. THIẾT KẾ WEB TĨNH
❖ Một trang Web tĩnh được xử lý như sau:
Người dùng gửi các

Trình duyệt kết xuất
HTTP Request bằng Server gửi trả lại
và hiển thị nội dung
trình duyệt thông một trang HTML
trang HTML
qua giao thức HTTP

1.3. LẬP TRÌNH WEB ĐỘNG
❖ Web động:
 Được tạo bởi một Chương trình (Program) hoặc Kịch bản (Script) trên Máy
chủ Web.
 Chương trình hoặc kịch bản được vận hành bởi một Máy chủ ứng dụng.
 Dữ liệu có thể được cung cấp bởi một Máy chủ dữ liệu.
1.3. LẬP TRÌNH WEB ĐỘNG
❖ Ví dụ về một trang Web động


1.4. HTML, CSS, JAVASCRIPT
❖ HTML, CSS, Javascript có vai trò lớn trong thiết kế Web:

 HTML (Hypertext Markup Language): Xây dựng cấu trúc cơ bản cho website và
định dạng các siêu văn bản
 CSS (Cascading Style Sheets): Biến đổi các định dạng HTML từ thô thành một
website có màu sắc, ảnh nền và tinh tế, hấp dẫn hơn
 JavaScript: Tạo ra các sự kiện tương tác với hành vi của người dùng (tạo ra các
hiệu ứng khi Click, di chuột,...)
❖ HTML, CSS, Javascript có vai trò lớn trong thiết kế Web:

❖ HTML
 Siêu văn bản (Hypertext) là văn bản chứa các liên kết đến các văn bản khác
❖ HTML
 Hypermedia chỉ là một phần mở rộng của Hypertext
❖ HTML
❖ HTML
 Ngôn ngữ → nó có cú pháp riêng, nghĩa là có cách viết code đúng và sai
1.4.1. HTML
❖ Một tài liệu HTML bao gồm các thẻ nhằm định nội dung và cấu trúc của
Website:
 Tất cả các tài liệu HTML đều bắt đầu bằng khai báo DOCTYPE
 Toàn bộ tài liệu HTML khai báo các thẻ nằm bên trong thẻ mở <html> và thẻ đóng
</html>
 Một tài liệu html cơ bản có phần head và body:
o head chứa các thông tin về tài liệu
o phần body chứa những nội dung sẽ hiển thị.
 Mỗi thẻ trong tài liệu tạo ra một phần tử HTML (Element).
 Mỗi một phần tử HTML có thể có các thuộc tính để định danh và xác định nó được
hiển thị hoặc có hành vi như nào.
1.4.1. HTML
❖ HTML được phát triển từ năm 1993 đã trải qua nhiều phiên bản:
 HTML 1.0 (1993):chưa bao giờ trở thành một chuẩn
 HTML 2.0: Phát triển và sử dụng từ năm 1995 đến 1996, còn được gọi là chuẩn RFC 1866.
o Gồm các đặc tính chính (core) như các thẻ html, head, body, p, h1..h6, ul, li, ...
 HTML 3.2: Được công bố năm 1996, Chuẩn HTML 3.2 đưa các thêm các đặc tính mới như css,
script, table, applets, ...
 HTML 4.0: được công bố năm 1997 hỗ trợ một cách đầy đủ hơn dữ liệu đa phương tiện, các
ngôn ngữ kịch bản, và các phiên bản CSS 2, CSS3.
 XHTML 1.0: Phiên bản được công bố năm 2000 đã cải tổ HTML 4 sử dụng cú pháp XML, giúp
cho việc đọc, và phân tích cú pháp tài liệu HTML được dễ dàng hơn
 XHTML 1.1: Phiên bản mới của XHTML được công bố năm 2001 bổ sung thêm các yêu cầu
chặt chẽ hơn.
 HTML5: được phát triển từ 2008 kế thừa cả XHTML để tạo thành một chuẩn mới. HTML 5 bổ
sung thêm nhiều cú pháp và thẻ mới như <video>, <audio>, <canvas>, và tích hợp thêm đồ
họa vector. HTML5 vẫn tiếp tục được phát triển và có những chuẩn mới như HTML 5.1, HTML
5.2, HTML 5.3
1.4.1. HTML
❖ Ví dụ về một tài liệu HTML

1.4.2. CSS
❖ CSS được ra đời từ năm 1996, có 3 phiên bản CSS chính:

 CSS 1 ra đời vào tháng 12 năm 1996 cho phép định dạng font chữ màu sắc, căn lề,
trang trí viền, thiết lập khoảng cách ...
o Hiện nay CSS1 đã ko còn được bảo trì bởi W3C
 CSS 2 ra đời vào tháng 5 năm 1998, kế thừa nhiều định dạng từ CSS1 đồng thời bổ
sung việc thiết lập vị trí.
o CSS2 cũng có phiên bản CSS 2.1 trong đó thay đổi, bổ sung một số nội dung và sửa lỗi
cho CSS2
 CSS3 là phiên bản được phát triển từ năm 1999 song song cùng với CSS 2.
o CSS3 bổ sung nhiều định dạng mới như bo tròn góc, đổ bóng, chuyển động, cũng như
các khai báo để cấu hình bố cục như flexbox hay grid layout
1.4.2. CSS
❖ Mỗi phiên bản CSS có bổ sung

hoặc bỏ đi các khai báo thuộc
tính khác nhau.
❖ Các phiên bản trình duyệt cũng
hỗ trợ việc sử dụng các thuộc
tính này
❖ Bảng đầy đủ về hỗ trợ các thuộc
tính CSS của các trình duyệt
https://www.w3schools.com/cssref/css
3_browsersupport.asp
1.4.2. CSS
❖ Ví dụ một tài liệu CSS được lưu

trữ trong file test.css:
1.4.2. CSS
❖ Ví dụ đưa tệp định

dạng css vào tài
liệu html:
1.4.2. CSS
❖ Tài liệu HTML sau khi áp dụng CSS:

1.4.3. JAVASCRIPT
❖ JavaScript và CSS là các thành

phần không thể thiếu khi phát
triển Website.
❖ Khi trang HTML trả về có cần tới
các file CSS và Javascript. Trình
duyệt sẽ tự động gửi yêu cầu
❖ Javascript được sử dụng để người
sử dụng tương tác với Web trên
trình duyệt.

1.5. CÁC VẤN ĐỀ KHI THIẾT KẾ WEB
❖ Khi xây dựng Website, có 5 yếu tố cần quan tâm đặc biệt bao gồm:
1. Người dùng và tính khả dụng
2. Khả năng tương thích trên nhiều trình duyệt
3. Khả năng tiếp cận mọi đối tượng người dùng
4. Tối ưu hóa công cụ tìm kiếm
5. Thiết kế Web đáp ứng
❖ Người dùng và tính khả dụng

 Trước khi thiết kế một trang web, cần phải suy nghĩ:
o Người dùng của web là ai?
o Họ sẽ mong đợi điều gì khi truy cập vào website?
 Người dùng là người sẽ quyết định sự thành công của trang Web.
 Trang Web cần được thiết kế dễ sử dụng để người dùng có được cái họ cần ngay
trong những lần vào đầu tiên.
❖ Người dùng và tính khả dụng

 Có một bộ các nguyên tắc khi thiết kế Website mà mọi nhà phát triển cần phải
tuân theo.
 Trong đó các nguyên tắc thiết kế cơ bản bao gồm:
o Trình bày càng nhiều thông tin quan trọng càng tốt ''trong màn hình đầu tiên'' để
người dung ít phải cuộn hơn.
o Nhóm các mục liên quan và giới hạn số lượng nhóm trên mỗi trang.
o Luôn có tiêu đề xác định nội dung trang web và cung cấp thanh điều hướng và liên kết
đến các tiện ích.
o Sử dụng các quy ước điều hướng (bấm vào logo trên cùng để quay về trang chủ,
bấm vào biểu tượng giỏ hàng để tới trang vật phẩm đang mua,...)
❖ Khả năng tương thích trên nhiều trình duyệt

 Thị phần trình duyệt 11/2021 (thống kê của Stat Counter)
https://gs.statcounter.com/
❖ Khả năng tương thích trên trình duyệt

nhiều trình duyệt khác nhau
 Để đảm bảo Website tương thích trên

nhiều trình duyệt, cần kiểm tra:
phiên bản
Website
hệ điều hệ điều
hoạt động
hành, trình hành khác
trên nhiều
duyệt khác khau
…
nhau
 Nhiều công cụ để hỗ trợ kiểm tra

o https://auth.comparium.app/ thiết bị
khác nhau
❖ Khả năng tiếp cận mọi đối tượng người dùng

 Tiếp cận tới mọi đối tượng người dùng bao gồm cả những người khuyết tật:
o Những người có vấn đề về thị lực
o Những người có vấn đề về thính lực
o Những người có vấn đề về vận động
o Những người có vấn đề về trí nhớ, nhận thức
o Những người sử dụng những thiết bị đặc biệt để truy cập
❖ Tối ưu hóa công cụ tìm kiếm

 Các công cụ tìm kiếm phổ biến hiện nay
o Google
o Bing
o Yahoo
❖ Thiết kế Web đáp ứng

 Các Website cần được thiết kế đáp ứng do người dùng ngày nay sử dụng nhiều
các thiết bị khác nhau để truy cập vào Web:
❖ Thiết kế Web đáp ứng

 Các Website cần được thiết kế đáp ứng do người dùng ngày nay sử dụng nhiều
các thiết bị khác nhau để truy cập vào Web:
o Quá ½ dân số trên thế giới đã sở hữu điện thoại thông minh
o Trên ⅓ khách hàng sử dụng điện thoại thông minh
o 60% truy cập mạng là từ thiết bị di động
o 80% người dùng điện thoại thông minh truy cập các web mua sắm trên thiết bị di
động của ít nhất một lần một tháng.
o 40% người dùng sẽ rời website và chuyển đến một trang web khác nếu như thiết kế
của website không hiển thị hợp lý trên thiết bị của họ
o Các trang Web tìm kiếm như Google ưu tiên kết quả cho các Website có thiết kế tốt.

1.6. CÔNG CỤ PHÁT TRIỂN WEB
❖ Công cụ thiết kế Web

❖ Công cụ lập trình Web

 Bộ công cụ của Adobe: Adobe cung cấp bộ công cụ để thiết kế Web một cách
trực quan bao gồm:
o Adobe Dreamweaver
o Adobe Photoshop
o Adobe Illustrator

 Figma.com
o Figma là công cụ trực tuyến khá thông dụng để thiết kế giao diện Website.
o Figma lưu các thiết kế dưới dạng dữ liệu vector.
o Nó hỗ trợ làm việc nhóm theo thời gian thực, với việc lưu trữ nhiều phiên bản giúp việc
hồi tác được dễ dàng.
o Ngoài ra Figma cũng có kho Plugin với nhiều Plugin hữu dụng.

 Visual Studio Code
o Visual Studio Code (VSC) là một công cụ được phát triển bởi Microsoft,
o Tải VSC miễn phí tại: https://code.visualstudio.com
o VSC hỗ trợ xây dựng Website với nhiều ngôn ngữ lập trình và công nghệ khác nhau.
o VSC cũng có nhiều các Plugin hỗ trợ.

 Sublime Text
o Sublime Text là một công cụ biên tập nhẹ, cài đặt và sử dụng dễ dàng.
o Hoạt động tốt trên nhiều nền tảng MAC OSX, Linux, và Windows.
o Tải tại https://www.sublimetext.com/

 JetBrains
o Jetbrain là một công ty nổi tiếng với các phần mềm, công cụ lập trình và phát
triển.
o Các công cụ của JetBrains chuyên nghiệp, dễ sử dụng, có khả năng kiểm tra tự
động và sửa lỗi. JetBrains cung cấp nhiều công cụ hỗ trợ phát triển ứng dụng từ
nhiều nền tảng khác nhau, và các công cụ này đều có thể được sử dụng để phát
triển Web.
o JetBrains cung cấp việc sử dụng miễn phí cho Giáo viên, học sinh và sinh viên
(những người sử hữu email tên miền edu)

 Bên cạnh các bộ IDE được cài đặt, để học tập thực hành hoặc phát triển
các trang Web đơn giản cũng có thể sử dụng các công cụ trực tuyến
như:
o CodePen
o Codesandbox
o jsFiddle

 CodePen.io
o CodePen là một môi trường để học
tập trình Web hoàn toàn trực tuyến,
o Có thể thử nghiệm hoặc chia sẻ
những đoạn mã nguồn một cách dễ
dàng.

 CodeSandbox.io
o CodeSandbox là một trình biên tập
trực tuyến để phát triển nhanh Web.
o CodeSandbox hoạt động tương tự như
các IDE được cài đặt trên máy tính.
o Hỗ trợ các nhiều framework phổ biến:
• React
• Vue
• Angular
• Node HTTP Server
• ….

 jsFiddle.net
o Một số các đặc tính chính của jsFiddle:
• Hỗ trợ làm việc trực tuyến và dễ dàng chia sẻ, làm việc cộng tác
• Hỗ trợ phiên bản cho phép quay trở lại phiên bản trước đó một cách dễ dàng
• Có sẵn các thư viện thông dụng nhu jQuery, AngularJS
• Hỗ trợ nhắc lệnh tăng tốc độ lập trình, giảm thiểu sai sót.

 jsFiddle.net
CÀI ĐẶT CÔNG CỤ
❖ Visual studio code + Live server extension

❖ Chrome page ruler Redux extension
LÀM QUEN VỚI DEV TOOLS
❖ Browser DEV Tools: các công cụ phát triển website trên trình duyệt.
❖ Chuột phải website → chọn Inspect
 Elements
 Styles
 Select element
 Toggle device toolbar
THỰC HÀNH
❖ Hãy xem mã nguồn của trang web: https://neu.edu.vn và cho biết:

 Trang Web sử dụng bao nhiêu file css
 Trang Web sử dụng bao nhiêu file js

1. Chuong 1-Tổng quan về thiết kế Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1. Chuong 1-Tổng quan về thiết kế Web

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC KINH TẾ QUỐC DÂN

VIỆN CÔNG NGHỆ THÔNG TIN VÀ KINH TẾ SỐ

1.1. Ứng dụng Web

1.2. Thiết kế Web tĩnh

1.3. Lập trình Web động

1.4. HTML, CSS, Javascript

1.5. Các vấn đề khi thiết kế Web

1.6. Công cụ phát triển Web

1.1. Ứng dụng Web

1.2. Thiết kế Web tĩnh

1.3. Lập trình Web động

1.4. HTML, CSS, Javascript

1.5. Các vấn đề khi thiết kế Web

1.6. Công cụ phát triển Web

❖ Địa chỉ IP (IP Address)

 IPv4 sử dụng 32 bit, có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255).

❖ Tên miền (Domain name)

❖ Cổng dịch vụ (Service Port)

❖ Web (World Wide Web hay www)

❖ Kiến trúc Client-Server

❖ Kiến trúc ứng dụng Web:

❖ Trình duyệt Web (Web Browser)

 Hỗ trợ nhiều giao thức

❖ Trình duyệt Web (Web Browser)

❖ Web Server (máy phục vụ Web):

❖ Giao thức HTTP - (HyperText Transfer Protocol)

❖ HTTP Request: Các phương thức HTTP

❖ HTTP status codes:

❖ HTTP status codes:

❖ HTTP status codes:

504 (Gateway timeout) Hết thời gian.

❖ URL (Uniform Resource Locator)

❖ URL (Uniform Resource Locator)

❖ URL (Uniform Resource Locator)

❖ Một đường dẫn Web bao gồm các thành phần

 Authority: bao gồm miền và cổng

❖ Một đường dẫn Web bao gồm các thành phần

o là đường dẫn đến tài nguyên trên Máy chủ Web.

❖ Một đường dẫn Web bao gồm các thành phần

❖ Một đường dẫn Web bao gồm các thành phần

❖ Hoạt động của một website

❖ Hoạt động của một website

Máy chủ web

❖ Website được chia làm 2 loại:

❖ Website tĩnh (Static) và Website động (Dynamic)

❖ Website tĩnh (Static) và Website động (Dynamic)

❖ Xem mã nguồn Web:

❖ Click chuột lên trang web → Inspect

2. Mua 4. Thuê 6. Duy trì

1.1. Ứng dụng Web

1.2. Thiết kế Web tĩnh

1.3. Lập trình Web động

1.4. HTML, CSS, Javascript

1.5. Các vấn đề khi thiết kế Web

1.6. Công cụ phát triển Web

❖ Trang web tĩnh về cơ bản được định

❖ Một trang Web tĩnh được xử lý như sau:

Người dùng gửi các

1.1. Ứng dụng Web

1.2. Thiết kế Web tĩnh

1.3. Lập trình Web động

1.4. HTML, CSS, Javascript

1.5. Các vấn đề khi thiết kế Web

1.6. Công cụ phát triển Web