Build responsive landing page for the management application

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN BUILD RESPONSIVE LANDING PAGE FOR THE MANAGEMENT APPLICATION Đơn vị thực tập : Công ty TNHH Tin học Thương mại (AsNet) Giảng viên hướng dẫn : Ths Nguyễn Văn Chức LỜI CẢM ƠN Sau thời gian học tập trường, em truyền đạt kiến thức chuyên ngành, lời khuyên học tập, công việc định hướng tương lai Và đặc biệt hơn, em tham gia thực tập nghề nghiệp kiến thức lý thuyết học Dưới quan tâm, đạo quý thầy cô khoa Thống kê - Tin học em bắt đầu trình thực tập Cơng ty TNHH Tin học Thương mại (AsNet) Khoảng thời gian thực tập ngắn ngủi em học hỏi, trải nghiệm tích lũy kỹ cần thiết cho vị trí lập trình viên (Front-end developer) Xin chân thành cảm ơn quý thầy, cô giáo khoa Thống Kê – Tin học trường Đại học Kinh Tế, Đại học Đà Nẵng tạo điều kiện để chúng em có điều kiện thực tập Đặc biệt, chúng em xin cảm ơn thầy Nguyễn Văn Chức, người tận tình hướng dẫn chúng em hoàn thành báo cáo Em xin cảm ơn quý công ty, anh Huỳnh Văn Long người hướng dẫn em công ty giúp đỡ, tạo điều kiện, cung cấp tài liệu cho em q trình thực tập vị trí để hồn thành tập tốt Vì thực tập thực phạm vi thời gian hạn hẹp hạn chế mặt kiến thức chun mơn, báo cáo em khơng thể tránh khỏi sai sót định Em mong có ý kiến đóng góp thầy, cô để báo cáo thân chúng em hoàn thiện LỜI CAM ĐOAN Em xin cam đoan đề tài: “Build responsive landing page for management application” cơng trình nghiên cứu độc lập em hướng dẫn anh chị Mentors cơng ty AsNet thầy Th.S Nguyễn Văn Chức Ngồi khơng có chép người khác Đề tài, nội dung báo cáo thực tập sản phẩm mà em nỗ lực nghiên cứu trình học tập trường tham gia thực tập công ty MỤC LỤC LỜI CẢM ƠN iii LỜI CAM ĐOAN iv MỤC LỤC v DANH MỤC HÌNH ẢNH vii DANH MỤC BẢNG BIỂU ix DANH MỤC CÁC TỪ VIẾT TẮT x LỜI MỞ ĐẦU CHƯƠNG GIỚI THIỆU VỀ CÔNG TY ASNET VÀ VỊ TRÍ FRONT-END 1.1 Giới thiệu tởng qt doanh nghiệp thực tập 1.2 Tởng quan vị trí việc làm CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ HTML 2.2 Ngôn ngữ CSS 12 2.3 Responsive 17 2.4 Git Github 19 CHƯƠNG TRIỂN KHAI DỰ ÁN 22 3.1 Xác định yêu cầu dự án 22 3.2 Thiết kế giao diện 22 3.3 Thư viện quản lý 23 3.4 Cài đặt công cụ hỗ trợ 25 CHƯƠNG PHÁT TRIỂN DỰ ÁN 26 4.1 Lập kế hoạch 26 4.2 Phân tích thiết kế 29 4.3 Thực 32 4.4 Kết 35 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 46 TÀI LIỆU THAM KHẢO 47 CHECK LIST CỦA BÁO CÁO 48 DANH MỤC HÌNH ẢNH Hình Logo Công ty Hình Ngơn ngữ HTML Hình Ngơn ngữ CSS 12 Hình Git 19 Hình Cơng cụ thiết kế Figma 22 Hình Tạo Repository cho dự án 23 Hình Tạo branch 24 Hình Tạo thư mục Practice01 cho nội dung HTML/ CSS 24 Hình Tạo thư mục Practice02 cho nội dung Responsive 25 Hình 10 Phần nội dung trang 29 Hình 11 Phần giới thiệu sản phẩm 30 Hình 12 Phần chức website 30 Hình 13 Phần tính báo cáo, thống kê 31 Hình 14 Phần đánh giá khách hàng 31 Hình 15 Phần cuối trang 31 Hình 16 Cấu trúc thư mục code 32 Hình 17 Định dạng code HTML 33 Hình 18 Cấu trúc file SCSS 34 Hình 19 Kết Page xây dựng HTML/ CSS 35 Hình 20 Kết hình PC 36 Hình 21 Kết điện thoại iphone XR 37 Hình 22 Kết hình Ipad mini 38 Hình 23 Kết quản hình Iphone 14pro 39 Hình 24 Kết nhiều thiết bị có kích thước khác 40 Hình 25 Kiểm tra kết với W3C Validator 41 Hình 26 Kiểm tra hình mobile với Perfect Pixel 42 Hình 27 Kiểm tra hình desktop với Perfect Pixel 43 Hình 28 Kiểm tra hình mobile với Lighthouse Extension 44 Hình 29 Kiểm tra hình desktop với Lighthouse Extension 45 DANH MỤC BẢNG BIỂU Bảng Bảng kế hoạch cho nội dung HTML/ CSS 27 Bảng Bảng kế hoạch cho nội dung Responsive 28 DANH MỤC CÁC TỪ VIẾT TẮT HTML : Hypertext Markup Language CSS : Cascading Style Sheets SASS : Syntactically Awesome StyleSheets SCSS : Sassy Cascading Style Sheets LỜI MỞ ĐẦU Mục tiêu đề tài - Đề tài nghiên cứu lập trình website, ứng dụng kiến thức học để xây dựng responsive cho landing page ứng dụng quản lý hình có kích thước phở biến - Nắm kiến thức HTML, CSS - Nắm kiến thức Responsive Đối tượng phạm vi nghiên cứu 2.1 Đối tượng nghiên cứu - Ngôn ngữ HTML - Ngôn ngữ CSS - Responsive 2.2 - Phạm vi nghiên cứu Nghiên cứu lập trình giao diện cho landing page website Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận - Mở đầu - Chương 1: Giới thiệu công ty AsNet vị trí Front-end developer - Chương 2: Cơ sở lý thuyết - Chương 3: Triển khai dự án - Chương 4: Phát triển dự án - Kết luận hướng phát triển - File code SCSS phân chia bố cục theo phân phần phân tích thiết kế Hình 18 Cấu trúc file SCSS 34 4.4 Kết 4.4.1 Mục tiêu kết đạt - Xây dựng landing page cho ứng dụng quản lý HTML/ CSS - Responsive cho landing page xây dựng mục tiêu 4.4.2 Kết đạt - Xây dựng landing page cho ứng dụng quản lý HTML/ CSS Link page: https://html-css-practice1.vercel.app/ Hình 19 Kết Page xây dựng HTML/ CSS 35 - Responsive cho landing page xây dựng nhiều hình có kích thước phở biến Link page: https://html-css-practice2.vercel.app/ o Màn hình PC (1440px) Hình 20 Kết hình PC 36 o Màn hình Iphone XR (414px) Hình 21 Kết điện thoại iphone XR 37 o Màn hình Ipad mini (768px) Hình 22 Kết hình Ipad mini 38 o Màn hình Iphone 14pro (393px) Hình 23 Kết quản hình Iphone 14pro 39 - Kết vài thiết bị có kích thước khác: Hình 24 Kết nhiều thiết bị có kích thước khác 4.4.3 Kiểm tra chất lượng sản phẩm 4.4.3.1 Công cụ kiểm tra - W3C Validator: cơng cụ hữu ích, giúp kiểm tra lỗi HTML CSS trình viết code - Perfect Pixel Extension: cơng cụ hỗ trợ hay cho designer phát triển web theo thiết kế Tiện ích đặt hình ảnh mờ chồng lên web hình, đồng thời so sánh hai ảnh để đảm bảo độ xác đến pixel - Lighthouse Extension: phần mở rộng cài đặt lên trình duyệt web Google Chorme, mục đích để đo lường tốc độ website, trải nghiệm người dùng lỗi liên quan đến SEO o Performance số đo lường hiệu suất website Chỉ số giúp cho việc đo lường website có trải nghiệm người dùng tốc độ website, ởn định giao diện có tốt khơng o Accessibility thể khả tiếp cận người dùng với website Chỉ số thể người dùng dàng tiếp cận với website bạn khơng, website bạn có gây khó hiểu code fontent thiếu thẻ khơng Dưới ví dụ thiếu thẻ HTML o Practice thể sức khỏe website, trải nghiệm người dùng mức độ an tồn website phải có HTTPS Các hình ảnh theo tỷ lệ hợp lý 40 o Đây số liên quan đến SEO (Search Engine Optimization), bạn làm SEO cho website yếu tố Technical quan trọng 4.4.3.2 Kết kiếm tra - W3C Validator: Hình 25 Kiểm tra kết với W3C Validator - Perfect Pixel Extension: o Màn hình Mobile: Kết đạt 90% so với thiết kế 41 Hình 26 Kiểm tra hình mobile với Perfect Pixel 42 o Màn hình desktop Hình 27 Kiểm tra hình desktop với Perfect Pixel 43 - Light house Extension: o Màn hình Mobile: Đạt 99% số Performance, 90% Accessibility, 95% Practice 100% số SEO Hình 28 Kiểm tra hình mobile với Lighthouse Extension 44 o Màn hình Desktop: Đạt 100% số Performance, 90% Accessibility, 95% Practice 100% số SEO Hình 29 Kiểm tra hình desktop với Lighthouse Extension 45 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN  Đạt được: - Xây dựng Responsive cho Landing Page ứng dụng quản lý HTML, CSS SCSS - Nâng cao kỹ sử dụng Git, quản lý code Github - Nâng cao khả tự học, tiếp thu kiến thức cách chủ động - Nâng cao kỹ viết email, báo cáo - Trao dồi kinh nghiệm phân tích thiết kế hệ thống  Hạn chế: - Chưa hoàn thành tiến độ với kế hoạch ban đầu - Kỹ đọc tài liệu chậm  Hướng phát triển: - Đối với đề tài “Xây dựng Responsive cho Landing page ứng dụng quản lý” thời gian tới em phát triển hướng giao diện đẹp Bên cạnh em học thêm kiến thức ReacJS để nâng cao trải nghiệm người dùng cho Page Xa áp dụng landing page để hồn chỉnh website đầy đủ Để làm điều đòi hỏi em phải nắm vững kiến thức Frontend mà cụ thể framework Reactjs với thư viện khác - Vì thời gian thực tập khơng cho phép thân em chưa nắm vững sâu kỹ thuật lập trình Front-end, kĩ kiến thức liên quan trực tiếp tới phát triển trang web dừng lại kiến thức Từ kiến thức em có đợt thực tập em mong muốn học hỏi tìm hiểu thêm Javascriptt Framework ReactJS sâu hơn., em cố gắng để hoàn thiện vốn kiến thức tương lai, nắm vững ngơn ngữ lập trình từ việc học tảng youtube kênh trực tuyến, từ nâng cao kiến thức để giúp cho đợt thực tập tốt nghiệp tới - Một lần em xin chân thành cảm ơn doanh nghiệp nhà trường khoa Thống Kê – Tin Học tạo điều kiện cho em tiếp thu kiến thức sở để bước hoàn thiện, trau dồi kỹ Web developer Front-end 46 TÀI LIỆU THAM KHẢO Jon Duckett (2011) HTML & CSS design and build websites Indianapolis, Indiana: John Wiley & Sons, Inc Phạm Minh Hướng, Mobile First CSS, Viblo, 21/02/2019, từ https://viblo.asia/p/mobile-first-css-1VgZvaxmKAw Con đường phát triển nghiệp (CAREER PATH) cho Developer, Imic, 19/08/2023, https://www.imic.edu.vn/tin-tuc-cong-nghe/30111/con-duong-phat-trien-su-nghiepcareer-path-cho-developer.html Thiết kế nhóm Bootstrap giúp đỡ người đóng góp, Breakpoints, Bootstrap, từ https://getbootstrap.com/docs/5.0/layout/breakpoints/ 47 CHECK LIST CỦA BÁO CÁO Nội dung công việc STT Báo cáo trình bày (định dạng) với yêu cầu Có x Báo cáo có số lượng trang đáp ứng yêu cầu (30-50 x trang) Báo cáo trình bày phần mở đầu bao gồm: Mục tiêu, Phạm vi đối tượng, kết x cấu … Báo cáo trình bày cơng ty, vị trí việc làm (cơng việc làm gì, kiến thức kỹ cần thiết gì, đường phát triển nghiệp (career path)), x sở lý thuyết phù hợp với nội dung đề tài (Tối đa 10-12 trang) Báo cáo có sản phẩm cụ thể phù hợp với mục tiêu đặt x đề tài Báo cáo có phần kết luận hướng phát triển đề tài x 48 Không Ghi chú