Giới thiệu VỀ Công ty TNHH công nghệ tin học viễn thông Quốc Thắng và ĐỀ TÀI Thiết kế giao diện
Giới Thiệu về công ty Công ty TNHH công nghệ tin học viễn thông Quốc Thắng
nghệ tin học viễn thông Quốc Thắng
Tổng quan về đơn vị thực tập
- Tên doanh nghiệp : công ty Công ty TNHH công nghệ tin học viễn thông Quốc Thắng
Hình 1 Logo của Công ty
- Trụ sở : 469 Hùng Vương, Phường An Sơn, TP Tam Kỳ, Quảng Nam
- Giám đốc: Lê Văn Thắng
Ngày 01 tháng 05 năm 2000, chúng tôi thành lập Doanh Nghiệp Tư Nhân Quốc Thắng.
Do nhu cầu phát triển mở rộng đến ngày 21 tháng 03 năm 2002 chuyển đổi thành:
Công Ty TNHH Công Nghệ Tin Học Viễn Thông Quốc Thắng.
Từ năm 2000 đến 2019, công ty chúng tôi đã hoạt động đa dạng trong các lĩnh vực như Công Nghệ, Tin Học Viễn Thông, hệ thống camera, chống trộm, chống cháy, thiết bị phòng họp, và các thiết bị điện, điện tử, điện máy, điện lạnh Đặc biệt, trong lĩnh vực Công Nghệ và Tin Học, chúng tôi chú trọng vào các hoạt động phát triển và cải tiến công nghệ tiên tiến.
Chúng tôi cung cấp dịch vụ thiết kế giải pháp tổng thể bao gồm thiết kế hệ thống chống sét, giải pháp phòng lab dạy học, hệ thống thiết bị phòng họp, thiết kế website, xây dựng hệ thống camera quan sát và mạng LAN, WAN Những giải pháp này được tối ưu hóa để đáp ứng nhu cầu cụ thể của từng khách hàng, đảm bảo hiệu quả và tính bền vững trong mọi ứng dụng.
- Cung cấp các thiết bị công nghệ (Thiết bị tin học, Thiết bị viễn thông, thiết bị chống sét, thiết bị an ninh…).
- Cung cấp các thiết bị văn phòng (Máy Photocopy, máy chiếu, máy in, máy scan …).
- Cung cấp mua bán linh kiện ,thiết bị điện, điện tử , điện máy, điện lạnh, điện gia dụng…
Chúng tôi chuyên cung cấp và lắp đặt các hệ thống âm thanh hội nghị, mạng LAN, thiết bị phòng họp, cũng như các thiết bị điện, điện tử, điện máy và điện lạnh Ngoài ra, chúng tôi còn cung cấp hệ thống báo trộm, báo cháy, camera giám sát, cùng với các giải pháp tin học, viễn thông và thiết bị công nghệ cao cho văn phòng.
- Cung cấp các thiết bị về hội nghị truyền hình (Zeisic, Ever, Evaya, polycom, Scopia, Sony, Panasonic, …)
- Cung cấp các đồ dùng khác cho gia đình (Bàn làm việc, ghế, gường nằm, rèm, màn …).
- Cung cấp phần mềm của các hãng trên thế giới, các phần mềm quản lý, truyền thông
- Tư vấn và đào tạo cho khách hàng
- Các dịch vụ bảo hành, bảo trì
Qua thời gian hoạt động, công ty chúng tôi đã xây dựng được uy tín và niềm tin vững chắc từ khách hàng, điều này đã góp phần vào sự phát triển mạnh mẽ của công ty trong nhiều lĩnh vực.
Tầm nhìn , sứ mệnh
Sứ mệnh của chúng tôi là phát triển dịch vụ cung cấp thiết bị công nghệ thông tin và thiết bị an ninh nhằm thay đổi ngành kinh tế Chúng tôi cam kết giúp khách hàng thực hiện công việc theo phương thức mới, từ đó nâng cao năng suất và hiệu quả công việc theo hướng tích cực.
Quốc Thắng hướng tới việc trở thành công ty hàng đầu tại tỉnh Quảng Nam và các tỉnh lân cận thông qua sự sáng tạo trong khoa học, công nghệ và đổi mới quản trị, cung cấp nền tảng, thiết bị và dịch vụ được sử dụng rộng rãi.
Cơ cấu tổ chức
1.2 Giới thiệu tổng quan về dựng án “Thiết kế giao diện website bán hàng công nghệ”
Giới thiệu về dự án
Dự án xây dựng giao diện website bán hàng công nghệ đóng vai trò quan trọng trong việc tăng doanh thu cho doanh nghiệp và mở rộng khả năng tiếp cận khách hàng Việc thiết kế một website bán hàng công nghệ đẹp mắt và hấp dẫn không chỉ thu hút người tiêu dùng mà còn nâng cao trải nghiệm mua sắm trực tuyến.
Xây dựng một website bán hàng công nghệ chuyên nghiệp không chỉ giúp khách hàng dễ dàng tìm kiếm thông tin và thực hiện giao dịch mua sắm, mà còn bảo vệ thông tin cá nhân của họ Điều này góp phần quan trọng vào việc xây dựng thương hiệu và tạo dựng lòng tin với khách hàng, từ đó nâng cao uy tín cho doanh nghiệp.
Hình 2 Cơ Cấu Tổi chức
Tổng quan về ngành nghề Frond-End và Cơ sở lý thuyết nghiên cứu phát triển đề tài
Tổng Quan về Ngành Nghề Frond-End
2.1.1 Mô Tả Ngành Nghề Frond-end
Phát triển giao diện người dùng (front-end development) là một lĩnh vực trong công nghệ thông tin, chuyên về việc tạo ra các giao diện cho ứng dụng web và di động Những chuyên gia trong lĩnh vực này được gọi là nhà phát triển front-end hoặc kỹ sư front-end.
Các nhà phát triển front-end chịu trách nhiệm tạo ra giao diện người dùng hấp dẫn và dễ sử dụng cho trang web và ứng dụng di động Họ xây dựng cấu trúc và thiết kế, đồng thời triển khai các thành phần giao diện như trang web, nút bấm, thanh điều hướng, biểu đồ, biểu mẫu nhập liệu và các yếu tố tương tác khác.
2.1.2 Những tài liệu mà FE cần thực hiện
2.1.3 Các kỹ năng FE cần có Để trở thành một nhà phát triển Front-End thành công, các kỹ năng Frond- End cần có là:
HTML (Ngôn ngữ Đánh dấu Siêu văn bản) là ngôn ngữ cơ bản để tạo cấu trúc và định dạng các trang web Việc nắm vững cú pháp HTML và các thẻ cơ bản như ,
,
- ,
- , và là rất quan trọng cho bất kỳ nhà phát triển web nào.
CSS (Cascading Style Sheets) là công cụ quan trọng để định dạng và trình bày trang web Để sử dụng hiệu quả CSS, bạn cần hiểu rõ về các khái niệm như lớp, ID, bảng điều khiển, đơn vị đo, và các thuộc tính CSS bao gồm màu sắc, phông chữ, kích thước, định vị và hiệu ứng.
JavaScript là ngôn ngữ lập trình client-side quan trọng nhất mà bạn cần nắm vững Để thành thạo JavaScript, bạn nên hiểu rõ cú pháp, các cấu trúc điều khiển như câu lệnh điều kiện và vòng lặp, cũng như các khái niệm cơ bản như biến, hàm, sự kiện và AJAX (Asynchronous JavaScript and XML).
Hiểu và sử dụng các framework và thư viện phổ biến như React, Angular, hoặc Vue.js là rất quan trọng để tăng tốc độ phát triển và cải thiện cấu trúc dự án Việc làm quen với cách tích hợp chúng vào dự án của bạn sẽ giúp nâng cao hiệu quả công việc.
- Công cụ và trình duyệt: Sử dụng một trình duyệt web phổ biến nhưGoogle Chrome hoặc Mozilla Firefox để kiểm tra và gỡ lỗi trang web.
Hiểu rõ về thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) là yếu tố quan trọng để tạo ra các trang web hấp dẫn và dễ sử dụng Nắm bắt các nguyên tắc thiết kế, khả năng tương tác, cùng với các phương pháp thử nghiệm và thu thập phản hồi sẽ giúp cải thiện chất lượng trang web của bạn.
Cớ Sở Lý Thuyết
HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, bao gồm việc phân chia đoạn văn, tiêu đề, liên kết và trích dẫn.
HTML không phải là ngôn ngữ lập trình, do đó không thể tạo ra các chức năng động Nó tương tự như Microsoft Word, được sử dụng để bố cục và định dạng trang web.
- Khái niệm phần tử và thuộc tính trong HTML
Trên một trang web, mọi nội dung đều có thể coi là phần tử, bao gồm đoạn văn bản, trình phát audio và hình ảnh.
● Một phần tử HTML thường được xác định dựa trên ba thành phần:
● Nội dung nằm bên trong cặp thẻ (hay còn được gọi là nội dung của phần tử).
● Trong ngôn ngữ HTML, thuộc tính có thể tạm hiểu là một loại thông tin nào đó liên quan đến phần tử.
● Mỗi thuộc tính sẽ được đại diện bởi một từ khóa bằng tiếng anh, ví dụ:
● Thuộc tính width dùng để nói đến chiều rộng của phần tử.
● Thuộc tính height dùng để nói đến chiều cao của phần tử.
● Thuộc tính target dùng để nói đến nơi mà tài liệu sẽ được mở khi người dùng nhấp vào liên kết.
Thuộc tính ID và Class trong HTML
Trong HTML, thuộc tính id và class được sử dụng để phân loại các phần tử, giúp quản lý và định dạng chúng một cách dễ dàng hơn.
Để khai báo ID cho một phần tử, bạn chỉ cần thêm thuộc tính id vào thẻ mở của phần tử với cú pháp id="tên id" Sau khi khai báo, để định dạng phần tử, bạn chỉ cần sử dụng tên ID với cú pháp #tên id.
Thuộc tính class tương tự như thuộc tính id trong việc đặt tên cho các phần tử, nhưng điểm khác biệt là một tên class có thể được áp dụng cho nhiều phần tử khác nhau.
Để khai báo class cho một phần tử, bạn cần thêm thuộc tính class vào thẻ mở của phần tử với cú pháp class="tên class" Sau khi khai báo class, để định dạng cho phần tử, bạn chỉ cần gọi tên class đó với cú pháp tên class.
Thuộc tính Style trong HTML
- Chức năng của thuộc tính style là dùng để thiết lập việc định dạng cho một phần tử HTML.
Để áp dụng thuộc tính style, bạn cần đặt nó bên trong thẻ mở của phần tử muốn định dạng, sử dụng cú pháp: style="property:value".
2.2.2 Lý thuyết về CSS module
- Giới thiệu về CSS module
HÌNH 2,2 NGÔN NGỮ CSS MODULE
CSS Module là một phương pháp hiệu quả để quản lý mã CSS trong các dự án phức tạp, cho phép tạo ra các module CSS độc lập và có thể tái sử dụng Phương pháp này không chỉ giảm thiểu xung đột trong mã mà còn nâng cao tính tổ chức và khả năng bảo trì của dự án.
CSS Module cho phép tạo ra các module CSS độc lập với tên và phạm vi riêng, giúp mã CSS chỉ áp dụng cho module đó mà không ảnh hưởng đến các phần khác của trang web Điều này giúp ngăn chặn xung đột và ghi đè CSS không mong muốn, nâng cao tính tổ chức và khả năng bảo trì của mã.
Mỗi module trong CSS Module đi kèm với một tệp tin CSS riêng, nơi các lớp và quy tắc được đặt tên một cách độc nhất Tên các lớp và quy tắc này sẽ được biên dịch tự động thành các tên duy nhất, nhằm đảm bảo tính không trùng lặp.
Khi áp dụng CSS Module, bạn có thể tận dụng các tên lớp CSS tự động được sinh ra trong mã HTML hoặc JavaScript Việc sử dụng các tên lớp này giúp bạn dễ dàng và chính xác trong việc áp dụng quy tắc CSS cho các phần tử.
CSS Module mang lại sự rõ ràng và dễ bảo trì cho việc quản lý mã CSS trong các dự án lớn Nó giảm thiểu xung đột và lỗi trong CSS, đồng thời tạo ra sự phân tách rõ ràng giữa các module, từ đó nâng cao khả năng mở rộng của mã CSS.
- Các Thuộc Tính Của CSS module
CSS Module không có thuộc tính riêng biệt so với CSS thông thường; nó tập trung vào việc tổ chức và quản lý mã CSS mà không định nghĩa các thuộc tính mới Bạn có thể sử dụng tất cả các thuộc tính CSS thông thường trong CSS Module, bao gồm display để xác định cách phần tử hiển thị (như block, inline, flex), position để xác định vị trí của phần tử (như static, relative, absolute), và width cùng height để định nghĩa kích thước của phần tử (như width: 200px, height: 100%) Ngoài ra, margin và padding được sử dụng để điều chỉnh khoảng cách xung quanh và bên trong phần tử (ví dụ: margin: 10px, padding: 20px), trong khi background định nghĩa hình nền cho phần tử (như background-color, background-image) Cuối cùng, color và font được sử dụng để xác định màu sắc và kiểu chữ cho nội dung của phần tử.
CSS properties such as color, font-size, and font-family define the visual style of elements, with examples including color: red, font-size: 16px, and font-family: Arial, sans-serif The border property specifies the outline around an element, with attributes like border-width, border-color, and border-radius Effects like box-shadow and text-shadow create shadow effects for elements and text, illustrated by box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) Transition and animation properties enable motion effects and animations, as shown in transition: width 0.3s ease and animation: slide-in 1s infinite Lastly, the overflow property determines how to handle content that exceeds an element's size, with options like overflow: hidden and overflow-y: scroll.
TRIỂN KHAI DỰ ÁN “Thiết kế giao diện
Khảo sát thông tin 1 Khảo sát và đánh giá hiện trạng hoạt động của các hệ thống hiện có
3.1.1 Khảo sát và đánh giá hiện trạng hoạt động của các hệ thống hiện có:
Trong bối cảnh công nghệ thông tin phát triển mạnh mẽ, các hệ thống IT đóng vai trò thiết yếu trong hoạt động của doanh nghiệp và tổ chức Để nâng cao hiệu quả và đáp ứng nhu cầu ngày càng tăng của ngành IT, việc khảo sát và đánh giá hiện trạng hoạt động của các hệ thống hiện có là rất quan trọng Bài viết này sẽ cung cấp một mẫu quy trình khảo sát và đánh giá nhằm đưa ra những nhận định và giải pháp cải thiện phù hợp.
Đối với doanh nghiệp, việc thể hiện hiệu quả trong các chiến dịch quảng cáo trả tiền là rất quan trọng, giúp thúc đẩy khách hàng đưa ra quyết định mua hàng và tăng tỷ lệ chuyển đổi.
● Hiệu quả thu hút khách hàng mạnh mẽ.
● Giúp gia tăng tỷ lệ chuyển đổi, tăng doanh số bán hàng hiệu quả.
● Nâng cao nhận thức về thương hiệu.
● Chi phí đầu tư phù hợp.
● Có cơ hội tạo nên một thương hiệu tốt, đỉnh cao với khách hàng thông qua Internet.
Nhiều doanh nghiệp không chuyên về thiết kế website thường phải thuê các công ty bên ngoài để phát triển trang web của mình, điều này có thể ảnh hưởng đến hiệu quả vận hành và trải nghiệm sử dụng website.
Tính bảo mật là mối quan tâm hàng đầu của nhiều doanh nghiệp khi quyết định thuê ngoài dịch vụ Họ lo ngại về việc thông tin nhạy cảm có thể bị lộ ra ngoài, và đặc biệt là nguy cơ mất website, điều này sẽ ảnh hưởng nghiêm trọng đến những nỗ lực xây dựng và phát triển của họ.
Hình 7 Công cụ Visual studio Code
VS Code (Visual Studio Code) là một trình biên tập mã nguồn mở miễn phí do Microsoft phát triển, hỗ trợ phát triển ứng dụng và mã nguồn trên nhiều nền tảng như Windows, macOS.
VS Code có nhiều tính năng hữu ích cho các nhà phát triển, bao gồm
VS Code là một trình biên tập mã đa chức năng, cung cấp các tính năng thông minh như kiểm tra lỗi cú pháp, gợi ý mã và tô màu cú pháp, giúp nâng cao năng suất viết mã cho lập trình viên.
VS Code hỗ trợ nhiều ngôn ngữ lập trình phổ biến như JavaScript, TypeScript, Python, C++, Java, Go và PHP Nó cung cấp tính năng hỗ trợ đa ngôn ngữ, cú pháp mở rộng và tích hợp hiệu quả với các công cụ phát triển thông dụng.
VS Code cung cấp tính năng gỡ lỗi tích hợp cho nhiều ngôn ngữ lập trình, giúp nhà phát triển theo dõi và sửa lỗi trong mã nguồn hiệu quả Ngoài ra, công cụ này còn cho phép điều hướng nhanh chóng giữa các tệp và các khai báo trong mã, nâng cao hiệu suất làm việc của lập trình viên.
- Hỗ trợ mở rộng: VS Code cho phép cài đặt các tiện ích mở rộng
Tiện ích mở rộng từ cộng đồng người dùng mang đến các chức năng bổ sung, tích hợp với các công cụ và framework phổ biến, giúp nâng cao khả năng và tùy chỉnh cho trình biên tập.
VS Code tích hợp mạnh mẽ với Git, cho phép các nhà phát triển dễ dàng quản lý repository, theo dõi lịch sử thay đổi, cũng như thực hiện các thao tác so sánh và hợp nhất mã nguồn hiệu quả.
VS Code mang đến khả năng cấu hình linh hoạt, cho phép người dùng tùy chỉnh giao diện, thiết lập phím tắt, kiểm tra văn bản (linting) và nhiều tính năng khác để đáp ứng nhu cầu và sở thích cá nhân của họ.
Thiết kế giao diện
- Lựa chọn công cụ lập trình
- Lựa chọn các ngôn ngữ lâp trình
Kết quả của dự án
Giao Diện Trang Products
Hình 10 Giao Diện Trang Products
Hình 11 Giao diện trang Product Detail
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Kết quả đạt được trong kỳ thực tập
Trong quá trình thực tập, em đã học hỏi và tìm hiểu sâu về các ngôn ngữ lập trình web như HTML, CSS, JavaScript và NextJS Những kiến thức này đã giúp em nâng cao kỹ năng và chuẩn bị tốt hơn cho công việc trong tương lai.
Nhờ sự hỗ trợ tận tình từ mentor và GVHD, tôi đã hoàn thành xuất sắc đợt thực tập với những kiến thức cơ bản về lập trình website Bên cạnh đó, tôi đã áp dụng các kiến thức đã học để hoàn thành đề tài của mình, đồng thời tự tin có thể xây dựng một website trong tương lai.
Kết luận và hướng phát triển về giải pháp
Trong đợt thực tập vừa qua, tôi đã tiếp thu được những kiến thức cơ bản về ngôn ngữ lập trình website Những kiến thức này đã giúp tôi xây dựng nền tảng vững chắc và tích lũy kinh nghiệm quý báu cho hành trang thực tập tốt nghiệp sắp tới.
Trong thời gian tới, tôi sẽ nỗ lực học hỏi thêm kiến thức để cải thiện giao diện website bán hàng công nghệ, giúp tìm kiếm khách hàng tiềm năng cho doanh nghiệp Hiện tại, do thời gian thực tập hạn chế, tôi chưa nắm vững các kỹ thuật lập trình front end và kiến thức phát triển trang web chỉ dừng lại ở mức cơ bản Tôi sẽ tận dụng những kiến thức đã học được trong đợt thực tập này để nâng cao kỹ năng, tìm hiểu sâu hơn về các ngôn ngữ lập trình thông qua các nền tảng trực tuyến như YouTube, nhằm chuẩn bị tốt cho đợt thực tập tốt nghiệp sắp tới.