Bối cảnh và vấn đề nghiên cứu

Khóa luận tốt nghiệp của tác giả Trần Thanh Quang (ngành Hệ thống thông tin / Thương mại điện tử, dưới sự hướng dẫn của ThS Nguyễn Thị Hội) đặt trong bối cảnh thị trường thiết bị di động thông minh giai đoạn 2011–2012 tại Việt Nam chứng kiến sự gia tăng mạnh mẽ của các dòng smartphone sử dụng hệ điều hành Android, iOS và Windows Phone. Việc triển khai hạ tầng mạng 3G tạo điều kiện cho người dùng, đặc biệt là học sinh, sinh viên, thường xuyên truy cập Internet, mạng xã hội và tra cứu thông tin trực tiếp trên điện thoại di động.

Trước xu hướng này, các đơn vị giáo dục và doanh nghiệp đứng trước nhu cầu tối ưu hóa giao diện trang web trên màn hình kích thước nhỏ. Tác giả chỉ ra rằng các giải pháp truyền thống gồm phát triển một phần mềm ứng dụng di động riêng biệt hoặc xây dựng một trang web độc lập chạy trên tên miền phụ (sub-domain như mobile.domain.com). Tuy nhiên, các phương án trên đòi hỏi chi phí đầu tư lớn, tốn kém nhân lực duy trì song song hai hệ thống mã nguồn, chỉ phù hợp với những tập đoàn lớn có tiềm lực tài chính. Do đó, việc ứng dụng kỹ thuật thiết kế web đáp ứng (Responsive Web Design) kết hợp với hệ quản trị nội dung mã nguồn mở WordPress là hướng đi thực tế nhằm tiết kiệm chi phí mà vẫn đảm bảo tính tương thích đa nền tảng.

Mục tiêu nghiên cứu của đề tài được tác giả xác định cụ thể qua 3 nhiệm vụ:

  1. Hình thành cơ sở lý luận về website, chức năng hiển thị trên điện thoại di động và các công cụ hỗ trợ quá trình hiển thị trên thiết bị di động.
  2. Nghiên cứu, khảo sát và đánh giá thực trạng cấu trúc, chức năng và hiệu năng website của FPT Polytechnic Việt Nam.
  3. Hoàn thiện chức năng hiển thị nội dung số trên điện thoại di động cho website của FPT Polytechnic thông qua việc tái cấu trúc giao diện và ứng dụng công cụ WordPress kết hợp Twitter Bootstrap.

Đối tượng nghiên cứu của khóa luận là hệ thống website FPT Polytechnic Việt Nam, chức năng hiển thị nội dung số trên điện thoại di động và hệ thống mã nguồn mở WordPress.

Phạm vi nghiên cứu tập trung vào website FPT Polytechnic (thành lập từ tháng 8/2010), các tài liệu kỹ thuật liên quan, cùng nguồn dữ liệu do cán bộ chuyên trách thuộc phòng Hệ thống thông tin của FPT Polytechnic cung cấp, khảo sát nội bộ và tài liệu thu thập từ Internet.

Cơ sở lý thuyết và phương pháp nghiên cứu

Khóa luận xây dựng hệ thống cơ sở lý thuyết dựa trên các khái niệm nền tảng về trang web và hệ quản trị nội dung. Tác giả phân loại website theo cấu trúc dữ liệu (web tĩnh và web động), theo hệ thống nội dung (website cung cấp thông tin, website cung cấp sản phẩm/dịch vụ) và theo mức độ tương tác người dùng (Web 1.0, Web 2.0, Web 3.0). Đối với hiển thị trên thiết bị di động, cơ sở lý thuyết nhấn mạnh yêu cầu chuyển đổi cấu trúc giao diện nhiều cột sang bố cục một cột đơn (single column) để người dùng chỉ cần cuộn trang theo chiều dọc, đồng thời cắt giảm mã nguồn, loại bỏ hiệu ứng Flash và tinh giản các thanh bên (sidebar), chân trang (footer).

