SlideShare une entreprise Scribd logo
1  sur  32
THIẾT KẾ WEBSITETHIẾT KẾ WEBSITE
ThS. Lương NguyênThS. Lương Nguyên
TÀI LIỆU THAM KHẢOTÀI LIỆU THAM KHẢO
Tự học thiết kế Website tập 1,2 - tác giả:
Lê Minh Hoàng – NXB Lao động.
Thủ thuật lập trình PHP – tác giả: Phạm
Mạnh Lâm – NXB Giao thông Vận tải.
 Ebook:
»www.thuvien-it.net
»http://w3schools.com
»http://thuvien.uit.edu.vn
»http://ptit.edu.vn/wps/portal/ilc
TỔNG QUANTỔNG QUAN
Một số khái niệm cơ bản
Phân loại trang web tĩnh/động
Một số bước chính trong phát triển website
Công bố website trên internet
Một số khái niệm cơ bảnMột số khái niệm cơ bản
Mạng, giao thứcMạ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.
– Internet: Thuật ngữ chỉ mạng
toàn cầ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Đị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
 IPv4: Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255)
 Ví dụ: 202.191.56.210 : địa chỉ máy chủ web
của Viện CNTT&TT, ĐHBK HN
 Đặ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 NameTê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ụ: soict.hut.edu.vn gắn với
202.191.56.210 trong đó:
– vn: Nước Việt Nam (Cấp 1)
– edu: Tổ chức giáo dục (Cấp 2)
– hut: Tên cơ quan (Cấp 3)
– soict: đơ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ủ Web, Phần mềm dịch vụ WebMáy chủ Web, Phần mềm dịch vụ Web
(Web Server)(Web Server)
 Máy tính chứa nội dung website trên
mạng, là nơi xử lý dữ liệu tập trung.
 Khi truy cập website sẽ truy cập vào
máy tính này để yêu cầu các nội dung.
 Cần cài phần mềm dịch vụ web: Web
Server.
 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
 Thực tế: các máy chủ có cấu hình cao,
khả năng hoạt động ổn định (24/24)
Máy khách (Client), Trình duyệt WebMáy khách (Client), Trình duyệt Web
 Máy khách:
– Máy khai thác dịch vụ của máy chủ (mô
hình client/server)
– Một máy tính có thể vừa là client vừa là
server.
 Trình duyệt (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),
• Safari , Google Chrome, …
Trang web, web site, World Wide WebTrang web, web site, World Wide Web
Trang web: Web page:
– Là một trang nội dung mà người truy cập vào
đầu tiên vào một website gọi là trang chủ.
– 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 web page được gắn kết với nhau
bởi các đường dẫn siêu liên kết, trong đó mỗi
web page là một tập tin html (xhtml).
World Wide Web (WWW): Tập hợp các
web site trên mạng internet.
Các Phòng
trong nhà
Quản gia
Khu đất
Địa chỉ
Khách
Website!Website!
Dựa vào mục đích sử dụng, một website
sẽ bao gồm hai thành phần chính là Front
end và Back end.
FRONT END: là phần giao diện phía ngoài nơi mọi
người có thể trông thấy khi gõ đúng địa chỉ của
website vào trình duyệt. Chứa một web page đặc
biệt là FrontPage hay còn gọi là trang chủ.
FrontPage này phải có giao diện đẹp, đa dạng
phong phú, thân thiện nhằm thu hút người xem.
Website!Website!
BACK END:
- Phần dành cho người quản trị website, để truy
cập vào phần back-end đòi hỏi phải truy cập đúng
đường dẫn và đăng nhập đúng với tài khoản quản
trị website.
- Quản trị các nội dung cho trang web, cấu hình
menu, quản lý người dùng, ngôn ngữ, …
- Giao diện và bố cục được thiết kế tương đối đơn
giản.
Phân loại trang webPhân loại trang web
Phân loại trang webPhân loại trang web
– Web tĩnh:
• Được thiết kế bằng HTML, không sử dụng các hệ quản trị
cơ sở dữ liệu.
• Truy cập nhanh, chi phí đầu tư tương đối thấp.
• Nội dung nhàm chán; khó tích hợp, nâng cấp và mở rộng
• Có thể tạo bằng các công cụ trực quan
– Web động:
• Sử dụng các hệ quản trị cơ sở dữ liệu và các ngôn ngữ
lập trình cấp cao.
• Nội dung luôn được cập nhật, tương tác mạnh đối với
người sử dụng.
• Tốc độ chậm hơn so với website tĩnh
• Thường phải viết nhiều mã lệnh
Hoạt động trang web HTMLHoạt động trang web HTML
WEB SERVER
-Đọc yêu cầu từ Browser
- Tìm trang web .htm trên server
-Gửi trang web đó trở lại cho
Browser (nếu tìm thấy) thông
qua mạng internet or intranet.
Requestion
http://domain/file.hmt
Trang
HTML
Hoạt động trang web PHP or ASPHoạt động trang web PHP or ASP
WEB SERVER
-Đọc yêu cầu từ Browser
- Tìm trang web .php trên server
-Thực hiện các đoạn mã PHP
trên trang web đó để sửa đổi
nội dung trang web.
-Gửi trả nội dung trở lại cho
Browser thông qua mạng
internet or intranet.Requestion
http://domain/file.php
Kết xuất
Sự khác nhau giữa trang web HTML andSự khác nhau giữa trang web HTML and
PHP or ASPPHP or ASP
Các trang HTML không thực hiện trên máy
chủ web server
Các trang .php hoặc .asp dược thực hiện các
đoạn mã trên máy chủ web server. do đó, nó
linh động và mềm dẻo hơn rất nhiều.
Một số bước chính trong phátMột số bước chính trong phát
triển websitetriển website
Các bướcCác bước
Tương tự xây dựng một phần mềm nói
chung.
– Đặc tả
– Phân tích
– Thiết kế
– Lập trình
– Kiểm thử
Một số điều cần chú ý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)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)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 InternetCông bố website trên Internet
Các điều kiện cần thiếtCá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 (Nơi chứa nội dung website)
– 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 websiteXâ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
• Trang hiệu ứng hình ảnh tốt
– 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ê…
Phân tíchPhâ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Đă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
HostingHosting
 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ì websiteDuy 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 websitePhá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á websiteQuả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.

