Xây dựng website giới thiệu chương trình ptit sakura

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ên đề tài: “Xây dựng website giới thiệu chương trình PTIT-SAKURA” Đơn vị thực tập: Trung tâm Đào tạo Quốc tế Giáo viên hướng dẫn: Ths Nguyễn Thị Thanh Tâm TRUNG TÂM ĐÀO TẠO QUỐC TẾ - CIE                    CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hạnh phúc PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP Họ tên sinh viên thực tâp :  Đơn vị thực tập                     : Trung tâm Đào tạo Quốc tế Thời gian thực tập                 : NHẬN XÉT CỦA CƠ SỞ THỰC TẬP Chấp hành nội quy quy định quan:  …………………………………………………………………………………… ……………………………………………………………………………………       …………………………………………………………………………………… Ý thức học tập: …………………………………………………………………………………… ……………………………………………………………………………………       …………………………………………………………………………………… Quan hệ, giao tiếp đơn vị:  …………………………………………………………………………………… ……………………………………………………………………………………       …………………………………………………………………………………… Xác nhận quan thực tập (Ký, ghi rõ họ tên đóng dấu) Hà nội , ngày tháng năm Người đánh giá (Ký ghi rõ họ tên) 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ự do-Hanh phúc ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP Họ tên sinh viên:  Lớp: 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) LỜI CẢM ƠN  Để hồn thành tập vừa qua cách tốt đẹp, trước hết em xin cảm ơn nhà trường thầy cô tạo điều kiện cho chúng em có hội làm việc Trung tâm Đào tạo Quốc tế - nơi lý tưởng để học hỏi phát triển thân Em xin cảm ơn tận tình hướng dẫn Nguyễn Thị Thanh Tâm q trình hồn thiện báo cáo Đồng thời em xin cảm ơn anh Linh, anh Toàn, thầy Phạm Vũ Minh Tú bạn giúp đỡ, hỗ trợ chia sẻ khó khăn mà em gặp phải q trình thực tập Trung tâm, qua giúp em trau dồi nhiều điều lạ Chắc chắn khoảng thời gian quên em Một lần nữa, em xin chân thành cảm ơn!  MỤC LỤC PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP LỜI CẢM ƠN .3 MỤC LỤC Chương 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP I Giới thiệu chung .5 II Cấu trúc tổ chức III Tầm nhìn sứ mệnh CIE .6 a Tầm nhìn b Sứ mệnh .6 c Những giá trị cốt lõi IV Các chương trình đào tạo,dự án đối tác CIE a Đào tạo b Dự án Chương 2: NỘI DUNG THỰC TẬP I Giới thiệu chung .8 a Nội dung công việc: b Kết cần đạt: II Quá trình làm việc a Tiếp nhận cơng việc nghiên cứu chủ đề website b Tìm hiểu website Landing Page 10 c Tìm hiểu HTML 11 d Tìm hiểu CSS .13 e Công cụ sử dụng công việc 14 f Nghiên cứu hiệu ứng tạo animation 17 g Nghiên cứu Meta Tags phục vụ tối ưu SEO 17 Chương 3: KẾT LUẬN 24 I Những kết đạt 24 II Bài học kinh nghiệm 24 III Những điều chưa đạt 25 IV Kết luận .25 TÀI LIỆU THAM KHẢO 26 Chương 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP I Giới thiệu chung Trung tâm Đào tạo Quốc tế (viết tắt CIE) đơn vị trực thuộc Học viện Cơng nghệ Bưu Viễn thơng (PTIT), trường đại học công lập hàng đầu lĩnh vực CNTT&TT Việt Nam Trung tâm mang đến hội tuyệt vời cho tất sinh viên trung tâm để học tập chương trình đào tạo quốc tế gia tăng hội làm việc nước ngoài, đồng thời mang đến cho bạn sinh viên nước quốc tế chương trình trao đổi dịch chuyển sinh viên Như phần cam kết trung tâm việc mang lại tiếp cận tốt tới chương trình đào tạo quốc tế cho sinh viên nước sinh viên nước PTIT, CIE cung cấp chương trình ưu việt với kết nối chặt chẽ với đối tác quốc tế với phương pháp tiếp lấy người học làm trung tâm Đồng thời áp dụng các chương trình tư vấn linh hoạt thiết kế để gắn kết sinh viên suốt trình nhằm đảm bảo thành công em trước, sau học tập CIE II Cấu trúc tổ chức b Ban giám đốc trung tâm  Giám đốc: PGS.TS Hoàng Hữu Hạnh  Phó giám đốc: ThS Nguyễn Minh Phượng c Các phòng ban  Tổ Quản lý Đào tạo: ThS Phạm Trần Cẩm Vân, Quản lý Chương trình   Tổ Phát triển Dự án: ThS Phạm Vũ Minh Tú, Quản lý Dự án  III Tầm nhìn sứ mệnh CIE a Tầm nhìn Phát triển Trung tâm Đào tạo Quốc tế PTIT trở thành trung tâm quốc tế hoá giáo dục đại học, giáo dục định hướng nghề nghiệp dịch vụ đào tạo quốc tế cho xã hội b Sứ mệnh  Cung cấp chương trình đào tạo quốc tế chất lượng để đáp ứng xu hướng phát triển yêu cầu thực tiễn tổ chức, doanh nghiệp xã hội  Cung cấp chương trình đào tạo định hướng nghề nghiệp tiêu chuẩn quốc tế, nâng cao kỹ cho việc phát triển nguồn nhân lực cho thị trường nội địa quốc tế  Cung cấp dịch vụ quốc tế hóa giáo dục đào tạo có chất lượng cho sinh viên, đáp ứng yêu cầu phát triển nhanh giới đại ngày c Những giá trị cốt lõi  Đề cao cởi mở để đón nhận tri thức bên ngồi  Tích cực chuyển đổi để làm chủ giá trị  Kiến thiết đổi sáng tạo giới tốt đẹp IV Các chương trình đào tạo,dự án đối tác CIE a Đào tạo  Chương trình đại học chất lượng cao  Chương trình Kỹ sư CNTT Tiếng Anh  Chương trình du học chuyển tiếp dánh cho sinh viên PTIT sang học tập nhận đại học AIZU, Nhật Bản  Chương trình liên kết đào tạo cử nhân quốc tế với đại học La Trobe, Australia  Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học AIZU, Nhât Bản  Chương trình liên kết đào tạo cử nhân quốc tế với đại học Middlesex, Vương Quốc Anh  Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học công nghệ (UTS)  Các khóa học ngắn hạn b Dự án  Dự án ProEUHE – ERAMUS + JEAN MONNET  Dự án AVIS PLUS  Dự án EUROPE DAY 2021  Dự án quảng bá châu Âu qua công nghệ truyền thông đa phương tiện c Các đối tác CIE  Gameloft  Samsung  Microsoft  Đại học La Trobe  Tập đồn Bưu Viễn thông Việt Nam VNPT Chương 2: NỘI DUNG THỰC TẬP I Giới thiệu chung Đề tài: Phát triển website giới thiệu dự án PTIT-SAKURA a Nội dung công việc: Công việc 1: Khảo sát sơ môi trường cách làm việc nơi thực tập Công việc 2: Nhận công việc giao trao đổi yêu cầu với người hướng dẫn Cơng việc 3: Tìm hiểu quy trình thiết kế phát triển website landing page chuẩn Cơng việc 4: Tìm hiểu ứng dụng animation cách hoạt động SEO meta tag website Công việc 5: Thực thiết kế ứng dụng kiến thức tìm hiểu vào website Cơng việc 6: Hồn thiện báo cáo thực tập STT Nội dung thực tập Thời gian Mục tiêu Khảo sát sơ môi Từ ngày 19/7 đến Tìm hiểu quy trình làm trường cách làm việc 21/7 việc, cách giao tiếp văn nơi thực tập hóa làm việc Trung tâm Nhận cơng việc Từ ngày 22/7 đến Nhận đề tài giao, làm giao trao đổi yêu cầu ngày 25/7 rõ yêu cầu với người hướng dẫn hướng dẫn sơ tìm hiểu quy trình làm website Tìm hiểu quy trình Từ ngày 26/7 đến Tìm hiểu phong cách thiết kế phát triển ngày 3/8 thiết kế giao diện, công cụ website thiết landing page kế chuẩn HTML&CSS Tìm hiểu ứng dụng Từ ngày 4/8 đến animation cách hoạt ngày 10/8 Tìm hiểu ứng dụng animation website cách tối ưu hóa khả tìm kiếm với SEO meta tag động SEO meta tag website Thực thiết kế Từ ngày 11/8 đến ứng dụng kiến thức 25/8 Bắt tay vào thực thiết kế phát triển website tìm hiểu vào website Hồn thiện báo cáo thực Từ ngày 12/8 đến tập 31/8 b Kết cần đạt:  Tham gia trải nghiệm làm việc mơi trường thực tế  Hồn thành tốt cơng việc giao  Tích cực việc trao đổi với thành viên nhóm với người hướng dẫn  Rút kinh nghiệm sau thời gian thực tập II Quá trình làm việc a Tiếp nhận công việc nghiên cứu chủ đề website i Giới thiệu chương trình cầu nối Việt Nhật PTIT-SAKURA Với bối cảnh quan hệ hợp tác Việt Nam Nhật Bản ngày phát triển nhu cầu lực lượng chuyên gia kỹ sư Công nghệ Thông tin thành thạo tiếng Nhật trở nên thực cần thiết thị trường Nhật Bản lẫn thị trường Việt Nam Do đó, số lượng người đăng ký học tiếng Nhật Việt Nam du học sinh Việt Nhật Bản ngày tăng cao Chính lẽ đó, chương trình liên kết đào tạo Học viện Cơng nghệ Bưu Viễn thơng PTIT Học viện ngơn ngữ Meros, Tokyo, Nhật Bản HTML ngôn ngữ đánh dấu thiết kế để tạo nên trang web, nghĩa mẩu thông tin trình bày World Wide Web ii Ưu điểm HTML  Nguồn tài nguyên hỗ trợ lớn  Hoạt động mượt mà phần lớn trình duyệt phổ biến  Cách sử dụng dễ dàng  Các markup HTML ngắn gọn, tính đồng cao  Mã nguồn mở, miễn phí  Là chuẩn web W3C vận hành  Dễ dàng tích hợp với nhiều loại ngôn ngữ iii Nhược điểm HTML  Mỗi trang HTML phải tạo riêng biệt  Khó kiểm sốt việc đọc hiển thị tập tin HTML trình duyệt Điển vài trình duyệt lỗi thời khơng thực render tag  Một số trình duyệt chậm cập nhật tính hỗ trợ HTML để đọc, hiểu file cách xác iv Một số thành phần HTML  Elements: Các element định xác định cấu trúc nội dung đối tượng trang. Một số yếu tố sử dụng thường xuyên bao gồm nhiều cấp độ tiêu đề (được xác định là  đến ) đoạn văn (được xác định là 

), …  Tags: Việc sử dụng dấu ngoặc nhỏ lớn bao quanh element tạo gọi là thẻ Có loại thẻ HTML thẻ 12 mở thẻ đóng Ví dụ thể mở: Ví dụ thẻ đóng: Nội dung thẻ mở thẻ đóng nội dung element  Attributes: Các attribute là thuộc tính sử dụng để cung cấp thơng tin bổ sung element. Các thuộc tính phổ biến bao gồm thuộc tính id, xác định element; các thuộc tính class, phân loại element; thuộc tính src, xác định nguồn cho nội dung nhúng; và thuộc tính href, cung cấp tham chiếu hyperlink đến tài nguyên liên kết d Tìm hiểu CSS i Định nghĩa CSS CSS (Cascading Style Sheets): định nghĩa cách hiển thị tài liệu HTML CSS đặc biệt hữu ích việc thiết kế Web Nó giúp cho người thiết kế dễ dàng áp đặt phong cách thiết kế lên page website cách nhanh chóng, đồng ii Ưu điểm CSS  Một stylesheet thường lưu trữ nhớ cache trình duyệt, sử dụng nhiều trang mà không nạp lại, tăng tốc độ tải giảm độ truyền liệu qua mạng  Dễ dàng định dạng lại cải tiến thêm  Có tính linh hoạt cao  Tính qn cao, ảnh hưởng tác động lên nhiều thành phần trang web cách dễ dàng đồng iii Nhược điểm CSS  Thiếu biến, gây số hạn chế định việc thay đổi màu sắc độ cao …  Các trình duyệt khác hiển thị CSS theo nhiều cách khác iv Một số thành phần CSS 13  Selectors: có tác dụng định xác thành phần HTML để tác động xác lên Các selector thường nhắm vào giá trị thuộc tính id hay class phần tử ví dụ

