Thiết Kế Giao Diện Người Dùng) Bài Tập Lớn Thiết Kế Website.pdf

Như chúng ta đã biết thì mạng máy tính đang được phổ biến rộng khắp trên toàn thế giới, một số ứng dụng trên mạng máy tính đó là Internet và rất nhiều các dịch vụ không thể thiếu để phục

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚN HỌC PHẦN: (THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG) TÊN BÀI TẬP LỚN: THIẾT KẾ WEBSITE

Sinh viên thực hiện Khóa Lớp Mã sinh viên Lương Ngọc

Quảng

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚN HỌC PHẦN: (THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG)

Nhóm: 3 người TÊN (BÀI TẬP LỚN): THIẾT KẾ WEBSITE

ST

T

Sinh viên thực hiện Khóa Lớp Mã sinh

viên Điểm

1 Lương Ngọc Quảng (C) 11 CNTT5 20201403

CÁN BỘ CHẤM 1

(Ký và ghi rõ họ tên)

CÁN BỘ CHẤM 2

(Ký và ghi rõ họ tên)

MỤC LỤC

DANH MỤC CÁC TỪ VIẾT TẮT 5

I GIỚI THIỆU VỀ ĐỀ TÀI 6

1.1 Tên đề tài 6

1.2 Lý do chọn đề tài 6

1.4 Nội dung làm đề tài 6

1.4 Các công nghệ sử dụng 6

II CHUẨN BỊ DỰ ÁN 7

2.1 Lập kế hoạch dự án 7

2.2 Phân công công việc cho từng thành viên trong nhóm, điều phối công việc 7

III KHẢO SÁT XÁC ĐỊNH MỤC TIÊU, PHÂN TÍCH WEB 8

3.1 Mục tiêu chính 8

3.2 Khảo sát hiện trạng của một số trang web 8

3.3 Thiết kế 8

IV THIẾT KẾ TRANG WEB CHI TIẾT 12

4.1 Các kiến thức, nguyên lý thiết kế 12

4.2 Thiết kế chi tiết 12

Kết luận 19

Kết quả thu được 19

Hạn chế và hướng phát triển 19

Danh mục sách tham khảo 20

LỜI MỞ ĐẦU -

-Cùng với sự phát triển tiến bộ của đất nước chúng ta không thể không nói đến ngành siêu siêu hot ở thời điểm hiện tại đó là “ Công nghệ thông tin” Như chúng ta đã biết thì mạng máy tính đang được phổ biến rộng khắp trên toàn thế giới, một số ứng dụng trên mạng máy tính đó là Internet và rất nhiều các dịch vụ không thể thiếu để phục vụ cho cuộc sống nói chung và những người trong ngành công nghệ thông tin nói riêng, đi cùng với nó là có hàng ngàn trang wed được viết ra để phục vụ cho chúng ta ở nhiều lĩnh vực khác nhau và những thứ đó được viết ra từ đâu? Đúng vậy chúng đều được tạo lên từ (HTML – CSS ) Chúng ta muốn tìm tòi và học hỏi nhiều thứ chưa biết, chúng ta chỉ cần lên Internet gõ là ra hàng ngàn bài để chúng ta lựa chọn, nhưng để có được những trang wed đó đòi hỏi những người trong lĩnh vực công nghệ thông tin phải luôn tìm tòi ý tưởng, củng cố kiến thức, cần một trí óc logic để có thể tạo ra được những trang wed đó cho chúng ta tham khảo và học tập Đối với bản thân chúng em là sinh viên ngành công nghệ thông tin em sẽ luôn cố gắng học tập để không ngừng phát triển bản thân ngày càng hoàn thiện hơn, để giúp ích 1 phần nho nhỏ cho xã hội, để làm được điều đó không thể thiếu những thầy cô đã dạy, chỉ bảo cho chúng em Đặc biệt em xin cảm ơn thầy “ Hoàng Thanh Tùng ” đã truyền đạt cho em những kiến thức vô cùng hữu ích của môn thiết kế dao diện người dùng và bài tập lần này chúng em nói riêng và sinh viên lớp CNTT5 nói chung, chúng em sẽ cố gắng nỗ lực để có thể hoàn thành được bài tập một cách hoàn thiện nhất với khả năng của chúng em Chúng em xin cảm ơn!

DANH MỤC CÁC TỪ VIẾT TẮT (Nếu có)

(trình bầy trong trang riêng)

2

3

I GIỚI THIỆU VỀ ĐỀ TÀI 1.1 Tên đề tài.

Xây dựng trang web mới cho trường Đại học Công nghệ Đông Á

1.2 Lý do chọn đề tài.

Nhóm em chọn làm về đề tài này là vì bọn em muốn được thử sức mình, khả năng của bọn em có thể làm được đến đâu, liệu bọn em có thể hoàn thành được tốt hay không và trang wed trường khá là thú vị và mới mẻ để bọn em tìm tòi và cố gắng

1.4 Nội dung làm đề tài.

Nhóm em làm, chọn đề tài này dựa trên trang wed của trường và đều có mục tiêu chung

là muốn hướng đến các bạn sinh viên, tân sinh viên, các thầy cô giáo, cập nhật, cung cấp tin tức mới mẻ để mọi người có thể hiểu hơn về các thông tin bên nhà trường đề ra

1.4 Các công nghệ sử dụng.

Thiết trang web nhóm em sử dụng ngôn ngữ web HTML, CSS, Javascript với nền tảng app code trên Sublime Text

Cùng với đó là các tìm hiểu về bootstrap, phối màu

II CHUẨN BỊ DỰ ÁN 2.1 Lập kế hoạch dự án.

Sau khi nhóm tiến hành thảo luận và thống nhất xây dựng một trang web có tên là Đại học Công nghệ Đông Á để nhằm mục đích cập nhật thông tin hàng ngày cho sinh viên, giảng viên, học sinh tìm hiểu và truy cập vào thông tin trường, đồng thời lập ra kế hoạch như sau:

Khảo sát tình hình thực tế, tham khảo từ trang có sẵn từ các trường cũng như trang thông tin trường để lấy dữ liệu cần thiết

Nhóm thống nhất code bằng ngôn ngữ HTML sử dụng Bootstrap căn chỉnh CSS với một chút Javascript trên app Sublime Text Công cụ này hoàn toàn miễn phí có thể tìm kiếm

và download trên mạng Riêng về Bootstrap thì truy cập vào getbootstrap để xem các câu lệch cần thiết để tối ưu code tốt nhất

Công việc chính của dự án sau khi thu thập đầy đủ các dữ liệu cần thiết đó là: cài đặt Sublime Text, thiết kế giao diện, chạy thử trang web Các công việc này được tiến hành theo trình tự

2.2 Phân công công việc cho từng thành viên trong nhóm, điều phối công việc.

Lương Ngọc Quảng - Tìm kiếm tài liệu HTML(Bootstrap),

CSS, Javascript

- Code giao diện trang chủ, menu chính của trang web trường

- Tìm tài liệu về các trang web về giáo dục khác để lấy thêm ý tưởng

Vũ Minh Quân - Code phần giao diện của trang tin tức

của trường, tải tài nguyên hình ảnh

III KHẢO SÁT XÁC ĐỊNH MỤC TIÊU, PHÂN TÍCH WEB 3.1 Mục tiêu chính.

Xây dựng trang web

 Cập nhật các thông tin, tin tức hoạt động của trường Đại học Công nghệ Đông Á

 Giới thiệu một cách tổng quan về trường Đại học Công nghệ Đông Á

3.2 Khảo sát hiện trạng của một số trang web.

Một số website của trường đại học dùng ngôn ngữ HTML:

1 Đại học Công nghiệp Hà Nội: https://www.haui.edu.vn/vn

2 Đại học Thương Mại: https://tmu.edu.vn/

3 Đại học Kinh Tế Quốc Dân: https://www.neu.edu.vn/

4 Đại học Tài Nguyên và Môi Trường: https://www.hunre.edu.vn/

3.3 Thiết kế.

* Bố cục trang chủ

- Side giới thiệu về trường: bao gồm các hình ảnh chạy ngẫu nhiên về trường

- Các thế mạnh trường chắp cánh cho sinh viên

Menu

Liên hệ Tin tức

Đào tạo

Sinh viên

Tuyển sinh Trang

chủ

Sơ đồ tiện nghi cơ sở vật chất

Sơ đồ tổng quan về EAUT

Tiện nghi

EAUT CÓ GÌ

Tầm nhìn

Triết lý giáo dục

Định hướng phát triển

Mục tiêu chiến lược

Giá trị

cốt lõi

Sứ mệnh

BAN GIÁM HIỆU

* BỐ CỤC TRANG TIN TỨC CHÍNH

Tin tức được chia thành ba cột (col-4) với bốn hàng

*BỐ CỤC MỖI BẢN TIN

Cũng bao gồm menu phần dưới sẽ là thanh tiêu đề bài viết