Hệ thống công cụ công nghệ được tác giả phân tích và áp dụng bao gồm:

  • WordPress: Hệ quản trị nội dung mã nguồn mở xây dựng trên nền tảng ngôn ngữ PHP và cơ sở dữ liệu MySQL. Tác giả lựa chọn WordPress thay vì Drupal dựa trên việc đối chiếu với công trình của Nguyễn Thị Thanh Tâm (2010) tại Trường Đại học Công nghệ. Nghiên cứu chỉ ra Drupal khó sử dụng với người mới, hệ thống menu phức tạp, ít tiện ích mở rộng (extensions) và đòi hỏi thời gian nâng cấp tương thích lâu, trong khi WordPress dễ triển khai, kho plugin phong phú (khoảng 90% miễn phí) và có khả năng tích hợp sẵn chế độ hiển thị di động.
  • CSS và CSS3: Công cụ định dạng giao diện tách rời nội dung HTML, giảm tải dung lượng mã lệnh trang web.
  • jQuery Mobile: Khung công tác phát triển giao diện người dùng web hỗ trợ thao tác cảm ứng, xây dựng trên lõi jQuery, cung cấp khả năng xử lý DOM, Ajax và hiệu ứng đồ họa với kích thước tệp nén khoảng 12KB.
  • Twitter Bootstrap: Bộ khung công tác giao diện cung cấp hệ thống lưới (grid system) 12 cột cố định (940px) và dạng linh hoạt (Fluid), hỗ trợ màn hình độ phân giải cao Retina cùng các lớp định kiểu cho typography, forms, buttons, tables và navigation.
  • Balsamiq Mockups: Phần mềm thiết kế bản vẽ phác thảo bố cục (wireframe) thô cho giao diện người dùng.
  • Adobe Photoshop CS5: Phần mềm đồ họa phục vụ thiết kế giao diện chi tiết dạng ảnh bitmap trước khi lập trình giao diện.

Về phương pháp nghiên cứu, đề tài kết hợp phương pháp thu thập dữ liệu sơ cấp và dữ liệu thứ cấp:

  • Dữ liệu sơ cấp: Thu thập thông qua phỏng vấn cá nhân trực tiếp (personal interviews) cán bộ chuyên trách; phát phiếu điều tra khảo sát ý kiến nhân viên trong công ty về cấu trúc, chất lượng, tốc độ và nhu cầu nâng cấp website; khảo sát thực nghiệm các thông số kỹ thuật qua công cụ trực tuyến.
  • Dữ liệu thứ cấp: Kế thừa số liệu báo cáo đào tạo, thông tin chi phí từ phòng kế toán của FPT Polytechnic; tổng hợp tài liệu chuyên ngành như cuốn sách "WordPress 3 Complete" của April Hodge Silver (2011), nghiên cứu luận văn của Nguyễn Thị Thanh Tâm (2010), cùng các bài giảng chuyên ngành Quản trị tác nghiệp TMĐT và Thiết kế triển khai web của Trường Đại học Thương Mại.
  • Phương pháp xử lý dữ liệu: Áp dụng phương pháp phân tích và tổng hợp để xử lý kết quả điều tra thống kê qua phần mềm Excel, bóc tách các mặt định tính và định lượng nhằm xác định nguyên nhân tồn tại của hệ thống.

Thiết kế và triển khai giao diện di động

Khóa luận thuộc dạng đề tài xây dựng giải pháp kỹ thuật kết hợp thiết kế đồ họa giao diện, trong đó quy trình hoàn thiện chức năng hiển thị trên thiết bị di động được tác giả thực hiện qua 4 giai đoạn cụ thể:

1. Phân định và xử lý các thành phần giao diện máy tính (PC)

Từ giao diện gốc trên máy tính của website FPT Polytechnic, tác giả thực hiện phân tích 9 phân vùng chức năng và đưa ra phương án xử lý trên màn hình di động:

Số thứ tự Tên thành phần giao diện Trạng thái xử lý Rationale kỹ thuật
Vùng 1 Tin nổi bật Loại bỏ Tránh làm loãng không gian hiển thị, giúp người dùng tập trung
Vùng 2 Ô tìm kiếm Loại bỏ Tiết kiệm diện tích màn hình trên thiết bị di động
Vùng 3 Ô tư vấn trực tuyến Loại bỏ Sử dụng tiện ích bên ngoài (Yahoo Pingbox), thiết bị di động không hỗ trợ tốt
Vùng 4 Ảnh nền thay đổi được Loại bỏ Dung lượng lớn, tốn băng thông và làm chậm tốc độ tải trang
Vùng 5 Chú thích cho ảnh nền Loại bỏ Đi kèm ảnh nền, gây rối mắt
Vùng 6 Ô quảng cáo (Flash) Loại bỏ Sử dụng Flash chiếm nhiều tài nguyên CPU, không hỗ trợ trên di động
Vùng 7 Menu chính Chuyển đổi Chuyển từ dạng menu ngang sang menu dọc dạng thả xuống (dropdown)
Vùng 8 Menu phụ / Đăng ký trực tuyến Chuyển đổi Chuyển từ cấu trúc ngang sang khối dọc để hiển thị đủ thông tin
Vùng 9 Thư viện ảnh Rút gọn Thu nhỏ kích thước ảnh và cắt bớt số lượng hiển thị

2. Thiết kế phác thảo Wireframe và đồ họa chi tiết

  • Phác thảo bằng Balsamiq Mockups: Thiết lập bố cục khung dạng 1 cột, bố trí tuần tự: Header (Logo và nút điều hướng) -> Featured Box -> Khối Tin tức -> Góc nhìn Poly -> Sự kiện -> Thư viện ảnh -> Footer.
  • Thiết kế đồ họa trên Adobe Photoshop CS5:
    • Khởi tạo tệp tin có kích thước chiều rộng 320px, chiều cao 2000px, độ phân giải 72 ppi.
    • Phân chia 8 nhóm lớp (Layer Groups): Header, Featured, News, Testimonials, Events, Gallery, Ads, Footer.
    • Thiết lập thông số chi tiết: Khối Header sử dụng phông chữ Arial, thanh Top Menu có màu nền #000 và liên kết màu #fff, khoảng cách tối thiểu giữa logo và các phần tử xung quanh bằng 1/2 kích thước logo. Khối Featured gồm các đề mục kích thước 320x100px, nền #999, chữ #fff, kích thước ảnh minh họa 60x60px. Khối tin tức có kích thước 320x460px, ảnh đại diện 300x150px, tiêu đề mục chữ đậm 16px màu #21759B, tiêu đề bài viết đầu 16px màu #000, phần trích dẫn (excerpt) 12px màu #333, các bài viết tiếp theo 11px màu #4c4c4c với dấu đầu dòng màu #c00. Khối sự kiện sử dụng màu nền #FE3905, chữ màu #fff, phần ghi ngày màu #000, tiêu đề in hoa 16px, đường kẻ phân cách 1px màu #FF5807. Khối thư viện ảnh gồm các ảnh kích thước 100x80px, khoảng đệm giữa ảnh và đường viền 4px, bo góc 4px, viền màu #ddd, nhãn văn bản 13px màu #333. Khối Footer sử dụng họa tiết nền (pattern) màu đậm, chữ #fff, liên kết màu #FFB3B3 và tích hợp các biểu tượng Google Plus, Facebook.

3. Tích hợp mã nguồn WordPress và Twitter Bootstrap

  • Triển khai cơ chế hiển thị thích ứng bằng cách gán lớp CSS visible-phone cho các thành phần chỉ xuất hiện trên thiết bị di động, và gán lớp hidden-phone cho các thành phần loại bỏ không hiển thị trên di động.
  • Viết truy vấn Media Queries trong tệp CSS để tác động trực tiếp lên các phần tử có kích thước cố định.
  • Sử dụng phương thức $(window).width() trong thư viện JavaScript để đo kích thước màn hình trình duyệt và kích hoạt sự kiện $(window).resize() nhằm tự động nhận diện và thay đổi cách trình bày khi khung nhìn thay đổi.

4. Tối ưu hóa hiệu năng và nén dữ liệu

  • Áp dụng kỹ thuật tải nội dung khi cuộn tới vị trí hiển thị (Lazy load) thông qua plugin BJ Lazyload nhằm giảm thiểu số lượng tài nguyên truyền tải trong lần tải đầu tiên.
  • Tối ưu hóa kích thước hình ảnh thông qua công cụ nén ảnh không mất dữ liệu (lossless compress) của Google, tiện ích timthumb hoặc các chức năng cắt ảnh mặc định của WordPress.

