Đồ án tốt nghiệp khoa đa phương tiện, học viện bưu chính viễn thông (7)

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN - - BÁO CÁO THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: PHÁT TRIỂN WEBSITE LANDING PAGE GIỚI THIỆU DỰ ÁN LA TROBE Đơn vị thực tập : Trung tâm Đào tạo Quốc tế - Học viện Cơng nghệ Bưu Viễn thơng Người hướng dẫn : ThS Nguyễn Thị Thanh Tâm Sinh viên thực : Nguyễn Thị Kim Đào Mã sinh viên : B17DCPT039 Lớp : D17PTDPT1 Hà Nội, 2021 HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập Tự Hanh phúc ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP (Thời gian thực tập: Từ ngày 19/07/2021 đến ngày 31/08/2021) Họ tên sinh viên: Nguyễn Thị Kim Đào Lớp: D17PTDPT1 NỘI DUNG ĐÁNH GIÁ Chấp hành kỷ luật: (Tốt, Trung bình, Yếu) ………………………………………………………………………………………… ………………………………………………………………………………………… Ý thức học tập: (Tốt, Trung bình, Yếu) ………………………………………………………………………………………… ………………………………………………………………………………………… Quan hệ, giao tiếp: (Tốt, Trung bình, Yếu) ………………………………………………………………………………………… ………………………………………………………………………………………… Điểm (Thang điểm 10) ………………………………………………………………………………………… ………………………………………………………………………………………… Các ý kiến khác (nếu có): ………………………………………………………………………………………… ………………………………………………………………………………………… Ngày tháng năm 20… Giáo viên hướng dẫn thực tập (Ký ghi rõ họ tên) Báo cáo thực tập tốt nghiệp LỜI MỞ ĐẦU Sau bốn năm sinh viên thuộc khoa Đa phương tiện, học giảng đường Học viện Công nghệ Bưu Viễn thơng em tích lũy cho thân nhiều kiến thức Quá trình thực tập mặt yêu cầu bắt buộc với sinh viên mặt khác giai đoạn ý nghĩa, quan trọng giúp sinh viên tập làm quen với công việc thực tế, hội nhập vào môi trường doanh nghiệp Trong thời gian thực tập, sinh viên học hỏi thêm nhiều điều, đồng thời hội để phát triển điểm yếu kiến thức kỹ mình, để từ bổ sung, bù đắp trước rời ghế nhà trường Thực nhiệm vụ học tập nhà trường đợt thực tập tốt nghiệp, đồng ý ban lãnh đạo Khoa, bám sát đề cương Khoa đưa ra, với lý luận kiến thức học Trong trình thực tập em trau dồi thêm kiến thức lĩnh vực đào tạo hiểu biết lập trình, ứng dụng cấu tình hình hoạt động Trung tâm Được tận tình giúp đỡ hướng dẫn thầy, anh nỗ lực học tập, tìm tịi học hỏi, em hồn thành báo cáo thực tập tốt nghiệp Báo cáo gồm phần chính: - Phần A: Giới thiệu đơn vị thực tập - Phần B: Nội dung thực tập - Phần C: Bài học kinh nghiệm Trong trình thực báo cáo, cố gắng em hạn chế thời gian tìm hiểu, kiến thức kinh nghiệm khơng tránh khỏi sai sót Em mong nhận ý kiến đóng góp nhận xét để em hồn thiện Báo cáo thực tập tốt nghiệp LỜI CẢM ƠN Thời gian tuần thực tập Trung tâm Đào tạo Quốc tế, em học hỏi mở mang nhiều kiến thức mới, có nhìn tổng quan cách vận hành, hoạt động phòng ban Thời gian thực tập dù ngắn nhờ có quan tâm, tạo điều kiện thầy anh giúp em hồn thành tốt cơng tác thực tập Em xin gửi lời cảm ơn chân thành đến thầy cô giáo khoa Đa Phương Tiện - Học viện Cơng nghệ Bưu Viễn thơng Nhờ kiến thức động viên mà thầy cô truyền dạy suốt chương trình học, em có bước hành trang tốt để bước vào đợt thực tập cho sống công việc mai sau Để có kết này, em xin gửi lời cảm ơn sâu sắc đến cô Nguyễn Thị Thanh Tâm Cảm ơn ln hướng dẫn, đơn đốc, tận tâm giúp đỡ em suốt trình làm báo cáo thực tập Qua thời gian thực tập, em xin gửi lời cảm ơn đến thầy Phạm Vũ Minh Tú – Quản lý Dự án tận tình giúp đỡ tạo điều kiện thuận lợi giúp em hồn thành tốt tập có thêm kinh nghiệm làm việc Đồng thời, em xin gửi lời cảm ơn đến tất anh trung tâm giúp đỡ giải đáp thắc mắc em trình làm việc Em xin chân thành cảm ơn! Báo cáo thực tập tốt nghiệp MỤC LỤC Báo cáo thực tập tốt nghiệp DANH MỤC CÁC TỪ VIẾT TẮT Từ viết tắt Viết đầy đủ Giải thích nghĩa CIE Center for International Education Trung tâm Giáo dục Quốc tế (Trung tâm Đào tạo Quốc tế) WWW World Wide Web Mạng lưới thông tin tồn cầu HTML HyperText Markup Language Ngơn ngữ Đánh dấu Siêu văn W3C Word Wide Web Consutirum Tổ chức tiêu chuẩn quốc tế cho World Wide Web CSS Cascading Style Sheets Ngôn ngữ định kiểu theo tầng Báo cáo thực tập tốt nghiệp DANH MỤC CÁC HÌNH Báo cáo thực tập tốt nghiệp PHẦN A: GIỚI THIỆU ĐƠN VỊ THỰC TẬP I Vị trí chức Trung tâm Đào tạo Quốc tế (viết tắt CIE), có địa Km10 - Đường Nguyễn Trãi - Quận Hà Đông - Hà Nội, tổ chức cung cấp dịch vụ đào tạo trực thuộc Học viện Công nghệ Bưu Viễn thơng xác định Quy chế tổ chức hoạt động Học viện, ban hành kèm theo Quyết định số 879/QĐBTTTT ngày 25/5/2016 Bộ trưởng Bộ Thơng tin Truyền thơng Hình 1: Logo Trung tâm Đào tạo Quốc tế - Học viện Công nghệ Bưu Viễn thơng Trung tâm có chức phát triển, tổ chức quản lý hoạt động, chương trình: đào tạo liên kết quốc tế; đào tạo tiên tiến; đào tạo chất lượng cao; trao đổi học viên, sinh viên quốc tế (gọi chung sinh viên); đào tạo hướng nghiệp, ngôn ngữ kỹ sống cho học sinh, sinh viên du học; tổ chức lớp học trại hè quốc tế cho học sinh, sinh viên (gọi chung đào tạo quốc tế) II Nhiệm vụ Trung tâm Đào tạo quốc tế đảm nhiệm nhiệm vụ sau: Xây dựng chiến lược, kế hoạch dài hạn, kế hoạch hàng năm Trung tâm trình Giám đốc Học viện Tổ chức thực sau phê duyệt; Tổ chức xây dựng, phát triển chương trình, nội dung đào tạo; tổ chức biên soạn tài liệu giảng dạy, học tập quy trình đào tạo quốc tế; Lập phương án, đề án đào tạo quốc tế trình cấp có thẩm quyền Tổ chức thực phê duyệt; Tổ chức đàm phán thoả thuận, hợp đồng liên kết đào tạo quốc tế theo quy định hành Nhà nước; Báo cáo thực tập tốt nghiệp Lập kế hoạch, chuẩn bị điều kiện, thủ tục để mở khóa đào tạo quốc tế theo quy định Nhà nước; Đề xuất với Giám đốc Học viện tiêu đào tạo quốc tế Xây dựng chủ trì tổ chức thực kế hoạch tuyển sinh hàng năm; Tổ chức giới thiệu, quảng bá khóa học đào tạo quốc tế nhằm phát triển đào tạo quốc tế; Chủ trì, phối hợp với đơn vị có liên quan xây dựng trình Giám đốc Học viện kế hoạch huy động lực lượng cán bộ, giảng viên, nghiên cứu viên tham gia giảng dạy Trung tâm Tổ chức thực phê duyệt; Xây dựng kế hoạch; chủ trì, phối hợp với đơn vị điều phối kế hoạch giảng dạy kỳ học năm học cho khoá đào tạo quốc tế Phối hợp với đơn vị sử dụng hợp lý hiệu quỹ giảng đường; 10 Tổ chức trình đào tạo quốc tế theo quy chế, quy định hành Nhà nước Học viện Phối hợp làm thủ tục cấp phát văn theo quy định Nhà nước Học viện Tổ chức cấp phát văn cho sinh viên, học viên; 11 Đầu mối quản lý mặt hành sinh viên, học viên nước ngồi học tập Học viện Quản lý sinh viên, học viên học tập Trung tâm phù hợp quy định Nhà nước Học viện Giữ liên lạc mối quan hệ với cựu sinh viên, học viên; 12 Định kỳ tổ chức hội nghị đánh giá công tác đào tạo quốc tế Đề xuất phương án cải tiến công tác quản lý đào tạo quốc tế nhằm không ngừng nâng cao chất lượng đào tạo; 13 Quản lý lưu trữ hồ sơ tuyển sinh, hồ sơ sinh viên, kết học tập, cơng văn giấy tờ có liên quan đến công tác đào tạo quốc tế; 14 Xây dựng quy định quản lý theo chức năng, nhiệm vụ giao Tổ chức thực hiện, kiểm tra, giám sát, tổng kết đánh giá, xử lý vi phạm văn quản lý ban hành; 15 Thực nhiệm vụ khác Học viện cấp giao Báo cáo thực tập tốt nghiệp a Phân tích người dùng − Xác định người dùng: sinh viên có nhu cầu du học quan tâm, tìm hiểu chương trình học bổng du học − Mục đích: giới thiệu chương trình liên kết đào tạo cử nhân quốc tế với trường đại học La Trobe, Australia − Phạm vi: phục vụ cho việc giới thiệu, quảng bá chương trình học bổng liên kết Trung tâm Đào tạo Quốc tế - Học viện Công nghệ Bưu Viễn thơng với trường Đại học La Trobe đến học sinh, sinh viên − Cách trình bày: Landing page (Landing Page - hay gọi trang đích) loại Website riêng biệt, tách hẳn với Website thiết kế để thuyết phục khách truy cập đến mục tiêu trọng tâm mà chiến dịch marketing/quảng cáo đặt nhằm hướng khách hàng vào hành động cụ thể (mua hàng, để lại thông tin, lấy phiếu giảm giá, đưa khách hàng đến website chính…) − Hình thức: Website tĩnh − Dạng thức: Onepage (Web trang) b Thiết kế chức cấu trúc trang − Chức năng: cung cấp thông tin chương trình học bổng mơi trường học tập đại học La Trobe, Australia − Cấu trúc: chia làm section, giới thiệu từ tổng quát đến chi tiết nội dung chương trình, section ngăn cách màu riêng hiển thị tiêu đề section − Sơ đồ tổ chức thông tin: Báo cáo thực tập tốt nghiệp Hình 3: Sơ đồ tổ chức thông tin 2.2 Thiết kế Wireframe Khái niệm: Wireframes bố cục đen trắng đơn giản phác thảo kích thước vị trí cụ thể thành phần trang, tính trang web, khu vực chuyển đổi điều hướng cho trang web bạn Chúng khơng có màu sắc, lựa chọn phơng chữ, logo yếu tố thiết kế thực mà tập trung hoàn toàn vào cấu trúc trang web Thiết kế Wireframe cho trang Landing Page giới thiệu Dự án La Trobe: Báo cáo thực tập tốt nghiệp − Wireframe dành cho Desktop: Hình 4: Wireframe dành cho Desktop Báo cáo thực tập tốt nghiệp − Wireframe dành cho Mobile: Hình 5: Wireframe dành cho Mobile Báo cáo thực tập tốt nghiệp 2.3 Thiết kế giao diện − Giao diện dành cho Desktop: Báo cáo thực tập tốt nghiệp Hình 6: Giao diện dành cho Desktop − Giao diện dành cho Mobile: Báo cáo thực tập tốt nghiệp Hình 7: Giao diện dành cho Mobile Báo cáo thực tập tốt nghiệp Xây dựng Website Landing Page giới thiệu Dự án La Trobe III.1 Lập trình  Cấu trúc Project bao gổm: − Thư mục img: chứa ảnh sử dụng cho trang web − File index.html: hiển thị nội dung trang web, bao gồm thẻ html − File style.css: chỉnh giao diện màu sắc, kích thước cho thành phần trang web − File res.css: responsive cho trang web hiển thị tương thích với loại thiết bị − File script.js: thiết lập hiệu ứng cho trang web  Lập trình cài đặt file: − File index.html: Báo cáo thực tập tốt nghiệp − File style.css: − File script.js: III.2 Responsive cho loại thiết bị Các thiết bị di động, đặc biệt smartphone có xu hướng lên ngơi, thiết kế responsive ngày trở nên phổ biến Thậm chí, coi responsive yếu tố để đánh giá hiệu trang web Để Website có tính ứng dụng cao, cần responsive để thiết kế trang web cho nội dung hiển thị tương thích nhiều loại Báo cáo thực tập tốt nghiệp thiết bị khác Nói cách khác, bố cục trang web tự động thay đổi, điều chỉnh để xuất vừa in hình máy tính, điện thoại hay thiết bị sử dụng Thực responsive cho trang landing page cách sử dụng file file res.css riêng biệt, sau chia trường hợp cho loại kích thước hình cụ thể, tiến hành thiết lập, sửa đổi bố cục kích thước hiển thị cho loại hình thiết bị khác III.3 Demo sản phẩm Link Demo: https://nguyenkimdao1998.github.io/Web-LaTrobe/ Báo cáo thực tập tốt nghiệp Hình 8: Hình ảnh sản phẩm Demo III Kết luận Ngày nay, website sử dụng phổ thơng, người người, nhà nhà truy cập website đâu có kết nối internet có kết nối sóng di động Với doanh nghiệp, cá nhân thường xuyên tương tác với cộng đồng online website cơng cụ tốt giúp họ quảng bá hình ảnh, sản phẩm, thơng tin, Và từ dịch vụ thiết kế web chuyên nghiệp đời nhằm đáp ứng điều Nhận thức tầm quan trọng website, Trung tâm Đào tạo Quốc tế ứng dụng sử dụng website việc truyền tải, cung cấp giới thiệu chương trình du học, học bổng dành cho sinh viên có mong muốn học tập nước ngồi Việc thực tập trung tâm tạo website để hỗ trợ trung tâm quảng bá hình ảnh cho em có hội học hỏi, đào tạo, cọ sát áp dụng kiến thức học để hoàn thành sản phẩm mang tính ứng dụng Trong q trình thực tập, em tiếp xúc học hỏi nhiều kinh nghiệm làm việc từ thầy, anh trung tâm Đây hội tốt để giúp em làm quen với môi trường làm việc chuyên nghiệp tích lũy thêm kiến thức kỹ cho công việc em sau Báo cáo thực tập tốt nghiệp PHẦN C: BÀI HỌC KINH NGHIỆM I Về kiến thức − Được ôn tập bổ sung thêm kiến thức xây dựng phát triển ứng dụng đa phương tiện, cụ thể website − Tìm hiểu hệ cơng nghệ Web − Tìm hiểu cơng cụ, ngơn ngữ phát triển ứng dụng web − Tham gia phát triển website II Về kỹ Kỹ giao tiếp chuyên nghiệp Khác với môi trường Đại học trước đây, việc trao đổi công việc Trung tâm Đào tạo Quốc tế, đặc biệt tiếp xúc với thầy, anh cần thái độ giao tiếp chuyên nghiệp hơn, công việc giao qua email hệ thống chat nội đòi hỏi cẩn thận, tỉ mỉ giao phó phản hồi lại Việc trao đổi công việc gửi tài liệu công việc qua email cần thể tôn trọng, lễ phép với thầy, anh câu chữ cách thức email khơng cịn đơn gửi tài liệu trao đổi thời học Đại học trước Kỹ làm việc nhóm mơi trường làm việc chun nghiệp Ở Trung tâm Đào tạo quốc tế, em may mắn tiếp xúc làm việc với thầy, anh nhiệt tình, giỏi giang cơng việc Mỗi hệ trước sách sống để thân em học hỏi kinh nghiệm thực tiễn Đó kinh nghiệm học trình xây dựng sản phẩm ứng dụng đa phương tiện,… Việc chia làm nhóm để làm việc giúp em có thêm học hỏi từ bạn bè hồn thiện thiếu sót thân Các thầy cô anh bảo em tận tình suốt thời gian thực tập vừa qua Em nghĩ môi trường làm việc đáng học hỏi gắn bó lâu dài III Thuận lợi khó khăn Thuận lợi Báo cáo thực tập tốt nghiệp − Sự hướng dẫn, bảo nhiệt tình từ thầy, anh Trung tâm Đào tạo Quốc tế Đặc biệt anh hướng dẫn trực tiếp − Được làm việc với thầy, anh có kinh nghiệm, giỏi nghề sinh viên học hỏi nhiều kinh nghiệm quý báu từ người − Được hỗ trợ tài liệu trình thực tập trung tâm − Sự hướng dẫn nhiệt tình giáo viên hướng dẫn, ln trách nhiệm hỗ trợ thông tin với sinh viên Khó khăn − Bản thân em ban đầu cịn gặp nhiều bỡ ngỡ, rụt rè, khó khăn việc làm quen với người, làm quen với môi trường làm việc mới, kinh nghiệm làm việc hạn chế nên cần bảo tận tình thầy anh − Ảnh hưởng dịch Covid nên chưa có hội làm việc văn phịng nhiều, cơng việc trao đổi báo cáo chủ yếu qua hình thức online Báo cáo thực tập tốt nghiệp KẾT LUẬN Trong thời gian thực tập Trung tâm Đào tạo Quốc tế - Học viện Cơng nghệ Bưu Viễn thơng, em trải nghiệm, nhận nhiều điều lý thú sống nghề nghiệp tương lai Khoảng thời gian vừa qua hội cho em học hỏi thực hành kiến thức mà thầy cô cung cấp trường áp dụng vào thực tế, hiểu rõ môi trường làm việc, ứng xử với người quan Em học hỏi nhiều kinh nghiệm từ thầy, anh trước có khả chun mơn cao hoạt động lĩnh vực Qua khoảng thời gian thực tập, em thực sống làm việc môi trường làm việc chuyên nghiệp, lần đầu tiếp xúc, tận tay làm việc, tự ứng phó, giải vấn đề khó khăn gặp phải để từ rút học cho thân Bên cạnh đó, tập giúp em nhận cịn nhiều thiếu sót, cần phải nỗ lực học hỏi, trau dồi kiến thức, kinh nghiệm cho thân để tiếp tục tiến xa cơng việc tương lai Báo cáo thực tập tốt nghiệp TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt: [1] ThS Nguyễn Tất Chung, Bài giảng Phát triển ứng dụng Web, Học viện Công nghệ Bưu Viễn thơng, 2014 [2] ThS Trịnh Thị Vân Anh, Bài giảng Lập trình Web, Học viện Cơng nghệ Bưu Viễn thơng, 2014 [3] ThS Bùi Thị Thu Huế, Bài giảng Thiết kế tương tác Đa phương tiện, Học viện Cơng nghệ Bưu Viễn thơng, 2018 [4] ThS Phí Cơng Huy, Slide giảng Thiết kế tương tác đa phương tiện, Học viện Công nghệ Bưu Viễn thơng, 2013 Website tham khảo: https://cie.ptit.edu.vn/ https://www.w3schools.com/ https://vi.wikipedia.org/ ... tháng năm 20… Giáo viên hướng dẫn thực tập (Ký ghi rõ họ tên) Báo cáo thực tập tốt nghiệp LỜI MỞ ĐẦU Sau bốn năm sinh viên thuộc khoa Đa phương tiện, học giảng đường Học viện Cơng nghệ Bưu Viễn. .. Anh, Bài giảng Lập trình Web, Học viện Cơng nghệ Bưu Viễn thông, 2014 [3] ThS Bùi Thị Thu Huế, Bài giảng Thiết kế tương tác Đa phương tiện, Học viện Cơng nghệ Bưu Viễn thơng, 2018 [4] ThS Phí...2 HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập Tự Hanh phúc ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP (Thời gian thực