PCC5 — Website hai thứ tiếng cho công ty xây lắp điện
PCC5 xây lắp đường dây và trạm biến áp đến 500kV, thi công nhà máy điện mặt trời và móng tuabin điện gió. Chúng tôi thiết kế giao diện và lập trình toàn bộ site hai thứ tiếng của công ty: bản tiếng Anh có đường dẫn và nội dung riêng, dự án lọc theo năm nhóm công trình, lịch sử phát triển kể theo từng năm.
Khách hàng
Công ty Cổ phần Xây lắp điện 5 (PCC5) thi công đường dây và trạm biến áp đến 500kV, ngầm hóa đường dây 110kV trở lên, nhà máy điện mặt trời và móng tuabin điện gió. Công ty còn nhận thí nghiệm, hiệu chỉnh thiết bị điện và cung cấp vật tư, thiết bị ngành điện. Khách hàng của PCC5 gồm nhiều chủ đầu tư và tổng thầu trong và ngoài nước.
Bài toán
PCC5 cần một site chứa được nhiều loại nội dung: bảy lĩnh vực hoạt động, các dự án thuộc năm nhóm công trình, lịch sử phát triển của công ty, bằng khen và chứng nhận. Tin của công ty cũng chia bốn nhóm là tin nội bộ, tin ngành điện, tin hoạt động công đoàn và tin tuyển dụng. Các mục chính cần có cả bản tiếng Việt và bản tiếng Anh, mỗi bản có địa chỉ riêng.
Cách giải
Chúng tôi làm trọn website này, từ thiết kế giao diện đến lập trình chức năng. Site có hai thứ tiếng: bản tiếng Việt nằm ở địa chỉ gốc, bản tiếng Anh nằm dưới /en với đường dẫn viết bằng tiếng Anh, và nội dung tiếng Anh được nhập riêng. Trang chủ mở bằng một video chạy nền không tiếng; bấm Xem video thì video đó mở trong khung nổi. Ngay dưới video có một dải chữ chạy để công ty đăng thông báo ngắn, bản tiếng Việt và bản tiếng Anh mỗi bản một nội dung. Tiếp theo là đoạn giới thiệu công ty, bảy ô lĩnh vực hoạt động có ảnh và biểu tượng riêng, dải ảnh dự án trượt ngang, dải logo đối tác và bốn tin mới nhất.
Mục Dự án lọc theo năm nhóm công trình, mỗi dự án có trang riêng gồm tên dự án và loạt ảnh công trình xếp dọc. Phần Giới thiệu tách thành các trang con: số liệu và thành tựu của công ty, lịch sử phát triển, tầm nhìn và giá trị cốt lõi, sơ đồ tổ chức. Bằng khen, giấy khen và chứng nhận xếp thành một bộ ảnh, bấm vào tấm nào thì tấm đó phóng to. Trang tin có nút chia sẻ lên Facebook, LinkedIn, X và nút sao chép link. Trên điện thoại, menu thu vào nút ba gạch và các ô lĩnh vực xếp thành một cột.
Điểm đặc biệt
-
Hai thứ tiếng, mỗi thứ tiếng một bộ đường dẫn: bản tiếng Anh có đường dẫn tiếng Anh (/en/about, /en/project/…, /en/news/…) và nội dung nhập riêng; trang dự án chưa có bản tiếng Anh thì nút EN đưa về danh sách dự án tiếng Anh
-
Dự án theo năm nhóm công trình: Dầu khí, Nhiệt điện, Năng lượng tái tạo, Đường dây truyền tải điện, Trạm biến áp; thẻ dự án là ảnh công trình, trang dự án là một cột ảnh lớn
-
Lịch sử phát triển theo năm: mỗi mốc là một năm, ghi việc chính của năm đó kèm một ảnh; các mốc chia vào bốn giai đoạn để bấm chuyển
-
Số liệu đếm lên khi cuộn tới: trang Kỷ nguyên mới có bốn con số của công ty (nhân sự chủ chốt, nhân sự huy động tại dự án, dự án đã hoàn thành, giá trị đã thực hiện), số chạy lên khi người xem cuộn tới; chữ và ảnh trên các trang cũng hiện dần theo nhịp cuộn
Công nghệ
- Bootstrap
- GSAP cho hiệu ứng cuộn
- song ngữ Việt – Anh
- ảnh WebP
Vì sao đáng kể
Đây là site của một nhà thầu đã thi công nhiều công trình điện lớn, và công ty vẫn đưa tin lên site khi công trình đóng điện, như trạm biến áp hay tuyến cáp ngầm.
