NỘI DUNG HỌC PHẦN THIẾT KẾ TRANG WEB

Thiết kế web là học phần thuộc khối kiến thức giáo dục chuyên nghiệp trong chương trình đào tạo trình độ đại học ngành khoa học thư viện, học phần trang bị cho sinh viên những kiến thức cơ bản về công nghệ web, nguyên lý hoạt động của ngôn ngữ web, thiết kế cấu trúc của 01 website trong hoạt động thông tin – thư viện. Ph

1

TRƯỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI

KHOA VĂN HÓA, THÔNG TIN VÀ XÃ HỘI

NỘI DUNG HỌC PHẦN

THIẾT KẾ TRANG WEB

Giảng viên: Phạm Quang Quyền

Hà Nội, 8-2014

2

BỘ NỘI VỤ

TRƯỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

CHƯƠNG TRÌNH GIÁO DỤC ĐẠI HỌC

NGÀNH ĐÀO TẠO: KHOA HỌC THƯ VIỆN

ĐỀ CƯƠNG CHI TIẾT HỌC PHẦN

1 Tên học phần: THIẾT KẾ TRANG WEB

2 Mã học phần:

3 Số đơn vị học trình: 3 (45 tiết)

4 Bộ môn phụ trách giảng dạy: Tổ bộ môn thư viện/Khoa Văn hóa, Thông tin &

Xã hội

5 Trình độ: Sinh viên năm thứ 2

6 Phân bổ thời gian:

- Lý thuyết : 20 tiết

- Thực hành, bài tập : 23 tiết

- Kiểm tra : 02 tiết

7 Điều kiện tiên quyết : Tin học cơ bản

8 Mô tả học phần:

Thiết kế web là học phần thuộc khối kiến thức giáo dục chuyên nghiệp trong chương trình đào tạo trình độ đại học ngành khoa học thư viện, học phần trang bị cho sinh viên những kiến thức cơ bản về công nghệ web, nguyên lý hoạt động của ngôn ngữ web, thiết kế cấu trúc của 01 website trong hoạt động thông tin – thư viện

Phân bổ thời lượng như sau:

TT Nội dung học phần

Phân bổ thời lượng (tiết) Tổng

số

Lý thuyết

Thực hành, Bài tập

1 Chương 1: Khái quát chung về

9 Mục tiêu của học phần:

- Kiến thức: Cung cấp cho sinh viên những kiến thức cơ bản về công nghệ

web : webserver, web browser, ngôn ngữ HTML,… Cung cấp kiến thức về mô hình website trong thư viện và công cụ để thiết kế website

- Kỹ năng:

3

Trang bị cho sinh viên những kỹ năng cơ bản sau:

+ Thiết lập webserver + Thiết kế outline web + Xây dựng web tĩnh + Xây dựng web động + Quản trị (tạo lập, bảo trì, backup, ) cơ sở dữ liệu MySQL

- Thái độ: Sinh viên có nhận thức về vị trí, vai trò của môn học trong hoạt

động chuyên môn, có hiểu biết về ngôn ngữ web, công nghệ web để vận dụng thiết

kế vào website trong hoạt động thông tin – thư viện

10 Nhiệm vụ của sinh viên:

- Dự lớp;

- Làm bài tập ở nhà, trên lớp, thảo luận;

- Có tài liệu học tập;

- Dự kiểm tra;

- Dự thi kết thúc học phần

11 Tài liệu học tập:

1 Slide Bài giảng Thiết kế web tại website:http://thuviennoivu.no-ip.org

2 Tài liệu tham khảo:

[1] Sử dụng DHTML và CSS cho thiết kế web động - Nxb Lao Động Xã Hội

[2] Tự học HTML và XHTML - Nxb Thống Kê

[3] Hướng dẫn sử dụng Dreamweaver cho thiết kế web - Nxb Lao Động

Xã Hội

12 Phương pháp và nội dung đánh giá học phần:

- - Chuyên cần và thái độ học tập: đủ 80% thời lượng học trên lớp trở lên và

mức độ thể hiện bài tập thực hành và thảo luận theo nhóm (trọng số 10%)

