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

Sự bùng nổ của các dòng điện thoại thông minh (smartphone) chạy trên các hệ điều hành Android, iOS, Windows Phone và sự phát triển của hạ tầng mạng 3G tại Việt Nam đã làm thay đổi căn bản thói quen tiếp cận thông tin của người dùng. Xu hướng truy cập internet qua thiết bị cầm tay tăng trưởng nhanh chóng đòi hỏi các tổ chức, doanh nghiệp phải điều chỉnh giao diện website để tương thích với màn hình di động. Trước đây, các giải pháp phổ biến bao gồm phát triển ứng dụng di động riêng biệt hoặc xây dựng phiên bản website riêng trên tên miền phụ (subdomain như mobile.domain.com). Tuy nhiên, những phương án này đòi hỏi chi phí đầu tư lớn, tiêu tốn nhiều tài nguyên phát triển và duy trì, thường chỉ phù hợp với các doanh nghiệp có tiềm lực tài chính mạnh.

Sự hoàn thiện của các công nghệ web như HTML5, CSS3, hệ quản trị nội dung WordPress và kỹ thuật thiết kế thích ứng (Responsive Web Design - RWD) mang đến giải pháp tối ưu hơn, cho phép website tự động điều chỉnh độ rộng hiển thị vừa vặn với mọi kích thước màn hình mà không cần duy trì nhiều hệ thống mã nguồn tách biệt. Trường Cao đẳng thực hành FPT Polytechnic (thành lập từ tháng 8/2010 trực thuộc FPT Education) sở hữu lượng người dùng lớn là học sinh, sinh viên và phụ huynh. Website của đơn vị đóng vai trò là kênh truyền thông, tuyển sinh và tương tác trực tuyến chính. Tuy nhiên, giao diện website thời điểm nghiên cứu chưa hỗ trợ tối ưu cho thiết bị di động, tốc độ tải trang còn hạn chế và bố cục chưa tinh gọn.

Khóa luận tốt nghiệp của tác giả Trần Thanh Quang (ngành Quản trị Hệ thống thông tin, dưới sự hướng dẫn của ThS. Nguyễn Thị Hội) được thực hiện nhằm giải quyết bài toán trên.

Mục tiêu nghiên cứu của đề tài được xác định gồm 3 nội dung chính:

  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ợ 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 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 Việt Nam bằng công cụ WordPress.

Đối tượng và phạm vi nghiên cứu:

  • Đối tượng nghiên cứu: Hệ thống website của 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à công cụ mã nguồn mở WordPress.
  • Phạm vi nghiên cứu: Hệ thống website FPT Polytechnic, các đề tài nghiên cứu liên quan, dữ liệu do phòng Hệ thống thông tin và phòng Kế toán của đơn vị cung cấp, cùng các dữ liệu khảo sát người dùng nội bộ và tài liệu kỹ thuật trên Internet.

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

Khung lý thuyết và công nghệ nền tảng