Nội dung chính theo từng phần của khóa luận

Phần 1: Tổng quan vấn đề nghiên cứu

Phần mở đầu tập trung làm rõ tầm quan trọng và tính cấp thiết của việc xây dựng phiên bản web di động trong thời kỳ công nghệ di động và mạng 3G phát triển tại Việt Nam. Tác giả tổng hợp, so sánh hai tài liệu nghiên cứu làm nền tảng trực tiếp: luận văn về website phiên bản tiếng Anh cho trường Đại học Công nghệ sử dụng Drupal của Nguyễn Thị Thanh Tâm (2010) và tài liệu kỹ thuật "WordPress 3 Complete" của April Hodge Silver (2011). Qua đó, tác giả chỉ ra các điểm yếu của hệ quản trị Drupal về mặt quản lý giao diện, mức độ thân thiện với người dùng và tính sẵn có của các thành phần mở rộng, làm căn cứ chuyển hướng sang lựa chọn WordPress. Phần này cũng trình bày mục tiêu, đối tượng, phạm vi nghiên cứu cùng chi tiết các phương pháp thu thập và xử lý dữ liệu sơ cấp, thứ cấp.

Phần 2: Cơ sở lý luận và thực trạng website của website FPT Polytechnic Việt Nam

Chương này chia làm hai nội dung lớn:

  • Cơ sở lý luận: Định nghĩa cấu trúc website, phân loại web tĩnh, web động, các thế hệ Web 1.0 đến Web 3.0; định nghĩa giao diện website di động; phân tích tính năng của WordPress, CSS, jQuery Mobile, Twitter Bootstrap, Balsamiq Mockups và Photoshop.
  • Khảo sát và đánh giá thực trạng: Giới thiệu tổ chức FPT Polytechnic (thành lập ngày 28/8/2010, đào tạo 2 năm với 2 khối ngành CNTT và Kinh tế - Kinh doanh, quy mô từ 500 sinh viên năm 2010 tăng lên khoảng 1.800 sinh viên tại 6 cơ sở: Hà Nội, Đà Nẵng, TP.HCM, Quảng Ninh, Thanh Hóa, Đắk Lắk). Đánh giá kỹ thuật website qua công cụ SEO Worker cho thấy điểm PageRank đạt 4, thứ hạng Alexa toàn cầu là 362.679, thứ hạng Alexa Việt Nam là 2.557; trang chưa có thẻ Meta Keywords và Meta Robots. Kiểm tra hiệu năng bằng PageSpeed và YSlow ghi nhận tổng điểm tốc độ đạt 83/100, tồn tại các vấn đề ưu tiên cao như lưu bộ nhớ cache trình duyệt, nén tài nguyên, tối ưu hóa ảnh và kích hoạt Keep-Alive.

Về mặt dữ liệu sơ cấp, tác giả xử lý kết quả phiếu điều tra nội bộ, cung cấp các số liệu thực tế:

Tiêu chí khảo sát Số liệu / Tỷ lệ ghi nhận trong văn bản
Chi phí xây dựng ban đầu 40 triệu đồng
Chi phí duy trì website 15 triệu đồng
Chi phí quảng cáo marketing trực tuyến 50 triệu đồng
Nhân sự quản trị website 4 người (chiếm 13,33% tổng số nhân viên)
Ý kiến về số lượng nhân sự quản trị 86,67% (làm tròn 87%) đánh giá chưa hợp lý; 13,33% đánh giá hợp lý
Chất lượng thông tin website 40% Tốt; 33,33% Bình thường; 26,67% Rất tốt
Cách sắp xếp, phân bố thông tin 53,33% Bình thường (biểu đồ ghi nhận: 49% Chưa hợp lý, 36% Hợp lý, 15% Bình thường)
Tốc độ tải trang website 53,33% Bình thường (biểu đồ thể hiện: 60% Bình thường, 30% Chậm, 9% Nhanh)
Đề xuất thay đổi cấu trúc 73,33% Sắp xếp lại nội dung; 40% Đồ họa/hình ảnh; 33,33% Bố trí menu, tab
Kênh giao tiếp khách hàng Điện thoại (40%); Yahoo Messenger (26,67%); Email (20%); Trực tiếp (13,33%)
Mức độ hài lòng chức năng Tư vấn trực tuyến (80%); Đăng ký trực tuyến (66,67%); Giới thiệu khóa học (40%)
Nhu cầu bổ sung chức năng 86,67% Hiển thị mobile; 73,33% Công cụ tìm kiếm; 66,67% Bảo mật; 60% Thăm dò ý kiến
Đánh giá tính cần thiết nâng cấp 80% Khẳng định Cần thiết; 20% Không cần thiết