- - Kiểm tra giữa học phần: 01 bài, trọng số 30%

- - Thi hết học phần: trọng số 60%

- 13 Thang điểm đánh giá: 10

- 14 Nội dung chi tiết học phần:

CHƯƠNG 1 KHÁI QUÁT CHUNG VỀ WEBSITE VÀ MẠNG MÁY TÍNH

(5 tiết lý thuyết) 1.1 Lịch sử phát triển công nghệ web

Ngày 6-8-1991, Tim Berners Lee công bố chương trình web Dự án “World Wide Web” được Tim giới thiệu tại newsgroup alt.hypertext

Ông cho biết dự án nhắm tới việc tạo ra các liên kết giữa các tài liệu bằng cách sử dụng “siêu văn bản” (hypertext) cùng với internet

4

Ngày 12-12-991: Máy chủ đầu tiên ngoài châu Âu online

Paul Kunz, một nhà khoa học thuộc trung tâm Stanford Linear Accelerator Center (SLAC), sau chuyến thăm phòng thí nghiệm Cern (nơi Berners Lee làm việc) quyết định lập một máy chủ cho Bắc Mỹ Đây là việc làm cần thiết để đưa web ra khắp thế giới Máy chủ của SLAC dùng các phần mềm do chính Berners Lee phát triển

Tháng 11-1992: Đã có 26 máy chủ web online

Ngày 22-4-1993: Trình duyệt Mosaic cho Windows ra đời

Mosaic là trình duyệt web đầu tiên chạy trên hệ điều hành Windows,

được phát triển tại Trung tâm quốc gia về ứng dụng siêu máy tính

(National Center for Supercomputing Applications) Hoa Kỳ Với trình

duyệt này, công chúng có thể tiếp cận web dễ dàng và thân thiện hơn

Ngày 30-4-1993: Cern công bố World Wide Web miễn phí cho tất cả mọi người

Tim Berners Lee đã thuyết phục được Cern “cho không” công nghệ web và các mã chương trình để mọi người đều có thể sử dụng và cùng tham gia phát triển Đây là một trong những nguyên nhân chủ yếu giúp cho web phát triển nhanh chóng và mạnh

mẽ

Tháng 5-1993: Viện công nghệ Massachusetts tung ra công nghệ mới, lần đầu tiên

đưa một tờ báo lên web

Tháng 6-1993: Ngôn ngữ HTML (Hypertext Mark Language) dùng trong lập trình

web được công bố

Tháng 11-1993: Webcam đầu tiên được kết nối, truyền hình ảnh một bình cà phê Tháng 2-1994: Tiền thân của Yahoo được đưa lên internet

Hai sinh viên đại học Stanford là David Filo và Jerry Yang là tác giả của “Hướng dẫn

về World Wide Web của Jerry”, sau này được đổi tên thành Yahoo

Tháng 4-1994: BBC mở website đầu tiên cho chương trình TV: The Net

Ngày 13-10-1994: Bill Clinton đưa Nhà Trắng lên web: whitehouse.gov

Ngày 25-10-1994: Quảng cáo trên banner lần đầu xuất hiện tại website của

ATT

Tháng 2-1995: Radio HK chính thức trở thành một đài phát thanh trực

tuyến “fulltime”

Ngày 1-7-1995: Hiệu sách trực tuyến Amazon khai trương

Được Jeff Bezos thành lập từ năm 1994 với tên ban đầu là Cadabra.com,

Amazon.com giờ đây là một trong những công ty bán hàng trực tuyến lớn nhất trên mạng Ít người biết rằng siêu thị khổng lồ trực tuyến này ban đầu chỉ là một hiệu sách

Tháng 8-1995: Đã có 18.957 website

Ngày 9-8-1995: “Bùng nổ tên miền com” Hàng loạt công ty trực tuyến chính thức

mở cửa website của mình

5

Ngày 24-8-1995: Microsoft Internet Explorer (IE) được phát hành và là

một phần trong Windows 95

Ngày 4-9-1995: eBay, website đấu giá trực tuyến đầu tiên được

thành lập Chủ nhân của sàn đấu giá trực tuyến này là Pierre Omidyar Món hàng đầu tiên được bán là một chiếc đèn chiếu laser hỏng

Ngày 15-12-1995: Alta Vista, công cụ tìm kiếm đa ngôn ngữ đầu tiên ra

mắt người sử dụng Internet

Ngày 4-7-1996: Hotmail khai trương đúng ngày quốc khánh Hoa Kỳ

Tháng 8-1996: Số website đạt 342.081

Tháng 5-1997: BBC News mở một website về cuộc bầu cử trong năm

Tháng 6-1997: Tên miền business.com được bán với giá 150.000USD (80.000 bảng) Ngày 17-12-1997: Jorn Barger đưa ra khái niệm weblog, sau này rút gọn thành blog Ngày 1-3-1998: Kozmo.com khai trương

Được thành lập bởi Joseph Park và Yong Kang, Kozmo.com quyên góp được 280 triệu USD, trong đó 60 triệu từ Amazon.com và tuyên bố sẽ chuyển phát miễn phí bất

kì thứ gì trong vòng 1g, từ DVD đến… cà phê Website này sập tiệm vào tháng

4-2001 khi “bong bóng com” … xì hơi

Tháng 9-1998: Gã khổng lồ Google mở cửa văn phòng đầu tiên của

mình tại một gara ở California

Ngày 19-10-1998: Open Diary, blog community đầu tiên ra đời

Tháng 5-1999: Shawn Fanning, một sinh viên ở Boston thành lập

Napster

Đây là chương trình P2P (peer to peer) đầu tiên được sử dụng rộng rãi, bắt đầu từ chương trình Fanning viết từ khi còn học trung học để chia sẻ file mp3 với bạn bè Napster ngay lập tức thu hút được đông đảo người dùng Internet và cả… các công ty kinh doanh âm nhạc, những người coi P2P là phạm pháp

Ngày 16-8-1999: Everquest trở thành game nhập vai trực tuyến nhiều người chơi

(MMORPG) đầu tiên

Ngày 19-8-1999: MySpace khai trương Đây là một trong những website đầu tiên về

lưu trữ trực tuyến Website này được thành lập bởi Tom Anderson, Chis DeWolfe và một nhóm lập trình viên Hiện nay MySpace có gần 100 triệu người sử dụng và có cả

hệ thống tin nhắn, blog âm nhạc, ảnh,…

Tháng 11-1999: Boo.com trở thành site đầu tiên kinh doanh thời trang

Ngày 10 -1-2000: AOL mua lại Time Warner, một trong những vụ sát nhập lớn nhất

trong lịch sử

Ngày 2-7-2000: Hacker đánh sập 8 website lớn trong đó có Yahoo, CNN và Amazon Tháng 8-2000: Đã có gần 20 triệu Website

6

Ngày 15-1-2001: Jimmy Wales sáng lập Bách khoa toàn thư trực tuyến

Wikipedia

Ngày 22-11-2001: Giáo hoàng John Paul II gửi bức thư điện tử đầu tiên

từ chiếc laptop trong phòng làm việc của ông

Ngày 11-12-2002: FBI bắt đầu đăng tin truy nã tội phạm trực tuyến

Ngày 28-4-2003: Apples đưa dịch vụ tải nhạc iTunes vào hoạt động

Tháng 5-2003: Lần đầu tiên “flash mob” (một nhóm người tụ tập để làm một điều gì

đó không bình thường) được tổ chức tại Manhattan

Ngày 27-1-2004: Amazon.com lần đầu tiên thu được lợi nhuận của năm

Ngày 5-2-2004: Bộ ngực Janet Jacksons trở thành hình ảnh được tìm kiếm nhiều nhất

trong lịch sử web

Trong giờ nghỉ giải lao giữa buổi diễn cùng Justin Timberlake tại Superbowl, ngôi sao nhạc pop này gặp một rắc rối với trang phục Các engine tìm kiếm sau đó cho biết

đã có một làn sóng tìm kiếm hình ảnh về sự kiện trên với các từ khóa như Janet

Jackson hay Super Bowl

Tháng 7-2004: Tim Berners Lee được phong tước hiệp

sĩ

Ngày 9-11-2004: Mozilla Firefox ra mắt công chúng

Tháng 2-2005: Website chia sẻ video youtube.com ra

đời

Tháng 10-2005: Thống kê cho thấy lượng website mới

trong năm 2005 nhiều hơn trong thời kì bùng nổ

dotcom 17 triệu site mới được thành lập

Ngày 12-4-2006: Google khai trương một dịch vụ thu hẹp ở Trung Quốc mang tên

Gu Ge

Năm 2006: Đã có…92.615.362 website

1.2 Cơ sở hạ tầng mạng máy tính

1.2.1 Phần cứng

- Máy chủ

- Máy trạm

- Các thiết bị mạng

1.2.2 Phần mềm

- Web server

- Quản trị webserver

- WebBrowser

1.3 Mô hình mạng máy tính

1.3.1 Một số mô hình vật lý của mạng

- Mạng hình sao

Tim Berners Lee được phong tước hiệp sĩ

7

- Mạng tuyến tính

- Mạng dạng vòng

1.3.2 Một số mô hình logic của mạng

- Mạng client/server

- Mạng ngang hàng (peer to peer)

1.3.3 Địa chỉ trong môi trường mạng

- Địa chỉ IP (LAN/WAN/loopback)

- Địa chỉ tên miền

1.4 Giới thiệu các dịch vụ cơ bản của mạng máy tính

1.4.1 Dịch vụ www

Là dịch vụ cơ bản, quan trọng nhất của mạng máy tính cho phép làm việc theo mô hình mạng để duyệt các dữ liệu kịch bản web 1.4.2 Dịch vụ FTP

Là dịch vụ sử dụng giao thức truyền tệp tin cho phép làm việc với

dữ liệu dung lượng lớn thông qua cổng 21

1.4.3 Dịch vụ Email

Dịch vụ cho phép thực hiện việc nhận và chuyển E-mail, sử dụng kết hợp 02 giao thức: SMTP (sử dụng cổng 25) và POP3(sử dụng cổng 110)

1.5 Những lưu ý khi thiết kế web

Tính cân bằng:

Đó là sự cân bằng về thị giác, về hình khối và về màu sắc Tính cân bằng đem lại

cảm giác về sự an toàn, tin tưởng Một website có được sự cân bằng tốt phải có

những hình khối vững chắc, các mảng sáng tối rõ ràng, là những khối thành phần với các hiệu ứng thị giác

Độ tương phản:

Đây là tiêu chí tiếp theo để đánh giá mức độ truyền cảm của một website tới người xem Vì bản thân website cũng là một dạng tài liệu nhằm cung cấp thông tin cho

người xem qua hệ thống thị giác

Và với hệ thống thị giác của con người vốn đã nhạy cảm thì với một website thiết kế tốtphải tạo cho người xem cảm giác tốt về độ tương phản Đó là sự tương phản giữa chữ với nền, giữa các khối với nền, và giữa các hình ảnh với nền background Độ tương phản giữa chữ và nền phải rõ ràng, vừa phải, các khối màu chắc khỏe

Dưới đây là 2 điều ta nên tránh khi thiết kế website:

* Quá tương phản: 2 mảng màu trắng - đỏ đặt cạnh nhau sẽ gây ức chế và nhức mắt khi nhìn lâu

* Kém tương phản: Đó là những gam màu có độ tương đồng như chữ màu vàng đặt trên nền trắng, chữ đỏ thẫm đặt trên nền đen

Điểm nhấn:

8

Điều này rất quan trọng, với một website được thiết kế đẹp thì điểm nhấn của websiteluôn là nơi được người thiết kế tính toán kỹ lưỡng Không thể đánh giá một website đẹpnếu nó cứ trơn tuồn tuột từ trên xuống dưới như một lá đơn được Vì

vậy trong hội họa thường dùng từ "truồi truội" để chỉ một tác phẩm không có điểm nhấn, không có sự thu hút, không có "eyes catching"

Không gian:

Một website đẹp mang đến cho người xem một cảm giác mới mẻ về không gian mà người xem có thể cảm nhận thấy rõ ràng nhất Đó có thể là một không gian nhiều ánh sáng, nhiều màu xanh của lá cỏ Hay một không gian trang trọng trong một nhà hát

Tất cả điều này có thể đã bị bỏ quên trong phần lớn các sản phẩm thiết kế web ở Việt Nam Đó là hệ quả của việc sử dụng màu sắc tùy tiện, gam màu tùy tiện và các mảng màu không có được giai điệu nhịp nhàng

Ai đó có thể vẽ được một hình mẫu đẹp, một chi tiết tinh xảo, nhưng nếu đặt vào trong một không gian không hợp lý thì tự nó sẽ chuốc lấy thất bại Giống như nền văn hóa Cồng chiêng của người dân tộc vùng Tây Nguyên vậy, chúng ta không thể thấy những cái cồng hay cái chiêng đẹp khi nó đặt trong một không gian bảo tàng hay một căn phòng sang trọng

Mà cái đẹp của nó chỉ có thể thấy và cảm nhận trong cái không gian mà nó vốn được sinh ra, là buôn làng, là trong nhà rông với không gian văn hóa Tây Nguyên

Tính thống nhất:

Đây là điều không thể bỏ qua khi đánh giá một website, sự thống nhất được đánh giá

ở các thành phẩn của website như font chữ, góc bo tròn, độ chuyển màu hay độ trong

suốt của một hình khối

Nếu để ý bạn có thể dễ dàng bắt gặp những lỗi tưởng như rất nhỏ này ở

các website được thiết kế cẩu thả, qua quýt hoặc người thiết kế không có được đủ

kinh nghiệm cần thiết để hiểu và kiểm soát tính thống nhất

Câu hỏi chương 1

1 Trình bày lịch sử phát triển của công nghệ web

2 Trình bày cơ sở hạ tầng mạng máy tính

3 Trình bày và phân tích mô hình vật lý của mạng máy tính

4 Trình bày và phân tích mô hình logic của mạng máy tính

5 Phân tích cấu trúc IP, IP – LAN, IP – WAN

6 Phân tích các dịch vụ mạng : www, ftp, email

7 Phân tích những chú ý khi thiết kế web

9

CHƯƠNG 2 CÔNG NGHỆ WEB VÀ NGÔN NGỮ HTML

(10 tiết, 05 tiết lý thuyết+05 tiết thực hành) 2.1 Giới thiệu hệ điều hành mạng Microsoft Windows

- Windows Server 2008

- Windows NT

2.2 Một số trình duyệt web cơ bản

2.2.1 Internet Explorer

2.2.2 Mozillar Firefox

2.2.3 Google Chrome

2.3 Giới thiệu webserver

2.3.1 Apache

Đây là chương trình webserver được sử dụng phổ biến nhất Cách sử dụng đơn giản nhất là dùng gói cài đặt XAMPP

XAMPP la mot ung dung de chay Webserver tren may tinh cua ban ma khong can phai mua hosting va domain

Co the coi day la mot chuong trinh giup ban thuc hanh ve phat trien Web phuc vu hoc tap va giai tri

XAMPP là viết tắt của X + Apache + Mysql + PHP + Perl

Chữ X là cross (platform ) ám chỉ dùng được cho cả 4 hệ điều hành khác nhau: Windows, Linux, Solaris và MAC

2.3.2 Nginx

Nginx (phát âm "engine x") là một chương trình server HTTP, một reverse proxy cũng như IMAP/POP3 proxy server miễn phí, mã nguồn mở, có hiệu năng cao Nginx được tác giả Igor Sysoev viết cho rambler.ru , trang web được truy cập nhiều thứ 2 trên nước Nga, đã chạy ổn định trong vòng hơn hai năm rưỡi Igor cung cấp mã nguồn dưới giấy phép kiểu BSD Hiện Nginx được sử dụng từ 1% đến 4% số lượng tên miền toàn thế giới (Nguồn 1, 2) Mặc dù còn ở giai đoạn Beta, Nginx được biết đến bởi sự ổn định cao, nhiều tính năng, cấu hình đơn giản và tiết kiệm tài nguyên

