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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (5.53 MB, 20 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á</b>

<b>BÀI TẬP LỚN</b>

<b>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</b>

<b>Sinh viên thực hiệnKhóaLớpMã sinh viên</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">



<i>---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ànhsiê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ênmạ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ụ chocuộ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ùngvớ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ựckhá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ầnlên Internet gõ là ra hàng ngàn bài để chúng ta lựa chọn, nhưng để có được những trangwed đó địi hỏi những người trong lĩnh vực cơng nghệ thơng tin phải ln 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 đó chochú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ànghồ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àngThanh 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óichung, chúng em sẽ cố gắng nỗ lực để có thể hồn thành được bài tập một cách hoànthiện nhất với khả năng của chúng em. Chúng em xin cảm ơn!</i>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>DANH MỤC CÁC TỪ VIẾT TẮT</b>

<b> (Nếu có)(trình bầy trong trang riêng)</b>

2 3

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>I. GIỚI THIỆU VỀ ĐỀ TÀI</b>

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

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ể hồ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.

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.

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.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>II. CHUẨN BỊ DỰ ÁN</b>

<b>2.1 Lập kế hoạch dự án.</b>

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 hồn tồ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

- 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.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

<b>3.1 Mục tiêu chính.</b>

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 Á

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

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: Đại học Thương Mại: Đại học Kinh Tế Quốc Dân: Đại học Tài Nguyên và Môi Trường: Thiết kế.* Bố cục trang chủ</b>

- 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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>IV. THIẾT KẾ TRANG WEB CHI TIẾT</b>

<b>4.1. Các kiến thức, nguyên lý thiết kế</b>

 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

<b>4.2. Thiết kế chi tiết</b>

<b>* 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 </b>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>+ Giao diện chính</b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

* 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 Á

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

* 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:

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>Kết luận</b>

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

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

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 Á.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">