Khóa luận hệ thống hóa các khái niệm chuyên ngành liên quan đến phát triển web và tối ưu hóa hiển thị di động:

  • Khái niệm và phân loại website: Khái niệm website, webpage, URL, hosting và máy chủ web. Phân loại website theo dữ liệu (web tĩnh không có cơ sở dữ liệu và web động có cơ sở dữ liệu quản trị back-end như MySQL, Oracle), 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 sự tương tác người dùng (Web 1.0 truyền thông một chiều, Web 2.0 có tính tương tác cộng đồng mở và định hướng Web 3.0).
  • Nguyên lý hiển thị website trên thiết bị di động: Yêu cầu chuyển đổi bố cục đa cột sang cấu trúc 1 cột duy nhất theo chiều dọc nhằm loại bỏ thao tác cuộn ngang; loại bỏ các thành phần rườm rà như flash, sidebar, footer phức tạp; cắt giảm mã nguồn, thẻ tag và chú thích dư thừa; nén tài nguyên và giảm kích thước hình ảnh để tối ưu hóa băng thông.
  • Các công cụ và công nghệ áp dụng:
    • WordPress: Hệ quản trị nội dung mã nguồn mở viết bằng PHP và cơ sở dữ liệu MySQL, cung cấp kho giao diện phong phú, hỗ trợ hơn 90% plugin miễn phí có thể cài đặt trực tiếp, dễ quản trị hơn so với Drupal hoặc Joomla.
    • CSS & CSS3: Ngôn ngữ định kiểu hiển thị cho tài liệu HTML, tách biệt nội dung và hình thức trình bày, sử dụng Media Query để nhận diện độ phân giải màn hình.
    • jQuery Mobile: Khung công tác phát triển giao diện người dùng thân thiện với cảm ứng, kích thước nén khoảng 12KB (xây dựng trên lõi jQuery 25KB), hỗ trợ thao tác DOM, Ajax và xử lý sự kiện.
    • Twitter Bootstrap: Framework cung cấp hệ thống lưới 12 cột (độ rộng cố định 940px) và giao diện dạng lỏng (Fluid grid), hỗ trợ các lớp CSS chuyên biệt cho thiết bị di động (visible-phone, hidden-phone).
    • Balsamiq Mockups: Công cụ phác thảo bố cục giao diện (wireframe) nhanh trước khi tiến hành thiết kế chi tiết.
    • Adobe Photoshop CS5: Phần mềm đồ họa phục vụ việc vẽ giao diện chi tiết, cắt ghép và xử lý kích thước tài nguyên hình ảnh.

Phương pháp nghiên cứu và nguồn dữ liệu

Tác giả kết hợp các phương pháp nghiên cứu định tính và định lượng:

  • Phương pháp thu thập dữ liệu sơ cấp:
    • Thực hiện phỏng vấn cá nhân trực tiếp với cán bộ, chuyên gia thuộc phòng Hệ thống thông tin FPT Polytechnic để nắm bắt cấu trúc kỹ thuật và quy trình quản trị.
    • Phát phiếu điều tra khảo sát ý kiến cán bộ, nhân viên nội bộ FPT Polytechnic nhằm thu thập đánh giá về chất lượng thông tin, tốc độ tải, mức độ hài lòng về chức năng và nhu cầu nâng cấp website.
  • Phương pháp thu thập dữ liệu thứ cấp:
    • Khai thác báo cáo tài chính từ phòng Kế toán FPT Polytechnic (chi phí xây dựng ban đầu 40 triệu đồng, chi phí duy trì 15 triệu đồng, chi phí marketing trực tuyến 50 triệu đồng).
    • Thu thập số liệu thống kê quy mô đào tạo từ FPT Polytechnic (tăng trưởng từ 500 học viên năm 2010 lên khoảng 1.800 học viên phân bổ tại 6 cơ sở: Hà Nội, Đà Nẵng, TP. Hồ Chí Minh, Quảng Ninh, Thanh Hóa, Đắk Lắk).
    • Kế thừa kết quả từ các nghiên cứu trước: Luận văn của Nguyễn Thị Thanh Tâm (2010) về xây dựng website tiếng Anh cho ĐH Công nghệ trên nền tảng Drupal; tài liệu chuyên khảo "WordPress 3 Complete" của April Hodge Silver (2011).
    • Khai thác báo cáo thị trường thiết bị thông minh của IDC năm 2012–2017.
    • Sử dụng các công cụ kiểm thử trực tuyến: SEO Worker, Google PageSpeed, YSlow, Alexa và dữ liệu thống kê từ Facebook Fanpage.
  • Phương pháp xử lý dữ liệu: Sử dụng phần mềm Microsoft Excel để tổng hợp, xử lý dữ liệu khảo sát và phương pháp phân tích - tổng hợp logic để rút ra nhận định.

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