2.3.3 Wamp

WAMP là một từ viết tắt của "Windows, Apache, MySQL và PHP" Khi bạn tải

về WAMP cũng có nghĩa là bạn chỉ cần tải về một chương trình để cài đặt ba điều khác nhau WAMPs thuận tiện vì nó cho phép bạn tải về và cài đặt tất cả các gói bạn cần để lưu trữ nội dung web động Nếu không, bạn sẽ phải tải về ba gói riêng biệt

Nguồn bài viết: http://thegioitinhoc.vn/domain-hosting/215140-tao-host-website-rieng-cua-ban-tren-windows-wamp.html#ixzz35qyQlZiw

Link gốc: http://thegioitinhoc.vn

2.4 Phân loại website

Việc phân loại website không có mục đích quan trọng nào, chỉ đơn giản phân loại website để một mặt nào đó biết website này đang làm gì, đang cung cấp giá trị gì cho người dùng, bởi lẽ nếu không cung cấp được gì cho người dùng thì sớm muộn gì website cũng không thể tồn tại được

2.4.1 Theo mục đích sử dụng

Website cá nhân

10

- Thuơng mại điện tử (web bán hàng)

- Báo điện tử (báo online)

- Cổng thông tin (trường đại học)

- Mạng xã hội

- Trang tìm kiếm (Google)

- Blog

- Danh bạ

- Sàn giao dịch

- Dịch vụ trực tuyến (nhạc, phim, ảnh)

- Trang việc làm

- Diễn đàn

- Web đấu giá

2.4.2 Theo nội dung quản trị

Loại thứ nhất là “Phần mềm website” dành cho các hệ thống website sử dụng code

để thể hiện các chức năng mang tính “xử lý, tính toán…” ví dụ website chứng khoán, ngân hàng để xử lý dữ liệu hay các website TMĐT để ứng dụng tương tác dịch vụ, sản phẩm…

Đặc điểm của loại website này là thiên hướng về công nghệ bên trong nhân nhằm đem lại mức độ xử lý tốt nhất, nhanh nhất và chính xác nhất các yêu cầu tương tác của bên cung cấp dịch vụ và người dùng Loại này chiếm khoảng 10% nhu cầu website hiện nay và chi phí dành cho loại này thường cao nhất

Loại thứ hai là “Trang web trình diễn hoặc là trang web marketing – Kể cả Landing page hay Microsite” dành cho các chiến dịch tiếp thị, trình diễn sản phẩm hay các website chính thức của doanh nghiệp nhằm mục đích coi website là phương tiện online marketing để quảng bá hình ảnh thương hiệu công ty hay sản phẩm đối với người dùng internet

Đặc điểm của loại này là cần phải có thiết kế độc quyền, đẹp, nặng về trình diễn,

có thể thêm hiệu ứng đa phương tiện để đem lại hiệu quả hình ảnh ấn tượng nhất Những website này cần phải được thiết kế bởi những công ty thiết kế web uy tín vì website đó chính là bộ mặt doanh nghiệp hay hình ảnh thương hiệu Website loại này chiếm 80% nhu cầu thiết kế web hiện nay và chi phí cũng khá bình dân và chấp nhận được với hầu hết các doanh nghiệp

Loại thứ ba là “Web vệ tinh” dành cho doanh nghiệp đã có nhiều website chính và muốn phát triển các website vệ tinh khác nhằm phân khúc thị trường cho sản phẩm hay làm SEO cho các dịch vụ riêng biệt

Đặc điểm website này là đơn giản, tập trung vào các nội dung chính và cung cấp thông tin rõ ràng, code được tối ưu hóa tốt để dễ dàng làm SEO Website loại này có thể

sử dụng mã nguồn mở hay web mẫu có sẵn để giảm chi phí triển khai, tuy nhiên cũng cần phải được các chuyên gia về Seo tư vấn để chọn chiến lược tốt nhất Loại website này chiếm 10% nhu cầu hiện nay và chi phí cũng ở mức thấp nhất và thường gọi là web giá

rẻ