hay  Properties: Khi phần tử chọn, thuộc tính xác định kiểu áp dụng cho phần tử đó. Tên thuộc tính nằm sau selector, dấu ngoặc nhọn {} trước dấu hai chấm Có nhiều thuộc tính sử dụng, chẳng hạn như background, color, fontsize, height, và width, …  Values: Dùng để xác định đo lường giá trị properties e Công cụ sử dụng công việc i Công cụ thiết kế website: Figma 14 Figma công cụ mắt vào năm 2016, với giao diện thân thiện tính dễ sử dụng, Figma nhanh chóng lên trở thành công cụ thiết kế giao diện người dùng phổ biến cộng đồng cơng nghệ tồn cầu Một số thương hiệu lớn sử dụng Figma thời điểm kể đến Microsoft, Twitter, GitHub, Dropbox … Khác với công cụ thiết kế trước đây, Figma thiết kế tảng đám mây Đây cơng cụ có tính tương tự Sketch, nhiên hỗ trợ làm việc nhóm tốt Một số tính bật Figma:  Figma hoạt động tương thích tất hệ điều hành có trình duyệt web, từ Windows, Linux, Macs Chromebooks dùng cơng cụ Tính tới thời điểm này, cơng cụ thiết kế làm điều Tất người dùng chia sẻ, mở hay chỉnh sửa file Figma dễ dàng dù dùng hệ điều hành  Là công cụ browser-based, nên người team dễ dàng làm việc với tương tự làm việc Google Docs Mỗi thành viên nhóm xem chỉnh sửa file, Figma hiển thị đại diện avatar tròn công cụ với tên riêng Đây chức tiện bạn muốn biết làm việc file  Người dùng chia sẻ file Figma việc gửi link, người nhận link có khả truy cập vào file Nếu bạn lựa chọn Link to selected frame người nhận nhìn thấy frame bạn chọn lúc chia sẻ Đây tính nhiều designer sử dụng  Tất thứ lưu trữ online cách tự động người dùng làm việc Figma  Hiện nay, Figma có kho plugin có sẵn phong phú miễn phí  Tích hợp sẵn khả Prototype nhanh chóng dễ dàng 15 ii Công cụ phát triển HTML&CSS cho trang web: Visual Studio Code Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hoàn hảo IDE Code Editor Một số tính bật Visual Studio Code:  Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trình C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, …Vì vậy, dễ dàng phát đưa thơng báo chương chương trình có lỗi  Các trình viết code thơng thường sử dụng cho Windows Linux Mac Systems Nhưng Visual Studio Code hoạt động tốt ba tảng  Trong trường hợp lập trình viên muốn sử dụng ngơn ngữ lập trình khơng nằm số ngôn ngữ Visual Studio hỗ trợ, họ tải xuống tiện ích mở rộng Điều không làm giảm hiệu phần mềm, phần mở rộng hoạt động chương trình độc lập  Đi kèm với phát triển lập trình nhu cầu lưu trữ an tồn Với Visual Studio Code, người dùng hồn tồn n tâm dễ dàng kết nối với Git kho lưu trữ có  Visual Studio Code hỗ trợ nhiều ứng dụng web Ngồi ra, có trình soạn thảo thiết kế website 16  Một số đoạn code thay đổi chút để thuận tiện cho người dùng Visual Studio Code đề xuất cho lập trình viên tùy chọn thay có  Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển đổi hai hình trở thư mục gốc thực thao tác  Người dùng Visual Studio Code mở lúc nhiều tệp tin thư mục – chúng không liên quan với f Nghiên cứu hiệu ứng tạo animation i Giới thiệu WOW.js phát triển Matthieu Aussaguel, kỹ sư lập trình web sống làm việc Thái Lan WOW.js kết hợp jQuery thư viện Animation.css viết sẵn kịch Khi bạn scroll website jQuery bắt kiện kích hoạt chuyển động, đối tượng chuyển động diễn hoạt với hỗ trợ CSS Animation CSS Transition ii Cách sử dụng  Bước 1: Liên kết tới thư viện animation Animate.css với đoạn code:  Bước 2: Kích hoạt Wow.js:  Bước 3: Tải file tổng hợp animation chèn vào folder website  Bước 4: Chọn loại animation kích hoạt g Nghiên cứu Meta Tags phục vụ tối ưu SEO 17 i Định nghĩa Meta tag thẻ sử dụng tài liệu HTML XHTML để cung cấp siêu liệu (metadata) có cấu trúc trang web Chúng phần thẻ trang web đọc cơng cụ tìm kiếm trình thu thập thông tin web Nhiều phần tử Meta với thuộc tính khác sử dụng trang giúp cho cơng cụ tìm hiểu hiểu trang web nói có phép thu thập lập mục hay không ii Các loại meta tags  Thẻ title Đây nhan đề trang web, cho biết chủ đề trang web Nội dung thẻ hiển thị bar cửa sổ trình duyệt 18  Thẻ meta description Thẻ nêu tóm tắt nội dung trang web, thể chi tiết thẻ nhan đề Tuy nhiên không nên dài ngắn  Thẻ meta content-type Dùng để khai báo hệ thống ký tự trang web sử dụng HTML Nó giúp trình duyệt biết nội dung trang web mã hóa ký tự sao, để thị thơng tin cách tốt Cú pháp: Trên HTML5, hệ thống hỗ trợ đơn giản với cú pháp sau:  Thẻ meta viewport Thẻ giúp tối ưu website cho phù hợp với nhiều thiết bị, hướng dẫn trình duyệt cách điều khiển kích thước tỉ lệ thu phóng Cú pháp:  Social meta Thẻ có hiệu việc kết nối website với trang mạng xã hội Facebook, Twitter, … Khi chia sẻ URL trang web lên mạng xã hội, nội dung thẻ Social meta giúp trang mạng biết cách hiển thị thông tin cho hiệu  Meta robot Mục đích thẻ báo cho Google có thực hay khơng việc lập mục hay theo dõi trang Cú pháp:  Meta language 19 ... tạo  Chương trình đại học chất lượng cao  Chương trình Kỹ sư CNTT Tiếng Anh  Chương trình du học chuyển tiếp dánh cho sinh viên PTIT sang học tập nhận đại học AIZU, Nhật Bản  Chương trình. .. La Trobe  Tập đoàn Bưu Viễn thơng Việt Nam VNPT Chương 2: NỘI DUNG THỰC TẬP I Giới thiệu chung Đề tài: Phát triển website giới thiệu dự án PTIT- SAKURA a Nội dung công việc: Công việc 1: Khảo sát... kinh nghiệm sau thời gian thực tập II Quá trình làm việc a Tiếp nhận công việc nghiên cứu chủ đề website i Giới thiệu chương trình cầu nối Việt Nhật PTIT- SAKURA Với bối cảnh quan hệ hợp tác Việt