Contenu connexe

Tendances

Bai thuyet trinh cntt
Bai thuyet trinh cntt Bai thuyet trinh cntt
Bai thuyet trinh cntt
Thao An
 

Tendances (18)

Chuong 1 tongquanve web&htm-lcanban
Chuong 1  tongquanve web&htm-lcanban Chuong 1  tongquanve web&htm-lcanban
Chuong 1 tongquanve web&htm-lcanban
 
Bai22 tiet1
Bai22 tiet1Bai22 tiet1
Bai22 tiet1
 
Tìm hiểu về Wordpress - Wordpress presentation
Tìm hiểu về Wordpress - Wordpress presentation Tìm hiểu về Wordpress - Wordpress presentation
Tìm hiểu về Wordpress - Wordpress presentation
 
Giới thiệu wordpress
Giới thiệu wordpressGiới thiệu wordpress
Giới thiệu wordpress
 
Slide4
Slide4Slide4
Slide4
 
Tìm nền tảng lập trình cho 5 năm tới
Tìm nền tảng lập trình cho 5 năm tớiTìm nền tảng lập trình cho 5 năm tới
Tìm nền tảng lập trình cho 5 năm tới
 
Arrowjs.io
Arrowjs.ioArrowjs.io
Arrowjs.io
 
Bài 7 - Web Services Asp.net
Bài 7 - Web Services Asp.netBài 7 - Web Services Asp.net
Bài 7 - Web Services Asp.net
 
Wordpress
WordpressWordpress
Wordpress
 
Chủ đề 9 wordpress - vũ mạnh cường
Chủ đề 9  wordpress - vũ mạnh cườngChủ đề 9  wordpress - vũ mạnh cường
Chủ đề 9 wordpress - vũ mạnh cường
 
[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu[ST] Tài liệu thiết kế website cho người mới bắt đầu
[ST] Tài liệu thiết kế website cho người mới bắt đầu
 
Hướng dẫn tạo website nhanh chóng bằng wordpress
Hướng dẫn tạo website nhanh chóng bằng wordpressHướng dẫn tạo website nhanh chóng bằng wordpress
Hướng dẫn tạo website nhanh chóng bằng wordpress
 
Wordress_copyright Võ Tâm Long
Wordress_copyright Võ Tâm LongWordress_copyright Võ Tâm Long
Wordress_copyright Võ Tâm Long
 
Slide7
Slide7Slide7
Slide7
 
Bài giảng thiết kế website - truongkinhtethucpham.com
Bài giảng thiết kế website - truongkinhtethucpham.comBài giảng thiết kế website - truongkinhtethucpham.com
Bài giảng thiết kế website - truongkinhtethucpham.com
 
Báo cáo athena
Báo cáo athenaBáo cáo athena
Báo cáo athena
 
Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bản
 
Bai thuyet trinh cntt
Bai thuyet trinh cntt Bai thuyet trinh cntt
Bai thuyet trinh cntt
 

En vedette (9)

Shubhrat mishra working with php 2
Shubhrat mishra working with php 2Shubhrat mishra working with php 2
Shubhrat mishra working with php 2
 
Hướng dẫn lập trình web với PHP - Ngày 2
Hướng dẫn lập trình web với PHP - Ngày 2Hướng dẫn lập trình web với PHP - Ngày 2
Hướng dẫn lập trình web với PHP - Ngày 2
 
Hướng dẫn lập trình web với PHP - Ngày 5
Hướng dẫn lập trình web với PHP - Ngày 5Hướng dẫn lập trình web với PHP - Ngày 5
Hướng dẫn lập trình web với PHP - Ngày 5
 
Watermarking in-imageprocessing
Watermarking in-imageprocessingWatermarking in-imageprocessing
Watermarking in-imageprocessing
 
Doctrine 2 - Not The Same Old Php Orm
Doctrine 2 - Not The Same Old Php OrmDoctrine 2 - Not The Same Old Php Orm
Doctrine 2 - Not The Same Old Php Orm
 
Php Ppt
Php PptPhp Ppt
Php Ppt
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
Slideshare Powerpoint presentation
Slideshare Powerpoint presentationSlideshare Powerpoint presentation
Slideshare Powerpoint presentation
 
Slideshare ppt
Slideshare pptSlideshare ppt
Slideshare ppt
 

Similaire à Tong quanthietkeweb

Alfresco hệ quản lý nội dung doanh nghiệp nguồn mở
Alfresco   hệ quản lý nội dung doanh nghiệp nguồn mởAlfresco   hệ quản lý nội dung doanh nghiệp nguồn mở
Alfresco hệ quản lý nội dung doanh nghiệp nguồn mở
Học Huỳnh Bá
 
Lecture 01ascaccacaWsacascascsacascascWW.pdf
Lecture 01ascaccacaWsacascascsacascascWW.pdfLecture 01ascaccacaWsacascascsacascascWW.pdf
Lecture 01ascaccacaWsacascascsacascascWW.pdf
Lê Thưởng
 
01a udpt tong quan internet, web
01a udpt   tong quan internet, web01a udpt   tong quan internet, web
01a udpt tong quan internet, web
Nguyen Son
 
Bai 22 ga tiet 1
Bai 22 ga tiet 1Bai 22 ga tiet 1
Bai 22 ga tiet 1
itpicachu
 
6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx
HQucMinh
 

Similaire à Tong quanthietkeweb (20)

Alfresco hệ quản lý nội dung doanh nghiệp nguồn mở
Alfresco   hệ quản lý nội dung doanh nghiệp nguồn mởAlfresco   hệ quản lý nội dung doanh nghiệp nguồn mở
Alfresco hệ quản lý nội dung doanh nghiệp nguồn mở
 
Lecture 01ascaccacaWsacascascsacascascWW.pdf
Lecture 01ascaccacaWsacascascsacascascWW.pdfLecture 01ascaccacaWsacascascsacascascWW.pdf
Lecture 01ascaccacaWsacascascsacascascWW.pdf
 
Lecture 01 - WWW.pdf
Lecture 01 - WWW.pdfLecture 01 - WWW.pdf
Lecture 01 - WWW.pdf
 
Baocaodoanhocphan vanquocthinh_11253321_ncth5b
Baocaodoanhocphan vanquocthinh_11253321_ncth5bBaocaodoanhocphan vanquocthinh_11253321_ncth5b
Baocaodoanhocphan vanquocthinh_11253321_ncth5b
 
Bao cao web cake php
Bao cao web cake phpBao cao web cake php
Bao cao web cake php
 
Chuong 1 tongquanve web&htm-lcanban
Chuong 1  tongquanve web&htm-lcanban Chuong 1  tongquanve web&htm-lcanban
Chuong 1 tongquanve web&htm-lcanban
 
03 udpt php
03 udpt   php03 udpt   php
03 udpt php
 
01a udpt tong quan internet, web
01a udpt   tong quan internet, web01a udpt   tong quan internet, web
01a udpt tong quan internet, web
 
07 web course 1 php co ban
07 web course   1 php co ban07 web course   1 php co ban
07 web course 1 php co ban
 
Các tính năng của eSoff
Các tính năng của eSoffCác tính năng của eSoff
Các tính năng của eSoff
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
Bai 22 ga tiet 1
Bai 22 ga tiet 1Bai 22 ga tiet 1
Bai 22 ga tiet 1
 
Tìm hiểu về website
Tìm hiểu về websiteTìm hiểu về website
Tìm hiểu về website
 
6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx6-Kiểm tra mạng, World wide web.pptx
6-Kiểm tra mạng, World wide web.pptx
 
Html coban
Html coban Html coban
Html coban
 
Php 01 modau
Php 01 modauPhp 01 modau
Php 01 modau
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
 
Tailieu.vncty.com thiet ke web dai hoc
Tailieu.vncty.com   thiet ke web dai hocTailieu.vncty.com   thiet ke web dai hoc
Tailieu.vncty.com thiet ke web dai hoc
 
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày VansChuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
Chuyên đề thực tập học phần Phần mềm mã nguồn mở: Website bán giày Vans
 
Giao trinh thiet ke web 1
Giao trinh thiet ke web 1Giao trinh thiet ke web 1
Giao trinh thiet ke web 1
 

Dernier

SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...
SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...
SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...
ChuThNgnFEFPLHN
 
26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf
26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf
26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf
ltbdieu
 
xemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdf
xemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdfxemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdf
xemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdf
Xem Số Mệnh
 
bài tập lớn môn kiến trúc máy tính và hệ điều hành
bài tập lớn môn kiến trúc máy tính và hệ điều hànhbài tập lớn môn kiến trúc máy tính và hệ điều hành
bài tập lớn môn kiến trúc máy tính và hệ điều hành
dangdinhkien2k4
 

Dernier (20)

Bài giảng môn Truyền thông đa phương tiện
Bài giảng môn Truyền thông đa phương tiệnBài giảng môn Truyền thông đa phương tiện
Bài giảng môn Truyền thông đa phương tiện
 
xemsomenh.com-Vòng Lộc Tồn - Vòng Bác Sĩ và Cách An Trong Vòng Lộc Tồn.pdf
xemsomenh.com-Vòng Lộc Tồn - Vòng Bác Sĩ và Cách An Trong Vòng Lộc Tồn.pdfxemsomenh.com-Vòng Lộc Tồn - Vòng Bác Sĩ và Cách An Trong Vòng Lộc Tồn.pdf
xemsomenh.com-Vòng Lộc Tồn - Vòng Bác Sĩ và Cách An Trong Vòng Lộc Tồn.pdf
 
Danh sách sinh viên tốt nghiệp Đại học - Cao đẳng Trường Đại học Phú Yên năm ...
Danh sách sinh viên tốt nghiệp Đại học - Cao đẳng Trường Đại học Phú Yên năm ...Danh sách sinh viên tốt nghiệp Đại học - Cao đẳng Trường Đại học Phú Yên năm ...
Danh sách sinh viên tốt nghiệp Đại học - Cao đẳng Trường Đại học Phú Yên năm ...
 
SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...
SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...
SD-05_Xây dựng website bán váy Lolita Alice - Phùng Thị Thúy Hiền PH 2 7 8 6 ...
 
20 ĐỀ DỰ ĐOÁN - PHÁT TRIỂN ĐỀ MINH HỌA BGD KỲ THI TỐT NGHIỆP THPT NĂM 2024 MÔ...
20 ĐỀ DỰ ĐOÁN - PHÁT TRIỂN ĐỀ MINH HỌA BGD KỲ THI TỐT NGHIỆP THPT NĂM 2024 MÔ...20 ĐỀ DỰ ĐOÁN - PHÁT TRIỂN ĐỀ MINH HỌA BGD KỲ THI TỐT NGHIỆP THPT NĂM 2024 MÔ...
20 ĐỀ DỰ ĐOÁN - PHÁT TRIỂN ĐỀ MINH HỌA BGD KỲ THI TỐT NGHIỆP THPT NĂM 2024 MÔ...
 
Kiến thức cơ bản về tư duy số - VTC Net Viet
Kiến thức cơ bản về tư duy số - VTC Net VietKiến thức cơ bản về tư duy số - VTC Net Viet
Kiến thức cơ bản về tư duy số - VTC Net Viet
 
Giáo trình xây dựng thực đơn. Ths Hoang Ngoc Hien.pdf
Giáo trình xây dựng thực đơn. Ths Hoang Ngoc Hien.pdfGiáo trình xây dựng thực đơn. Ths Hoang Ngoc Hien.pdf
Giáo trình xây dựng thực đơn. Ths Hoang Ngoc Hien.pdf
 
26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf
26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf
26 Truyện Ngắn Sơn Nam (Sơn Nam) thuviensach.vn.pdf
 
ĐỀ KIỂM TRA CUỐI KÌ 2 BIÊN SOẠN THEO ĐỊNH HƯỚNG ĐỀ BGD 2025 MÔN TOÁN 10 - CÁN...
ĐỀ KIỂM TRA CUỐI KÌ 2 BIÊN SOẠN THEO ĐỊNH HƯỚNG ĐỀ BGD 2025 MÔN TOÁN 10 - CÁN...ĐỀ KIỂM TRA CUỐI KÌ 2 BIÊN SOẠN THEO ĐỊNH HƯỚNG ĐỀ BGD 2025 MÔN TOÁN 10 - CÁN...
ĐỀ KIỂM TRA CUỐI KÌ 2 BIÊN SOẠN THEO ĐỊNH HƯỚNG ĐỀ BGD 2025 MÔN TOÁN 10 - CÁN...
 
Access: Chuong III Thiet ke truy van Query.ppt
Access: Chuong III Thiet ke truy van Query.pptAccess: Chuong III Thiet ke truy van Query.ppt
Access: Chuong III Thiet ke truy van Query.ppt
 
TUYỂN TẬP 50 ĐỀ LUYỆN THI TUYỂN SINH LỚP 10 THPT MÔN TOÁN NĂM 2024 CÓ LỜI GIẢ...
TUYỂN TẬP 50 ĐỀ LUYỆN THI TUYỂN SINH LỚP 10 THPT MÔN TOÁN NĂM 2024 CÓ LỜI GIẢ...TUYỂN TẬP 50 ĐỀ LUYỆN THI TUYỂN SINH LỚP 10 THPT MÔN TOÁN NĂM 2024 CÓ LỜI GIẢ...
TUYỂN TẬP 50 ĐỀ LUYỆN THI TUYỂN SINH LỚP 10 THPT MÔN TOÁN NĂM 2024 CÓ LỜI GIẢ...
 
xemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdf
xemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdfxemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdf
xemsomenh.com-Vòng Tràng Sinh - Cách An 12 Sao Và Ý Nghĩa Từng Sao.pdf
 
bài tập lớn môn kiến trúc máy tính và hệ điều hành
bài tập lớn môn kiến trúc máy tính và hệ điều hànhbài tập lớn môn kiến trúc máy tính và hệ điều hành
bài tập lớn môn kiến trúc máy tính và hệ điều hành
 
Giới Thiệu Về Kabala | Hành Trình Thấu Hiểu Bản Thân | Kabala.vn
Giới Thiệu Về Kabala | Hành Trình Thấu Hiểu Bản Thân | Kabala.vnGiới Thiệu Về Kabala | Hành Trình Thấu Hiểu Bản Thân | Kabala.vn
Giới Thiệu Về Kabala | Hành Trình Thấu Hiểu Bản Thân | Kabala.vn
 
60 CÂU HỎI ÔN TẬP LÝ LUẬN CHÍNH TRỊ NĂM 2024.docx
60 CÂU HỎI ÔN TẬP LÝ LUẬN CHÍNH TRỊ NĂM 2024.docx60 CÂU HỎI ÔN TẬP LÝ LUẬN CHÍNH TRỊ NĂM 2024.docx
60 CÂU HỎI ÔN TẬP LÝ LUẬN CHÍNH TRỊ NĂM 2024.docx
 
bài thi bảo vệ nền tảng tư tưởng của Đảng.docx
bài thi bảo vệ nền tảng tư tưởng của Đảng.docxbài thi bảo vệ nền tảng tư tưởng của Đảng.docx
bài thi bảo vệ nền tảng tư tưởng của Đảng.docx
 
Đề thi tin học HK2 lớp 3 Chân Trời Sáng Tạo
Đề thi tin học HK2 lớp 3 Chân Trời Sáng TạoĐề thi tin học HK2 lớp 3 Chân Trời Sáng Tạo
Đề thi tin học HK2 lớp 3 Chân Trời Sáng Tạo
 
30 ĐỀ PHÁT TRIỂN THEO CẤU TRÚC ĐỀ MINH HỌA BGD NGÀY 22-3-2024 KỲ THI TỐT NGHI...
30 ĐỀ PHÁT TRIỂN THEO CẤU TRÚC ĐỀ MINH HỌA BGD NGÀY 22-3-2024 KỲ THI TỐT NGHI...30 ĐỀ PHÁT TRIỂN THEO CẤU TRÚC ĐỀ MINH HỌA BGD NGÀY 22-3-2024 KỲ THI TỐT NGHI...
30 ĐỀ PHÁT TRIỂN THEO CẤU TRÚC ĐỀ MINH HỌA BGD NGÀY 22-3-2024 KỲ THI TỐT NGHI...
 
xemsomenh.com-Vòng Thái Tuế và Ý Nghĩa Các Sao Tại Cung Mệnh.pdf
xemsomenh.com-Vòng Thái Tuế và Ý Nghĩa Các Sao Tại Cung Mệnh.pdfxemsomenh.com-Vòng Thái Tuế và Ý Nghĩa Các Sao Tại Cung Mệnh.pdf
xemsomenh.com-Vòng Thái Tuế và Ý Nghĩa Các Sao Tại Cung Mệnh.pdf
 
các nội dung phòng chống xâm hại tình dục ở trẻ em
các nội dung phòng chống xâm hại tình dục ở trẻ emcác nội dung phòng chống xâm hại tình dục ở trẻ em
các nội dung phòng chống xâm hại tình dục ở trẻ em
 

Tong quanthietkeweb

  • 1. THIẾT KẾ WEBSITETHIẾT KẾ WEBSITE ThS. Lương NguyênThS. Lương Nguyên
  • 2. TÀI LIỆU THAM KHẢOTÀI LIỆU THAM KHẢO Tự học thiết kế Website tập 1,2 - tác giả: Lê Minh Hoàng – NXB Lao động. Thủ thuật lập trình PHP – tác giả: Phạm Mạnh Lâm – NXB Giao thông Vận tải.  Ebook: »www.thuvien-it.net »http://w3schools.com »http://thuvien.uit.edu.vn »http://ptit.edu.vn/wps/portal/ilc
  • 3. TỔNG QUANTỔNG QUAN Một số khái niệm cơ bản Phân loại trang web tĩnh/động Một số bước chính trong phát triển website Công bố website trên internet
  • 4. Một số khái niệm cơ bảnMột số khái niệm cơ bản
  • 5. Mạng, giao thứcMạ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. – Internet: Thuật ngữ chỉ mạng toàn cầ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,…
  • 6. Địa chỉ IP: IP AddressĐị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  IPv4: Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255)  Ví dụ: 202.191.56.210 : địa chỉ máy chủ web của Viện CNTT&TT, ĐHBK HN  Đặ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
  • 7. Tên miền: Domain NameTê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ụ: soict.hut.edu.vn gắn với 202.191.56.210 trong đó: – vn: Nước Việt Nam (Cấp 1) – edu: Tổ chức giáo dục (Cấp 2) – hut: Tên cơ quan (Cấp 3) – soict: đơn vị nhỏ trong cơ quan (Cấp 4)  Đặc biệt: Tên localhost được gắn với 127.0.0.1
  • 8. Máy chủ Web, Phần mềm dịch vụ WebMáy chủ Web, Phần mềm dịch vụ Web (Web Server)(Web Server)  Máy tính chứa nội dung website trên mạng, là nơi xử lý dữ liệu tập trung.  Khi truy cập website sẽ truy cập vào máy tính này để yêu cầu các nội dung.  Cần cài phần mềm dịch vụ web: Web Server.  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  Thực tế: các máy chủ có cấu hình cao, khả năng hoạt động ổn định (24/24)
  • 9. Máy khách (Client), Trình duyệt WebMáy khách (Client), Trình duyệt Web  Máy khách: – Máy khai thác dịch vụ của máy chủ (mô hình client/server) – Một máy tính có thể vừa là client vừa là server.  Trình duyệt (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), • Safari , Google Chrome, …
  • 10. Trang web, web site, World Wide WebTrang web, web site, World Wide Web Trang web: Web page: – Là một trang nội dung mà người truy cập vào đầu tiên vào một website gọi là trang chủ. – 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 web page được gắn kết với nhau bởi các đường dẫn siêu liên kết, trong đó mỗi web page là một tập tin html (xhtml). World Wide Web (WWW): Tập hợp các web site trên mạng internet.
  • 11. Các Phòng trong nhà Quản gia Khu đất Địa chỉ Khách
  • 12. Website!Website! Dựa vào mục đích sử dụng, một website sẽ bao gồm hai thành phần chính là Front end và Back end. FRONT END: là phần giao diện phía ngoài nơi mọi người có thể trông thấy khi gõ đúng địa chỉ của website vào trình duyệt. Chứa một web page đặc biệt là FrontPage hay còn gọi là trang chủ. FrontPage này phải có giao diện đẹp, đa dạng phong phú, thân thiện nhằm thu hút người xem.
  • 13. Website!Website! BACK END: - Phần dành cho người quản trị website, để truy cập vào phần back-end đòi hỏi phải truy cập đúng đường dẫn và đăng nhập đúng với tài khoản quản trị website. - Quản trị các nội dung cho trang web, cấu hình menu, quản lý người dùng, ngôn ngữ, … - Giao diện và bố cục được thiết kế tương đối đơn giản.
  • 14. Phân loại trang webPhân loại trang web
  • 15. Phân loại trang webPhân loại trang web – Web tĩnh: • Được thiết kế bằng HTML, không sử dụng các hệ quản trị cơ sở dữ liệu. • Truy cập nhanh, chi phí đầu tư tương đối thấp. • Nội dung nhàm chán; khó tích hợp, nâng cấp và mở rộng • Có thể tạo bằng các công cụ trực quan – Web động: • Sử dụng các hệ quản trị cơ sở dữ liệu và các ngôn ngữ lập trình cấp cao. • Nội dung luôn được cập nhật, tương tác mạnh đối với người sử dụng. • Tốc độ chậm hơn so với website tĩnh • Thường phải viết nhiều mã lệnh
  • 16. Hoạt động trang web HTMLHoạt động trang web HTML WEB SERVER -Đọc yêu cầu từ Browser - Tìm trang web .htm trên server -Gửi trang web đó trở lại cho Browser (nếu tìm thấy) thông qua mạng internet or intranet. Requestion http://domain/file.hmt Trang HTML
  • 17. Hoạt động trang web PHP or ASPHoạt động trang web PHP or ASP WEB SERVER -Đọc yêu cầu từ Browser - Tìm trang web .php trên server -Thực hiện các đoạn mã PHP trên trang web đó để sửa đổi nội dung trang web. -Gửi trả nội dung trở lại cho Browser thông qua mạng internet or intranet.Requestion http://domain/file.php Kết xuất
  • 18. Sự khác nhau giữa trang web HTML andSự khác nhau giữa trang web HTML and PHP or ASPPHP or ASP Các trang HTML không thực hiện trên máy chủ web server Các trang .php hoặc .asp dược thực hiện các đoạn mã trên máy chủ web server. do đó, nó linh động và mềm dẻo hơn rất nhiều.
  • 19. Một số bước chính trong phátMột số bước chính trong phát triển websitetriển website
  • 20. Các bướcCác bước Tương tự xây dựng một phần mềm nói chung. – Đặc tả – Phân tích – Thiết kế – Lập trình – Kiểm thử
  • 21. Một số điều cần chú ý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?
  • 22. Một số điều cần chú ý (tt)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 – …
  • 23. Một số điều cần chú ý (tt)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 – …
  • 24. Công bố website trên InternetCông bố website trên Internet
  • 25. Các điều kiện cần thiếtCá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 (Nơi chứa nội dung website) – 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
  • 26. Xây dựng websiteXâ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 • Trang hiệu ứng hình ảnh tốt – 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ê…
  • 27. Phân tíchPhâ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
  • 28. Đăng ký tên miềnĐă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
  • 29. HostingHosting  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…
  • 30. Duy trì websiteDuy 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
  • 31. Phát triển websitePhá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.
  • 32. Quảng bá websiteQuả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.