Tác giả phân tích tính cấp thiết của việc xây dựng website tương thích thiết bị di động trong bối cảnh các hãng công nghệ lớn như Apple, Samsung, Nokia, LG liên tục tung ra thị trường các dòng smartphone. Phần này tiến hành tổng quan 2 tài liệu chính: luận văn của tác giả Nguyễn Thị Thanh Tâm về việc xây dựng website di động bằng Drupal (chỉ ra hạn chế của Drupal là khó sử dụng, ít extension hơn WordPress và chưa có cơ chế tự động điều hướng thiết bị) và cuốn sách hướng dẫn WordPress của April Hodge Silver. Từ đó, tác giả xác định mục tiêu, đối tượng, phạm vi và xây dựng khung phương pháp luận cho đề tài.

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

Nội dung phần này tập trung vào 3 khối vấn đề:

  1. Hệ thống hóa cơ sở lý thuyết: Trình bày chi tiết các định nghĩa về website, web tĩnh/động, các thế hệ web 1.0/2.0/3.0, kỹ thuật thiết kế Responsive Web Design và đặc tính của các công cụ hỗ trợ (WordPress, CSS, jQuery Mobile, Twitter Bootstrap, Balsamiq Mockups, Photoshop).
  2. Hiện trạng kỹ thuật và quản trị website FPT Polytechnic: Giới thiệu lịch sử thành lập đơn vị (28/8/2010 với 2 khối ngành CNTT và Kinh tế - Kinh doanh), phân tích cấu trúc quản trị phân quyền 6 cấp bậc (Super Admin, Administrator, Editor, Author, Contributor, Commentator) và quy trình biên tập bài viết có lưu lịch sử thay đổi.
  3. Đánh giá thực trạng qua dữ liệu đo lường và khảo sát: Phân tích kết quả từ các công cụ kiểm thử tự động và phiếu điều tra nhân viên nội bộ về chất lượng nội dung, tốc độ tải và nhu cầu cải tiến hệ thống.
Chỉ số kỹ thuật đo lường Công cụ / Nguồn Giá trị ghi nhận trong văn bản
Điểm chất lượng kỹ thuật SEO Worker / PRChecker 4 điểm
Thứ hạng Alexa toàn cầu Alexa 362.679
Thứ hạng Alexa tại Việt Nam Alexa 2.557
Điểm hiệu suất tốc độ Google PageSpeed & YSlow 83 / 100 điểm
Thẻ Meta Keywords & Robot SEO Worker Không tìm thấy (thiếu sót)
Lượng người theo dõi (Like) Facebook Fanpage 14.470 lượt
Tổng số lượt bình luận Thống kê website 28.000 bình luận (~40 bình luận/ngày)
Tổng số lượng bài viết Thống kê website 1.250 bài viết (~1,5 bài viết/ngày)

Kết quả khảo sát sơ cấp ý kiến cán bộ, nhân viên FPT Polytechnic:

  • Cơ cấu nhân sự quản trị: Đội ngũ phụ trách website gồm 4 người (chiếm 13,33% nhân sự công ty); 86,67% ý kiến đánh giá số lượng này là chưa hợp lý.
  • Chất lượng thông tin: 40% đánh giá tốt, 33,33% đánh giá bình thường, 26,67% đánh giá rất tốt.
  • Cách sắp xếp, phân bố thông tin: 53,33% đánh giá mức bình thường, 49% cho rằng cấu trúc chưa hợp lý.
  • Tốc độ tải trang: 53,33% đánh giá bình thường, 30% đánh giá chậm và chỉ 9% đánh giá nhanh (nguyên nhân do sử dụng nhiều ứng dụng Flash và ảnh dung lượng lớn).
  • Nhu cầu nâng cấp cấu trúc và chức năng: 80% khẳng định việc nâng cấp website là cần thiết; 73,33% đề xuất tinh gọn nội dung; 86,67% yêu cầu bổ sung chức năng hiển thị trên điện thoại di động; 73,33% đề xuất nâng cấp công cụ tìm kiếm; 66,67% yêu cầu tăng cường bảo mật thông tin.
  • Kênh tương tác hiện tại: Điện thoại (40%), Yahoo Messenger (26,67%), Email (20%) và gặp trực tiếp (13,33%).

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