Phần 3: Giải pháp, định hướng phát triển và các đề xuất về chức năng hiển thị nội dung số trên điện thoại di động cho website FPT Polytechnic

Phần thứ ba trình bày chi tiết giải pháp kỹ thuật hoàn thiện website:

  • Xác định chi tiết 9 phân vùng giao diện máy tính để phân loại loại bỏ (vùng 1 đến 6) và thay đổi cấu trúc (vùng 7 đến 9).
  • Trình bày bản vẽ phác thảo bố cục wireframe sử dụng phần mềm Balsamiq Mockups.
  • Thiết lập quy trình 10 bước thiết kế giao diện di động trên Adobe Photoshop CS5 từ tạo file, phân chia layer group, định dạng mã màu, phông chữ, kích thước các khối giao diện cho đến xuất file hoàn thiện.
  • Đưa ra nguyên lý tích hợp mã nguồn WordPress với bộ khung Twitter Bootstrap qua các class visible-phone, hidden-phone, media queries và hàm xử lý kích thước cửa sổ JavaScript $(window).width(), $(window).resize().
  • Phương án tối ưu hóa hình ảnh và lazy loading bằng plugin BJ Lazyload.
  • Định hướng mở rộng dựa trên số liệu phân tích của tổ chức IDC về thị trường thiết bị thông minh: thị phần máy tính bảng (tablet) dự báo tăng từ 10,7% (năm 2012) lên 16% (năm 2017) với sản lượng tăng 174,5%, trong khi máy tính để bàn giảm từ 12,4% xuống còn 6%.
  • Đề xuất hai nhóm kiến nghị: cập nhật phiên bản công nghệ mới (WordPress, CSS, jQuery) và nâng cao chất lượng nguồn nhân lực chuyên trách CNTT tại FPT Polytechnic.

Kết quả và đóng góp của đề tài

Khóa luận đã giải quyết bài toán thực tế của FPT Polytechnic thông qua các kết quả cụ thể:

  • Đánh giá định lượng toàn diện hiện trạng website: Cung cấp bức tranh thực trạng về website FPT Polytechnic sau 3 năm hoạt động (2010–2013), phản ánh rõ nét qua điểm số PageSpeed (83/100), thứ hạng Alexa (362.679 thế giới, 2.557 tại Việt Nam), cơ cấu chi phí vận hành (40 triệu xây dựng, 15 triệu duy trì, 50 triệu tiếp thị trực tuyến) và thực trạng nhân sự mỏng (4 người quản trị, bị 86,67% nhân viên đánh giá là chưa hợp lý).
  • Quy trình tái cấu trúc giao diện mobile khoa học: Đề xuất giải pháp loại bỏ các thành phần gây nghẽn băng thông và cản trở tương tác trên di động (quảng cáo Flash, tiện ích Yahoo Pingbox, ảnh nền cỡ lớn, hộp tìm kiếm phụ), đồng thời chuyển đổi các khối nội dung phức tạp sang dạng menu trượt dọc và danh sách khối dọc tương thích với thao tác chạm, cuộn.
  • Quy chuẩn thiết kế đồ họa chi tiết: Cung cấp bộ thông số thiết kế hoàn chỉnh trên Adobe Photoshop (khổ 320x2000px, cấu trúc 8 layer groups, hệ màu, kích cỡ chữ cho từng phân vùng nội dung) làm mẫu tham khảo kỹ thuật trực quan.
  • Giải pháp công nghệ tiết kiệm chi phí: Thay vì chi phí lớn để xây dựng ứng dụng di động riêng biệt hoặc duy trì tên miền phụ độc lập như cách tiếp cận truyền thống, tác giả chứng minh tính khả thi của việc tích hợp Twitter Bootstrap và các plugin tối ưu vào mã nguồn WordPress có sẵn, giúp đồng bộ dữ liệu tự động giữa phiên bản máy tính và điện thoại.

