Từ giao diện trên PC, xác định những thành phần cần loại bỏ, những thành phần cần thay đổi để phù hợp với giao diện trên thiết bị di động.

Một phần của tài liệu 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 bằng công cụ Wordpress (Trang 31)

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

3.1.1.Từ giao diện trên PC, xác định những thành phần cần loại bỏ, những thành phần cần thay đổi để phù hợp với giao diện trên thiết bị di động.

thành phần cần thay đổi để phù hợp với giao diện trên thiết bị di động.

Hiển thị website trên máy tính khác hoàn toàn trên điện thoại di động vì kích thước màn hình của các thiết bị trên khác nhau. Do đó để tạo website hiển thị tốt trên điện thoại di dộng cần tìm ra những vùng không cần thiết khi hiển thị trên di động hoặc thay đổi kiểu hiển thị( ví dụ dạng hiển thị ngang thay bằng dọc… )

Các vùng cần được thay đổi hay được lược bỏ được hiển thị trên hình vẽ dưới đây, được đánh dấu bằng công cụ Photoshop

Photoshop: Là một phần mềm đồ họa chuyên dụng của hãng Adobe Systems ra đời vào năm 1988 trên hệ máy Macintosh. Photoshop được đánh giá là phần mềm dẫn đầu thị trường về sửa ảnh bitmap và được coi là chuẩn cho các ngành liên quan tới chỉnh sửa ảnh. Từ phiên bản Photoshop 7.0 ra đời năm 2002, Photoshop đã làm lên một cuộc cách mạng về ảnh bitmap. Phiên bản mới nhất hiện nay là Adobe Photoshop CS5. Ngoài khả năng chính là chỉnh sửa ảnh cho các ấn phẩm, Photoshop còn được sử dụng trong các hoạt động như thiết kế trang web, vẽ các loại tranh (matte painting và nhiều thể loại khác), vẽ texture cho các chương trình 3D... gần như là mọi hoạt động liên quan đến ảnh bitmap. Adobe Photoshop có khả năng tương thích với hầu hết các chương trình đồ họa khác của Adobe như Adobe Illustrator, Adobe Premiere,After After Effects và Adobe Encore.

Dưới đây là các vùng đánh dấu khoanh vùng loại bỏ thay thế các phần của website khi hiển thị trên máy tính được chuyển thành các thành phần trên điện thoại di động

Vùng 1: Tin nổi bật Vùng 2: Ô tìm kiếm

Vùng 3: Ô tư vấn trực tuyến

Vùng 4: Ảnh nền thay đổi được của website Vùng 5: Chú thích cho ảnh nền

sinh; liên hệ

Vùng 8: Menu phụ bao gồm đăng ký trực tuyến; thong báo tuyển sinh; chương trình đào tạo; trắc nghiệm nghề nghiệp; một số hoạt động khác

Vùng 9: Thư viện ảnh

Hình 2.2. Các vùng đánh dấu để thay thê, loại bỏ

a. Những vùng màu đỏ, được đánh số từ 1-6 sẽ được loại bỏ hiển thị trên thiết bị di động. ( Kết quả tham khảo phần phụ lục 1)

Cụ thể:

Vùng 1, 2 và 5 sẽ làm loãng không gian hiển thị, người dùng sẽ mất tập trung. Vùng số 3 cần phần mềm bên ngoài, người dùng thiết bị di động không sử dụng được. Vùng số 4 cần không gian hiển thị quá lớn, ảnh hưởng nhiều đến việc tải trang. Vùng số 6 hiển thị quảng cáo, sử dụng Flash sẽ chiếm nhiều không gian và tài nguyên.

b. Những phần màu xanh dương được đánh số từ 7-9 cần thay đổi hình thức hiển thị trên thiết bị di động.( Kết quả tham khảo phần phụ lục 1)

Cụ thể:

Vùng số 7 cần chuyển sang dạng Menu dropdown (Menu dọc) vì thiết bị di động không đủ chiều ngang để hiển thị.( Kết quả tham khảo phần phụ lục 1)

Hình 2.3. Thanh menu ngang thành menu dọc

Vùng số 8 cần chuyển sang dạng Menu dọc để hiển thị nhiều thông tin hơn.

Vùng số 9 cần giảm kích thước chiều ngang và giảm số lượng ảnh.

Hình 2.5. Thư viện ảnh được cắt bớt

Những vùng còn lại ( Kết quả tham khảo phần phụ lục 1)

Những vùng còn lại chỉ cần thay đổi kích thước, vị trí, hoặc màu sắc cho phù hợp với thiết bị di động.

Một phần của tài liệu 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 bằng công cụ Wordpress (Trang 31)