Tác giả đề xuất quy trình kỹ thuật toàn diện nhằm chuyển đổi giao diện website FPT Polytechnic sang phiên bản di động, bao gồm: phân định thành phần loại bỏ/thay đổi, phác thảo wireframe, thiết kế đồ họa chi tiết, lập trình tích hợp Twitter Bootstrap trên WordPress và áp dụng các giải pháp tối ưu hóa hiệu năng tải trang. Phần này cũng đưa ra định hướng mở rộng hệ thống sang máy tính bảng dựa trên số liệu phân tích thị trường của IDC và các kiến nghị về tổ chức nhân sự.

Thiết kế và triển khai giải pháp kỹ thuật

1. Phân định và xử lý các phân vùng giao diện PC sang Mobile

Dựa trên phân tích giao diện trang chủ máy tính, tác giả sử dụng Photoshop để khoanh vùng và phân loại 9 khu vực chức năng:

Phân vùng chức năng Thành phần giao diện Phương án xử lý trên thiết bị di động Lý do xử lý
Vùng 1 Tin nổi bật Loại bỏ hiển thị Gây loãng không gian, làm người dùng mất tập trung
Vùng 2 Ô tìm kiếm Loại bỏ hiển thị Giảm thiểu các khối chức năng phụ trên màn hình hẹp
Vùng 3 Ô tư vấn trực tuyến Loại bỏ hiển thị Phụ thuộc phần mềm bên ngoài, thiết bị di động không hỗ trợ
Vùng 4 Ảnh nền thay đổi được Loại bỏ hiển thị Chiếm không gian quá lớn, ảnh hưởng tiêu cực đến tốc độ tải
Vùng 5 Chú thích cho ảnh nền Loại bỏ hiển thị Không cần thiết khi đã ẩn ảnh nền
Vùng 6 Ô quảng cáo (Flash) Loại bỏ hiển thị Định dạng Flash không tương thích và chiếm dụng tài nguyên
Vùng 7 Menu chính Chuyển thành Menu dropdown (Menu dọc) Chiều ngang di động không đủ hiển thị dạng thanh ngang
Vùng 8 Hộp đăng ký trực tuyến Chuyển từ dạng ngang sang dạng khối dọc Tối ưu không gian hiển thị thông tin theo chiều cuộn
Vùng 9 Thư viện ảnh Cắt giảm số lượng ảnh và giảm chiều rộng Giảm tải dung lượng trang và vừa vặn khung hình

2. Phác thảo Wireframe bằng Balsamiq Mockups

Tác giả sử dụng Balsamiq Mockups để dựng khung bố cục di động dạng một cột. Bản phác thảo sắp xếp thứ tự ưu tiên từ trên xuống dưới: Logo trường, Menu chính (dạng nút bấm mở rộng), Hộp đăng ký trực tuyến, Tin tức Poly, Poly góc nhìn, Sự kiện, Thư viện ảnh rút gọn và Chân trang (Footer liên hệ).

3. Quy trình 10 bước thiết kế giao diện đồ họa trên Photoshop CS5