Hạn chế và hướng nghiên cứu tiếp

Khóa luận ghi nhận một số hạn chế gắn liền với phạm vi và điều kiện thực hiện đề tài:

  • Khóa luận dừng lại ở việc khảo sát thực trạng, thiết kế phác thảo wireframe, dựng mẫu giao diện đồ họa trên Photoshop và đưa ra nguyên lý tích hợp mã nguồn; văn bản chưa cung cấp các báo cáo kiểm thử tải (load testing) thực tế hay số liệu đo lường hiệu năng sau khi triển khai chính thức trên máy chủ sản xuất (production server).
  • Nguồn lực triển khai tại đơn vị nghiên cứu còn gặp khó khăn về hạ tầng công nghệ thông tin và tài chính dành cho thương mại điện tử còn hạn hẹp do FPT Polytechnic ưu tiên vốn cho mở rộng chi nhánh đào tạo.
  • Đội ngũ quản trị website còn thiếu hụt về số lượng (4 người phụ trách toàn bộ hệ thống).

Hướng nghiên cứu tiếp theo được tác giả đề xuất:

  • Mở rộng tối ưu hóa cho máy tính bảng (tablet): Dựa trên dự báo của IDC về việc thiết bị kết nối thông minh tăng trưởng mạnh và tablet sẽ chiếm 16% thị phần vào năm 2017, hệ thống cần được tiếp tục hoàn thiện giao diện riêng cho máy tính bảng để hỗ trợ trải nghiệm người dùng màn hình cỡ trung.
  • Nâng cấp công nghệ định kỳ: Cập nhật các phiên bản mới của hệ quản trị WordPress, các chuẩn HTML5, CSS3 và thư viện jQuery nhằm khắc phục các lỗ hổng bảo mật (như SQL Injection, XSS được ghi nhận trong khảo sát) và tăng tốc độ xử lý dữ liệu.

Giá trị tham khảo

Báo cáo khóa luận có giá trị thực tiễn và học thuật đối với các nhóm đối tượng:

  • Sinh viên chuyên ngành Hệ thống thông tin, Thương mại điện tử và Công nghệ thông tin: Là tài liệu tham khảo thực tế về quy trình thực hiện một khóa luận ứng dụng, kết hợp giữa phương pháp điều tra xã hội học (khảo sát bảng hỏi, phỏng vấn chuyên gia) với quy trình phân tích, thiết kế hệ thống giao diện web.
  • Người làm nghiên cứu về giao diện người dùng (UI/UX) và Web Responsive: Có thể tham khảo trực tiếp phương pháp phân loại thành phần giao diện máy tính để tinh giản sang thiết bị di động (ma trận 9 vùng chức năng), quy cách xây dựng wireframe bằng Balsamiq Mockups và bộ thông số thiết kế Photoshop chuẩn cho màn hình 320px.
  • Bộ phận quản trị website của các cơ sở đào tạo: Bảng dữ liệu khảo sát và các khuyến nghị tối ưu PageSpeed, phân bổ quyền quản trị (Super Admin, Administrator, Editor, Author, Contributor, Commentator) cung cấp khung tham chiếu hữu ích cho công tác vận hành cổng thông tin giáo dục.

Câu hỏi thường gặp

1. Vì sao tác giả lựa chọn công cụ WordPress để hoàn thiện website thay vì Drupal như nghiên cứu của Nguyễn Thị Thanh Tâm? Tác giả so sánh và chỉ ra Drupal khó sử dụng đối với người dùng mới, việc tạo menu phức tạp, số lượng tiện ích mở rộng (extensions) ít hơn và đòi hỏi phải chờ các nhà cung cấp nâng cấp khi có phiên bản mới. Trong khi đó, WordPress có giao diện quản trị thân thiện, thao tác cài đặt đơn giản, sở hữu kho plugin phong phú (khoảng 90% miễn phí) có thể cài đặt và cập nhật trực tiếp trong trang quản trị, đồng thời hỗ trợ tốt cơ chế tự động hiển thị giao diện di động.