Tin tức

Chân trang

Menu

Trang

chủ

Tuyển

sinh

Sinh viên

Đào

Chân trang

KẾT LẠI PHẦN THIẾT KẾ TỔNG QUAN SẼ CÓ

+ TRANG CHỦ

+ TRANG TIN TỨC CHÍNH

+ TRANG TIN CHI TIẾT

THÂN TRANG

BÌNH LUẬN

ĐỂ LẠI BÌNH LUẬN

CHUYÊN MỤC

TIN NỔI BẬT

TÌM

KIẾM

NỘI

DUNG

BÀI

VIẾT

Chân trang

IV THIẾT KẾ TRANG WEB CHI TIẾT

4.1 Các kiến thức, nguyên lý thiết kế

 Các kiến thức nhóm em đã sử dụng:

+ Những kiến thức được thầy truyền đạt

+ Sử dụng Bootstrap để tạo Menu tham khảo trên trang getBootstrap + CSS cho việc căn chỉnh Menu một cách cân xứng nhất

+ Fontawesome với những Icon phù hợp với nội dung

+ Javascript

 Các nguyên lý thiết kế

+ Tỷ lệ hướng đến cân đối vừa mắt, tạo dấu ấn

+ Màu sắc phối một cách hài hòa

+ Kết hợp những hình ảnh phù hợp với ý tưởng trang web

+ Bố cục sắp xếp các yếu tố có chủ đích

 Thêm một số tìm hiểu về hình khối để phù hợp với mắt nhìn người truy cập

4.2 Thiết kế chi tiết

* Với những kiến thức, nguyên lý thiết kế kết hợp với nội dung ý tưởng nhóm em đã xây dựng lên trang website và kết quả chạy cho thấy thể hiện đầy đủ nội dung ý tưởng

+ Giao diện chính

CHẮP CÁNH ƯỚC MƠ CÙNG EAUT

TIỆN NGHI EAUT

EAUT CÓ GÌ ?

BẠN CÓ BIẾT?

TIN TỨC

+Click tiếp vào mục tin tức trên menu ta hiện ra

Một số thông tin tin tức trong bài

* Thông báo Kế hoạch giảng dạy, học tập học kỳ I năm học 2021 – 2022 dành cho sinh viên Khoá 12 của Trường Đại học Công Nghệ Đông Á

* Hay là Hội thảo trực tuyến “CHƯƠNG TRÌNH CỬ NHÂN QUỐC TẾ: CHUYÊN NGÀNH QUẢN TRỊ KINH DOANH”

*Rồi là quy trình nhập học onlie cho các tân sinh viên:

Kết luận Kết quả thu được.

Từ những những kiến thức, nguyên lý đã học được từ thầy, cùng sự tìm tòi về một số trang web một số trường đại học Đặc biệt là trường Đại học Công nghệ Đông Á một cách rất chi tiết tỷ mỉ Từ đó chúng em phân tích được một trang web giáo dục thì cần có những phần nào là chủ yếu rồi kết tập lại xây lên một trang web Đại học Công nghệ Đông Á

Qua những phần về bố cục trong trang web, có thể thấy rằng việc thiết kế bố cục web là một thứ rất quan trọng giúp người dùng có cái nhìn đầy đủ nhất về mặt thông tin, cũng như là điểm nhấn quan trọng với trang web

Trong khuôn khổ của làm bài tập lớn, do thời của chúng em còn ngắn, kiến thức hạn chế đạt hiệu quả chưa cao Trang web đã làm được

- Giới thiệu sơ bộ về Đại học Công nghệ Đông Á

- Web đã cho biết một số thông tin hữu ích cho người truy cập

Hạn chế và hướng phát triển.

Do thời gian thực hiện đề tài tương đối hạn chế và do trình độ hiểu biết về ngôn ngữ HTML, CSS, Javascipt còn nông cạn nên hiệu quả trang web đại được chưa cao Và đây sẽ là hướng phát triển sau này của đề tài

Trang web tương sẽ hướng đến thêm một số nội dung đầy đủ hơn cùng với các hiệu ứng giúp người dễ tiếp cận Mục tiêu sẽ là cầu nối giữa mọi người với trường Đại học Công nghệ Đông Á

Danh mục sách tham khảo

1 Trang web tìm kiếm icon: https://fontawesome.com

2 Trang web học tập làm web với Bootstrap:

+ https://getbootstrap.com

+ https://www.w3schools.com

3 Trang web của trường Đại học Công nghệ Đông Á: https://eaut.edu.vn