Tác giả thiết lập tài liệu thiết kế với thông số kỹ thuật chuẩn: chiều rộng 320px, chiều cao 2000px, độ phân giải 72ppi. Quy trình tạo các nhóm Layer (Layer Group) chi tiết như sau:

  • Bước 1 & 2: Tạo tệp Home.psd và khởi tạo 8 Layer Group: Header, Featured, News, Testimonials, Events, Gallery, Ads, Footer.
  • Bước 3 (Header): Đặt Logo FPT Polytechnic (khoảng cách viền tối thiểu bằng 1/2 kích thước logo), font Arial; thanh Top Menu có màu nền #000, liên kết màu chữ #fff.
  • Bước 4 (Featured): Tạo các khối chuyên mục kích thước 320x100px, màu nền #999, màu chữ #fff, ảnh biểu tượng (icon) kích thước 60x60px.
  • Bước 5 (News - Tin tức Poly): Tạo khung kích thước 320x460px; ảnh đại diện bài viết 300x150px; tiêu đề mục cỡ 16px đậm (màu #21759B); tiêu đề bài viết đầu 16px đậm (màu #000), đoạn trích dẫn (excerpt) cỡ 12px (màu #333); 3 tiêu đề bài viết tiếp theo cỡ 11px đậm (màu #4c4c4c, dấu đầu dòng bullet màu #c00).
  • Bước 6 (Testimonials - Poly góc nhìn): Kế thừa cấu trúc từ nhóm News, thay đổi nội dung văn bản và hình ảnh tương ứng.
  • Bước 7 (Events - Sự kiện): Thiết lập khối nền màu #FE3905, chữ màu #fff, ngày tháng màu #000; tiêu đề "SỰ KIỆN" cỡ 16px in hoa; đường phân cách nét liền 1px màu #FF5807.
  • Bước 8 (Gallery - Thư viện ảnh): Tiêu đề "Thư viện ảnh" cỡ 16px đậm (màu #21759B); kích thước mỗi ảnh 100x80px; khoảng đệm viền 4px, góc bo 4px, đường viền màu #ddd; chú thích ảnh cỡ 13px màu #333.
  • Bước 9 (Footer): Tạo nền họa tiết (pattern) màu sẫm; chữ màu #fff, liên kết màu #FFB3B3; tích hợp các biểu tượng mạng xã hội Facebook và Google Plus.
  • Bước 10: Lưu trữ tệp thiết kế giao diện hoàn chỉnh.

4. Triển khai lập trình giao diện Responsive trên WordPress và Twitter Bootstrap

  • Áp dụng hệ thống lớp CSS của Twitter Bootstrap: khai báo lớp visible-phone cho các khối chỉ hiển thị trên di động và hidden-phone cho 6 phân vùng cần ẩn trên giao diện di động.
  • Sử dụng cú pháp @media query trong tệp tin style.css để định dạng lại kích thước, khoảng đệm (padding, margin) cho các thành phần có độ rộng cố định.
  • Tích hợp hàm JavaScript bắt sự kiện co giãn màn hình trình duyệt: $(window).resize().

5. Kỹ thuật tối ưu hóa hiệu năng tải trang

  • Tối ưu hóa hình ảnh: Sử dụng công cụ có sẵn của WordPress, thư viện TimThumb hoặc công cụ nén ảnh không mất dữ liệu (lossless compression) của Google để giảm dung lượng file ảnh.
  • Tải trễ nội dung (Lazy load): Tích hợp plugin BJ Lazyload vào hệ thống WordPress để trì hoãn việc tải các hình ảnh nằm ngoài khung nhìn cho đến khi người dùng cuộn trang tới vị trí tương ứng.

Kết quả và đóng góp

Kết quả nghiên cứu đạt được

  • Về mặt khảo sát và đánh giá: Khóa luận đã phân tích toàn diện thực trạng kỹ thuật và vận hành của website FPT Polytechnic, xác định được điểm số tốc độ (83/100 PageSpeed), thứ hạng Alexa (362.679 thế giới, 2.557 Việt Nam), các lỗ hổng bảo mật tiềm ẩn (SQL Injection, XSS) và những điểm nghẽn về cấu trúc (lạm dụng Flash, thiếu thẻ meta SEO). Đồng thời, xác lập bộ số liệu khảo sát thực tế từ nhân viên nội bộ về nhu cầu cải tiến website.
  • Về mặt kỹ thuật thực thi: Xây dựng thành công bộ giao diện mẫu di động chuẩn 320px qua 10 bước thiết kế trên Photoshop CS5; xác lập quy tắc ẩn/hiện và chuyển đổi bố cục 9 phân vùng chức năng; đưa ra giải pháp kỹ thuật tích hợp WordPress với Twitter Bootstrap và cơ chế tải trễ hình ảnh (BJ Lazyload).

Đóng góp so với các nghiên cứu trước

Khóa luận đã khắc phục những hạn chế trong công trình nghiên cứu trước đó của Nguyễn Thị Thanh Tâm (2010):

  • Công trình của Nguyễn Thị Thanh Tâm sử dụng Drupal, gặp hạn chế về tính phức tạp trong quản trị menu, kho extension hạn chế và phải thiết lập trang web độc lập trên tên miền phụ mà chưa có cơ chế tự động nhận diện thiết bị.
  • Khóa luận của tác giả Trần Thanh Quang sử dụng nền tảng WordPress kết hợp framework Twitter Bootstrap, tận dụng hệ sinh thái plugin phong phú và cơ chế Responsive Web Design giúp website tự động co giãn theo kích thước trình duyệt của người dùng trên cùng một hệ thống mã nguồn duy nhất.

Đề xuất và kiến nghị quản trị

  • Về mặt công nghệ: Kiến nghị ban quản trị FPT Polytechnic thường xuyên cập nhật phiên bản mới nhất của WordPress, CSS, jQuery; gộp các tệp CSS/JavaScript, loại bỏ thuộc tính @import và thay thế các icon nhỏ bằng Font Icon hoặc mã hóa Base64.
  • Về mặt nhân sự: Đề xuất doanh nghiệp có kế hoạch tuyển dụng thêm nhân sự chuyên trách về Công nghệ thông tin và Thương mại điện tử nhằm khắc phục tình trạng thiếu hụt nhân lực quản trị website (hiện chỉ có 4 nhân sự).

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

Hạn chế của đề tài

  • Khóa luận tập trung chủ yếu vào việc giải quyết bài toán giao diện trên màn hình điện thoại di động chuẩn (độ phân giải cơ sở 320px), chưa đi sâu vào việc tối ưu hóa chi tiết cho các kích thước màn hình trung gian như máy tính bảng (tablet).
  • Do hạn chế về thời gian thực tập và nguồn lực tài chính của đơn vị, đề tài chưa tiến hành đo lường hiệu năng thực nghiệm toàn diện sau khi đưa toàn bộ mã nguồn lên môi trường máy chủ thực tế (production).

Hướng nghiên cứu tiếp theo

  • Mở rộng giao diện cho máy tính bảng: Khóa luận dẫn chứng báo cáo của IDC (2012–2017) cho thấy sản lượng máy tính bảng dự báo tăng 174,5% (chiếm 16% thị phần vào năm 2017, trong khi máy tính để bàn giảm xuống 6%), tổng lượng thiết bị kết nối thông minh đạt 2,2 tỉ thiết bị (trị giá 814,3 tỉ USD). Do đó, hướng phát triển tiếp theo là xây dựng layout responsive chuyên biệt cho máy tính bảng (Apple iPad, Samsung Galaxy Tab).
  • Cập nhật công nghệ mới: Nghiên cứu tích hợp các phiên bản nâng cấp của WordPress, HTML5/CSS3 nâng cao và các framework tối ưu hóa JavaScript mới nhằm nâng cao hơn nữa tốc độ tải trang.

Giá trị tham khảo

Khóa luận là tài liệu tham khảo hữu ích cho sinh viên các chuyên ngành Quản trị Hệ thống thông tin, Tin học Thương mại, Thương mại điện tử và Công nghệ thông tin:

  • Phương pháp luận đánh giá website: Cung cấp quy trình kết hợp công cụ đo lường kỹ thuật trực tuyến (PageSpeed, YSlow, SEO Worker, Alexa) với phương pháp phát phiếu khảo sát người dùng nội bộ để chẩn đoán hiện trạng website doanh nghiệp.
  • Quy trình thiết kế giao diện Responsive: Tài liệu thể hiện chi tiết từng bước phác thảo wireframe bằng Balsamiq Mockups và quy chuẩn 10 bước thiết kế layer trên Adobe Photoshop với các thông số kích thước, cỡ chữ và mã màu cụ thể.
  • Kỹ thuật chuyển đổi giao diện: Cung cấp phương pháp ứng dụng các lớp CSS của Twitter Bootstrap (visible-phone, hidden-phone, media queries) trên nền tảng CMS WordPress.

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

1. Vì sao tác giả lựa chọn CMS WordPress thay vì Drupal để phát triển phiên bản website di động?

Theo phân tích của tác giả dựa trên tổng quan tài liệu, Drupal có giao diện quản trị phức tạp, khó thao tác đối với người dùng mới, hệ thống menu gây rối và số lượng extension tương thích ít hơn. Trong khi đó, WordPress sở hữu mã nguồn mở dễ sử dụng, kho plugin phong phú (hơn 90% miễn phí, có thể cài đặt và nâng cấp trực tiếp trong trang quản trị) và hỗ trợ tích hợp linh hoạt các framework responsive như Twitter Bootstrap.

2. Những phân vùng giao diện nào trên bản máy tính bị loại bỏ hoàn toàn khi chuyển sang giao diện di động?

Có 6 phân vùng bị loại bỏ hoàn toàn:

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

3. Hiện trạng kỹ thuật của website FPT Polytechnic trước khi tối ưu được ghi nhận ra sao?

Các công cụ kiểm thử ghi nhận: điểm hiệu suất Google PageSpeed đạt 83/100, điểm chất lượng SEO Worker đạt 4 điểm, thứ hạng Alexa đạt 362.679 (toàn cầu) và 2.557 (Việt Nam). Hệ thống chưa có thẻ Meta Keywords và Meta Robot, sử dụng nhiều ứng dụng Flash, hình ảnh chưa được nén tối ưu và trang web chứa một số nguy cơ bảo mật nhỏ về SQL Injection và XSS.

4. Quy trình thiết kế đồ họa giao diện di động trên Photoshop CS5 sử dụng các thông số kỹ thuật nào?

Tệp thiết kế được tạo với kích thước chiều rộng 320px, chiều cao 2000px và độ phân giải 72ppi. Cấu trúc gồm 8 nhóm layer chính: Header (Top Menu nền #000, chữ #fff), Featured (khối 320x100px, nền #999, icon 60x60px), News & Testimonials (khung 320x460px, ảnh 300x150px, tiêu đề mục 16px màu #21759B), Events (nền #FE3905, chữ #fff, đường kẻ 1px màu #FF5807), Gallery (ảnh 100x80px, bo góc 4px, viền #ddd) và Footer (chữ #fff, liên kết #FFB3B3).

5. Kết quả khảo sát nhân viên nội bộ FPT Polytechnic chỉ ra những hạn chế chính nào của website?

Khảo sát cho thấy 86,67% nhân viên đánh giá quy mô đội ngũ quản trị website (4 người) là chưa hợp lý; 53,33% đánh giá cách sắp xếp thông tin ở mức bình thường; 30% đánh giá tốc độ tải trang chậm; 80% khẳng định website cần được nâng cấp; và 86,67% đề xuất bổ sung chức năng hiển thị trên thiết bị di động.

Kết luận

Khóa luận của tác giả Trần Thanh Quang đã hệ thống hóa cơ sở lý luận về thiết kế web thích ứng (Responsive Web Design) và đánh giá toàn diện thực trạng kỹ thuật của website FPT Polytechnic Việt Nam. Dựa trên kết quả khảo sát sơ cấp và đo lường thứ cấp, tác giả đã xây dựng quy trình kỹ thuật hoàn chỉnh để chuyển đổi giao diện sang màn hình di động 320px thông qua việc kết hợp Balsamiq Mockups, Adobe Photoshop CS5, CMS WordPress và framework Twitter Bootstrap. Đề tài cung cấp giải pháp thực tiễn giúp cải thiện khả năng tiếp cận thông tin của người dùng di động, đồng thời đề xuất định hướng phát triển hệ thống trên máy tính bảng và nâng cao năng lực đội ngũ quản trị web tại đơn vị.