2. Những thành phần nào trên giao diện máy tính của FPT Polytechnic bị loại bỏ hoàn toàn khi chuyển sang di động? Có 6 thành phần thuộc "vùng màu đỏ" (đánh số từ 1 đến 6) bị loại bỏ:

  • Vùng 1 (Tin nổi bật), Vùng 2 (Ô tìm kiếm) và Vùng 5 (Chú thích ảnh nền): Loại bỏ để tránh làm loãng không gian hiển thị và giảm mất tập trung cho người dùng.
  • Vùng 3 (Ô tư vấn trực tuyến): Loại bỏ do yêu cầu phần mềm bên ngoài (Yahoo Pingbox) không hoạt động tốt trên di động.
  • Vùng 4 (Ảnh nền thay đổi được): Loại bỏ do chiếm không gian hiển thị quá lớn và làm chậm tốc độ tải trang.
  • Vùng 6 (Ô quảng cáo): Loại bỏ do sử dụng định dạng Flash tiêu tốn nhiều tài nguyên và không tương thích tốt trên trình duyệt di động.

3. Quy chuẩn kích thước và hệ màu cụ thể khi thiết kế giao diện di động trên Photoshop là gì? Tác giả thiết lập tệp đồ họa chuẩn có kích thước chiều rộng 320px, chiều cao 2000px, độ phân giải 72 ppi. Các thông số màu sắc chính bao gồm: Top Menu có nền #000 và link #fff; khối Featured có nền #999 và chữ #fff; tiêu đề khối tin tức màu #21759B, tiêu đề bài viết đầu màu #000, đoạn trích dẫn màu #333, các bài tin tiếp theo màu #4c4c4c với bullet #c00; khối sự kiện có nền #FE3905, chữ #fff, ngày tháng màu #000 và đường kẻ #FF5807; viền thư viện ảnh màu #ddd; khối chân trang có chữ #fff và liên kết màu #FFB3B3.

4. Điểm số hiệu suất của website FPT Polytechnic đạt mức nào và cần ưu tiên tối ưu những yếu tố gì? Theo kết quả đo lường bằng công cụ PageSpeed và YSlow, website FPT Polytechnic đạt tổng điểm tốc độ là 83/100. Các hạng mục được xếp vào mức ưu tiên cao cần xử lý bao gồm: nâng cao lưu vào bộ nhớ cache trong trình duyệt, cung cấp tài nguyên từ một URL nhất quán, tối ưu hóa kích thước hình ảnh, kích hoạt tính năng Keep-Alive, bật nén dữ liệu và đặt nội tuyến các đoạn mã CSS nhỏ.

5. Kết quả khảo sát nhân viên phản ánh thực trạng nhân sự và nhu cầu nâng cấp website như thế nào? Kết quả khảo sát sơ cấp cho thấy đội ngũ chuyên trách quản trị website của FPT Polytechnic chỉ có 4 người (chiếm 13,33% tổng số nhân viên công ty), và có tới 86,67% ý kiến nhân viên đánh giá số lượng này là chưa hợp lý. Về định hướng phát triển, 80% nhân viên khẳng định việc nâng cấp và hoàn thiện website là rất cần thiết, trong đó tỷ lệ đề xuất bổ sung chức năng hiển thị trên điện thoại di động chiếm tỷ lệ cao nhất với 86,67%.

Kết luận

Khóa luận tốt nghiệp của tác giả Trần Thanh Quang đã hệ thống hóa cơ sở lý luận về thiết kế web đáp ứng và đánh giá toàn diện thực trạng kỹ thuật, hiệu năng cũng như cơ cấu quản trị của website FPT Polytechnic giai đoạn 2010–2013. Bằng việc kết hợp công cụ đồ họa Photoshop, phần mềm phác thảo Balsamiq Mockups với hệ quản trị nội dung WordPress và bộ khung Twitter Bootstrap, tác giả đã xây dựng hoàn chỉnh giải pháp tái cấu trúc giao diện hiển thị 1 cột tối ưu cho màn hình di động 320px. Công trình mang tính ứng dụng thực tiễn rõ nét, cung cấp tài liệu tham khảo chi tiết cho việc tối ưu hóa giao diện web giáo dục trên thiết bị thông minh với chi phí triển khai tiết kiệm.