Đồ án môn học thiết kế web thiết kế website giới thiệu anime yakusoku no uta

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ ĐỒ ÁN MÔN HỌC THIẾT KẾ WEB THIẾT KẾ WEBSITE GIỚI THIỆU ANIME YAKUSOKU NO UTA GVHD: THS NGUYỄN HỮU VĨNH SVTH: Nguyễn Anh Hào MSSV: 1824801030064 LỚP: D18PM01 Giới thiệu webside Yakusoku no uta 0 Tháng 7/2020 Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ tên giảng viên: Nguyễn Hữu Vĩnh Tên đề tài: THIẾT KẾ WEBSITE GIỚI THIỆU ANIME YAKUSOKU NO UTA Nội dung nhận xét: Điểm: Bằng số: Bằng chữ: GIẢNG VIÊN CHẤM (Ký, ghi rõ họ tên) NGUYỄN HỮU VĨNH LỜI NÓI ĐẦU Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website Hiện nay, Nhật Bản, Anime mắt, trước đó, công ty phải thiết kế trang web riêng để quản bá Anime để đưa đến fan, người xem nhanh nội dung, thông báo, ngày phát hành, tin, kiện nhanh sác Và Anime Yakusoku no uta (Ca khúc lời hứa) tác giả Aoki Daisuke không ngoại lệ Tác phẩm đưa lên website để đưa đến gần fan, người xem Và website giới thiệu thật quan trọng với tác phẩm Ngoài tên Yakusoku no uta, tác phẩm gọi The promise song project Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài Chương 2: Giới thiệu công nghệ Chương 3: Giao diện website Chương 4: Tổng quan câu chuyện Yakusoku no uta Chương 5: Kết luận hướng phát triển Link tài nguyên: https://github.com/aokidai/Website-Yakusoku-no-uta Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website MỤC LỤC CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Tên Đề Tài .5 Mục Tiêu Đề Tài .5 Ý Nghĩa Của Đề Tài .5 Đối Tượng Của Đề Tài 5 Một Số Trang Chính Của Website CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML 1.4 Cấu trúc trang HTML Giới thiệu Visual Studio Code Giới thiệu Adobe Dreamweaver Ngôn ngữ CSS .11 Bootstrap 12 Ngôn ngữ Javascript .14 CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 19 Cấu trúc Giao diện .19 Đặc tả Giao diện 19 2.1 Trang chủ 19 2.2 News .21 2.3 Story 22 2.4 Staff/Cast .23 2.5 Character 23 2.6 On Air 24 2.7 Movie 24 Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website 2.8 Music 25 2.9 Bru-Ray & DVD 27 2.10 Books 30 2.11 Special 30 CHƯƠNG 4: TỔNG QUAN VỀ WEB VÀ TÁC PHẨM .31 Câu truyện Yakusoku no uta 31 1.1 Về nhân vật 31 1.2 Về nội dung 31 Tổng quan Website: Các điểm mạnh Website: 31 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 33 Kết đạt được: 33 Việc chưa làm được: 33 Hướng phát triển đề tài 33 TÀI LIỆU THAM KHẢO 34 Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Tên Đề Tài + THIẾT KẾ WEBSITE GIỚI THIỆU ANIME YAKUSOKU NO UTA Mục Tiêu Đề Tài + Thiết kế, tạo website giới thiệu Anime Yakusoku no uta đơn giản, nhẹ nhàn, dể tiếp cận cho người xem Ý Nghĩa Của Đề Tài + Tạo nơi mà người xem nắn bắt thông tin Anime + Quảng bá thương hiệu Đối Tượng Của Đề Tài + Đối tượng website người xem Anime Nhật Bản Một Số Trang Chính Của Website + Trang chủ: Tổng quan Anime Yakusoku no uta + Tin tức (News): Cập nhật thông tin Anime + Câu truyện (Story): Tổng quan cốt truyện tập phim Anime + Nhân viên/ Diển viên (Staff/Cast): Thông tin nhân viên Anime diển viên lòng tiếng cho nhân vật + Nhân vật (Character): Giới thiệu nhân vật Anime + Ngày phát sóng (On Air): Đưa nhìn tổng quan ngày phát sóng kênh chương trình truyền hình + Phim (Movie): Nơi tung clip PV Anime + Âm nhạc (Music): Giới thiệu đưa ngày phát hành hát OP, ED khác Anime + Bru-Ray & DVD: Đưa ngày phát hành đĩa Anime sau phát sóng TV + Sách (Books): Nơi cung cấp link mua truyện tranh chưa chuyển thể Anime + Đặc biệt (Special): Bán sản phâm Anime Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? HTML (Hypertext Markup Language-Ngơn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt Ngơn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics HTML ngôn ngữ xác định cấu trúc thông tin HTML sử dụng loạt thẻ thuộc tính dùng để thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 1.2 Công dụng HTML Thiết kế nội dung hình thức trang web Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch… Thêm vào đối tượng hình ảnh video, âm thanh… 1.3 Định dạng HTML Là tập tin có phần mở rộng htm html Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad…và sử dụng nhiều Adobe Dreamweaver Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website 1.4 Cấu trúc trang HTML Giới thiệu Visual Studio Code Visual Studio Code trình biên tập mã phát triển Microsoft dành cho Windows, Linux MacOS Nó hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nó cho phép tùy chỉnh, đó, người dùng thay đổi theme, phím tắt, cá tùy chọn khác Nó miễn phí phần mềm mã nguồn mở, gói tải xuống có giấy phép Visual Studio Code dựa Electron, tảng sử dụng để triển khai ứng dụng Node.js máy tính cá nhân chạy động bố trí Blink Mặc dù sử dụng tảng Electron phần mềm khác Atom, thực dựa trình biên tập Visual Studio Online (tên mã "Monaco") Trong khảo sát vào năm 2018 Stack Overflow, Visual Studio Code xếp hạng trình biên tập mã phổ biến nhất, với 34.9% 75398 người trả lời tuyên bố sử dụng Visual Studio Code công bố, mắt phiên thử nghiệm vào ngày 29 tháng năm 2015 Microsoft hội nghị Build 2015 Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website Vào ngày 18 tháng 11 năm 2015, Visual Studio Code phát hành giấy phép MIT mã nguồn đưa lên GitHub Chức Extesion (tiện ích mở rộng) công bố Vào ngày 14 tháng năm 2016 Visual Studio Code hoàn tất thử nghiệm phát hành thức Visual Studio Code trình biên tập mã Nó hỗ trợ nhiều ngơn ngữ chức tùy vào ngôn ngữ sử dụng theo bảng sau Nhiều chức Visual Studio Code không hiển thị menu tùy chọn hay giao diện người dùng Thay vào đó, chúng gọi thông qua khung nhập lệnh qua tập tin json (ví dụ tập tin tùy chỉnh người dùng) Khung nhập lệnh giao diện theo dòng lệnh Tuy nhiên, biến người dùng nhấp nơi khác, nhấn tổ hợp phím để tương tác với bên ngồi Tương tự với dịng lệnh tốn nhiều thời gian để xử lý Khi thực điều q trình xử lý dịng lệnh bị hủy Các chức phụ thuộc vào ngôn ngữ Ngôn ngữ Chức Syntax highlighting Snippets Batch, C++, Clojure, CoffeeScript, DockerFile, Elixir, F#, Go, Pug template language, Java, HandleBars, Ini, Lua, Makefile, Objective-C, Perl, PowerShell, Python, R, Razor, Ruby, Rust, SQL, Visual Basic, XML Groovy, Markdown, Nim, PHP, Swift Tự động hồn thành mã thơng minh Cải tiến mã nguồn CSS, HTML, JavaScript, JSON, Less, Sass, TypeScript C#, TypeScript JavaScript TypeScript cho Node.js Debugging C# F# cho Mono Linux macOS C C++ Windows, Linux macOS Python Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website Bootstrap tảng (framework) miễn phí, mã nguồn mở, dựa HTML, CSS & Javascript, tạo để xây dựng giao diện Website tương thích với tất thiết bị có kích thước hình khác Bootstrap bao gồm có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Nó có nhiều Component, Javascript hỗ trợ cho việc thiết kế Reponsive bạn dễ dàng, thuận tiện nhanh chóng 0 Hiện Bootstrap framework sử dụng nhiều giới để tạo Responsive Website Bootstrap tạo tiêu chuẩn riêng, lập trình viên ưu chuộng Về Bootstrap có ưu điểm: Dễ sử dụng: Vì Bootstrap xây dựng HTML, CSS & Javascript Responsive: Bootstrap xây dựng sẵn "Responsive Css" tương thích với thiết bị khác nhau, bạn cần học cách sử dụng chúng Tính giúp tiết kiệm nhiều thời gian cho người dùng tạo Website thân thiện Tương thích với trình duyệt: Nó tương thích với tất trình duyệt (Chrome, Firefox, Internet Explorer, Safari, Opera ) Tuy nhiên, với IE, Bootstrap hỗ trợ từ IE10 trở lên Lịch sử Bootstrap: Bootstrap, ban đầu có tên Twitter Blueprint, phát triển Mark Otto Jacob Thornton Twitter khuôn khổ để khuyến khích quán Giới thiệu webside Yakusoku no uta 11 0 Đồ án môn Thiết kế Website công cụ nội Trước Bootstrap, thư viện khác sử dụng để phát triển giao diện, dẫn đến thiếu quán gánh nặng bảo trì cao Sau vài tháng phát triển nhóm nhỏ, nhiều nhà phát triển Twitter bắt đầu đóng góp cho dự án phần Tuần lễ Hack, tuần theo phong cách hackathon dành cho nhóm phát triển Twitter Nó đổi tên từ Twitter Blueprint thành Bootstrap, phát hành dự án nguồn mở vào ngày 19 tháng năm 2011 Nó tiếp tục trì Mark Otto, Jacob Thornton nhóm nhỏ nhà phát triển cốt lõi, cộng đồng lớn người dùng Bootstrap Versions: Phiên Ngày phát hành 1.0 19/08/2011 Nội dung Phiên Bootstrap, chưa hô trợ Mobile Bổ xung hệ thống Grid-Layout 12 cột Thêm số thành 2.0 31/01/2012 phần (component) Và thay đổi vài thành phần sẵn có Vẫn chưa hỗ trợ Mobile 3.0 19/08/2013 Các thành phần thiết kế lại theo phong cách thiết kế phẳng (flat design) Và lần hỗ trợ thiết bị Mobile Bootstrap gần viết lại hoàn toàn từ Bootstrap 3, 4.0 19/01/2018 đánh giá dễ sử dụng nhiều so với phiên trước Giới thiệu webside Yakusoku no uta 12 0 Đồ án môn Thiết kế Website Ngôn ngữ Javascript Với HTML biểu diễn thông tin chưa phải trang Web động có khả đáp ứng kiện từ phía người dùng Hãng Netscape đưa ngơn ngữ script có tên LiveScript để thực chức Sau đổi tên thành JavaScript để tận dụng tính đại chúng ngơn ngữ lập trình Java JavaScript ngơn ngữ dạng script gắn với file HTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dạng mã nguồn JavaScript ngôn ngữ dựa đối tượng, nghĩa bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất chức tốn học Nhưng JavaScript khơng ngơn ngữ hướng đối tượng C++/Java JavaScript ngôn ngữ kịch (scripting language) dùng để tạo script máy client (client-side script) máy server (server-side script) Các script máy client thực thi trình duyệt, script máy server thực server Chương giới thiệu cho ngôn ngữ Javascript, cách chèn script vào tài liệu HTML HTML lúc đầu phát triển định dạng tài liệu chuyển liệu Internet Tuy nhiên, khơng lâu sau đó, trọng tâm HTML nặng tính hàn lâm khoa học dần chuyển hướng sang người dùng thường nhật ngày người dùng xem Internet nguồn thông tin giải trí Các trang Web ngày mang tính sáng tạo đẹp mắt nhằm thu hút nhiều người dùng Nhưng thực chất kiểu dáng nội dung bên không thay đổi Và người dùng điều khiển trang Web hiển thị Javascript phát triển 0một giải pháp cho vấn đề nêu Javascript ngôn ngữ kịch Sun Microsystems Netscape phát triển Nó dùng để tạo trang Web động tương tác Internet Đối với người phát triển HTML, Giới thiệu webside Yakusoku no uta 13 Đồ án môn Thiết kế Website Javascript hữu ích việc xây dựng hệ thống HTML tương tác với người dùng JavaScript gì? 0 Sun Microsystems viết ngôn ngữ phức tạp mạnh mẽ mà biết ngơn ngữ Java Mặc dù Java có tính khả dụng cao lại phù hợp nhà lập trình có kinh nghiệm cho công việc phức tạp Netscape Communications nhận thấy nhu cầu cần ngơn ngữ thiết kế web có khả tương tác vớI ngườI sử dụng hay vớI Java Applet, dễ sử dụng vớI ngườI lập trình kinh nghiệm LiveScript ngơn ngữ mớI dạng phác thảo, nhiên hấp dẫn ngườI sử dụng hứa hẹn đáp ứng tốt yêu cầu LiveScript thiết kế theo tinh thần nhiều ngôn ngữ script đơn giản lại có tính khả dụng cao thiết kế đặc biệt để xây dựng trang Web (chẳng hạn HTML form tương tác) Để giúp ‘bán chạy’ ngôn ngữ này, Netscape hợp tác với Sun cho đời ngôn ngữ Javascript Trên thực tế, Microsoft người tiên phong triển khai phiên Javascript (cịn có tên Jscript), họ khơng sử dụng đặc tả thức Javascript Mục tiêu JavaScript nhằm cung cấp cho nhà phát triển Web số khả quyền điều khiển chức cho trang Web Mã Javascript có khả nhúng tài liệu HTML để điều khiển nội dung trang Web kiểm tra hợp lệ liệu mà người dùng nhập vào Khi trang hiển thị trình duyệt, câu lệnh trình duyệt thông dịch thực thi  JavaScript JavaScript ngôn ngữ kịch dựa đối tượng nhằm phát triển ứng dụng Internet chạy phía client phía server Các ứng dụng client chạy trình duyệt Netscape Navigator Internet Explorer, ứng dụng server chạy Web server Microsoft’s Internet Information Server Netscape Enterprise Server Giới thiệu webside Yakusoku no uta 14 0 Đồ án môn Thiết kế Website Hiệu ứng quy tắc JavaScript JavaScript ngơn ngữ lập trình nhúng trang HTML JavaScript nâng cao tính động khả tương tác cho web-site cách sử dụng hiệu ứng thực phép tính, kiểm tra form, viết trò chơi, bổ sung hiệu ứng đặc biệt, tuỳ biến chọn lựa đồ hoạ, tạo mật bảo mật Chúng ta sử dụng JavaScript để: Tương tác với người dùng.Chúng ta viết mã để đáp lạI kiện Các phát sinh người dùng - - nhấp chuột hay phát sinh từ hệ thống - - định lại kích thước trang v.v 0 dùng để thay đổi nội dung vị trí Thay đổi nội dung động Mã JavaScript phần tử cách động trang nhằm đáp lại tương tác với người dùng Kiểm tra tính hợp lệ liệu Chúng ta viết mã nhằm kiểm tra tính hợp lệ liệu người dùng nhập vào trước gửi lên Web server để xử lý Giống ngôn ngữ khác, JavaScript tuân thủ số quy tắc ngữ pháp Việc nắm vững quy tắc ngữ pháp giúp ta đọc script tự viết script không bị lỗi Một số luật bao gồm: Dùng Caps JavaScript phân biệt chữ hoa chữ thường Dùng Pairs Trong JavaScript, luôn có cặp ký hiệu mở đóng Lỗi xuất bỏ sót đặt sai hai ký hiệu Dùng Spaces (các ký tự trắng).Như HTML, JavaScript thường bỏ qua ký tự trắng Trong JavaScript, ta thêm vào ký tự trắng tab giúp cho ta dễ dàng đọc hay sửa file script Dùng Chú thích (Comments).Các thích giúp ta ghi chức đoạn script, thờI gian ngườI tạo đoạn script Giới thiệu webside Yakusoku no uta 15 0 Đồ án môn Thiết kế Website Mặc dù client-side JavaScript server-side JavaScript dựa ngôn ngữ tảng nhau, mỗI loạI cịn có thêm tính chun biệt phù hợp với mơi trường mà chạy Nghĩa là, client-side JavaScript bao gồm đối tượng định nghĩa sẵn sử dụng trình dut, Server-side JavaScript bao gồm đối tượng hàm định nghĩa sẵn sử dùng ứng dụng phía server (server-side applications) Các cơng cụ JavaScript IDE, môi trường thực thi Các công cụ sinh mã JavaScript IDE giúp tạo mã JavaScript hữu hiệu Các cơng cụ cịn giúp ta nhanh chóng phát triển website Một vài công cụ JavaScript IDE đề cập đây: Dialog Box.Công cụ tự động tạo mã để sinh hộp thoại tuỳ biến trình duyệt khác (alert, confirm, prompt, v.v.) mang lại kiểu dáng chuyên nghiệp cho website Pop-up Menu builder Chỉ cần đưa vào lựa chọn, công cụ tự động tạo pop-up menu trình duyệt khác Remotes Tự động sinh mã để mở cửa sổ popup Như biết, JavaScript chạy máy khách (client) máy chủ (server) Bên phía máy khách, trình duyệt thực thi mã lệnh javascript trang web mở Bên phía máy chủ, mã javascript 0 thực thi máy chủ máy chủ thực Client-side Java Script Khi máy client yêu cầu trang HTML, server kiểm tra xem trang có chứa script hay khơng Nếu chứa client-side script, server chuyển toàn tài liệu bao gồm mã lệnh JavaScript nội dung HTML cho trình duyệt Khi trình duyệt nhận tài liệu đó, thực thi mã lệnh HTML JavaScript mà không cần tương tác với server JavaScript Web Server Giới thiệu webside Yakusoku no uta 16 0 Đồ án môn Thiết kế Website Chúng ta nhúng lệnh JavaScript chạy server (server-side script) vào tài liệu HTML Quá trình tạo ứng dụng server-side trình gồm hai giai đọan Các trang HTML có chứa câu lệnh JavaScript client-side server-side tạo với file JavaScript Tất file biên dịch thành dạng mã thực thi bytecode Khi trình duyệt yêu cầu trang HTML, run-time engine thực thi mã lệnh server-side JavaScript trả trang HTML cho trình duyệt Một số cơng dụng script server-side bao gồm: Kết nối vào sở liệu Chia sẻ thông tin cho người dùng ứng dụng Truy cập vào hệ thống file server Nhúng JavaScript vào trang Web Chúng ta có thẻ chèn lệnh JavaScritp vào tài liệu HTML theo cách sau đây: Nhúng câu lệnh trực tiếp vào tài liệu cách sử dụng thẻ Liên kết file nguồn JavaScript với tài liệu HTML Đặt biểu thức JavaScript làm giá trị cho thuộc tính thẻ HTML Dùng trình xử lý kiện thẻ HTML Chúng ta có xem chi tiết số ví dụ sau đây: Dùng thẻ SCRIPT Mã JavaScript cụ thể nhúng vào tài liệu HTML thẻ SCRIPT Chúng ta nhúng nhiều script vào tài liệu, script nằm thẻ SCRIPT Khi trình duyệt gặp phải thẻ đó, đọc dịng gặp thẻ đóng Tiếp đến kiểm tra lỗi câu lệnh JavaScript Nếu gặp Giới thiệu webside Yakusoku no uta 17 Đồ án môn Thiết kế Website phải lỗi, cho hiển thị lỗi chuỗi hộp cảnh báo (alert boxes) lên hình Nếu khơng có lỗi, câu lệnh biên dịch cho máy tính hiểu lệnh CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH Cấu trúc Giao diện 0 Giao diện phân thành nhánh sau - Tại trang điều có link đến trang khác điều nhúng Twitter @aokidaisuke91 vào để dể dàng theo dổi thông tin mong muốn Đặc tả Giao diện 2.1 Trang chủ - Mục đích: Là giao diện tổng quan Website Giới thiệu webside Yakusoku no uta 18 0 Đồ án môn Thiết kế Website - - Tại đây, người xem đến trang khác thông qua link đính kèm Trang web chia thành phần sau:  Phần bên trái: Bao gồm link dẫn đến trang khác  Phần bên phải: Chỉ chứa chữ đặc trung cho trang  Phần giữa: Chứa nội dung  Phần dưới: Bao gồm trang Twitter nhúng vào link chuyển trang 0 link đối tác bao gồm: コンプエース, ComicWalker, Kadokawa Sliver Link  Phần cuối: Chứa thông tin hai nút đăng nhập tạo tài khoản ... Yakusoku no uta 0 Đồ án môn Thiết kế Website CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Tên Đề Tài + THIẾT KẾ WEBSITE GIỚI THIỆU ANIME YAKUSOKU NO UTA Mục Tiêu Đề Tài + Thiết kế, tạo website giới thiệu Anime. .. chuyện Yakusoku no uta Chương 5: Kết luận hướng phát triển Link tài nguyên: https://github.com/aokidai /Website- Yakusoku- no- uta Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website. .. tranh chưa chuyển thể Anime + Đặc biệt (Special): Bán sản phâm Anime Giới thiệu webside Yakusoku no uta 0 Đồ án môn Thiết kế Website CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML