2.2.2.2 .Các công nghệ được ứng dụng trên website
3.1. Hoàn thiện chức năng hiển thị nội dung số trên điện thoại di động
3.1.2. Vẽ phác thảo phiên bản trên điện thoại bằng bansamiq mockup
Bước đầu tiên trong quá trình thiết kế web là việc tạo ra bản phác thảo bố cụ webiste, tiếp theo khách hàng sẽ xem xét bản vẽ đó và quyết định việc có chỉnh sửa hay khơng. Nếu ngay từ đầu bạn tạo ra bản phác thảo hoàn hảo bằng photoshop thì việc chỉnh sửa có thể sẽ mất nhiều cơng. Có một giải pháp được gọi là Balsamiq
Mockups. Balsamiq Mockups là phần mềm giúp bạn tạo ra các bản mockup bố cục
webiste hay của ứng dụng (còn gọi là wireframe). Đây là những bản nháp mô tả những thành phần chính trong website, ứng dụng như tiêu đề, menu, các nút bấm, đồ thị. Làm mockup hay wireframe là rất cần thiết vì nó giúp bạn tiết kiệm được rất nhiều thời gian trước khi bắt tay làm thật. Khách hàng sẽ xem xét bản vẽ đó và quyết định việc có chỉnh sửa hay không. Nếu ngay từ đầu bạn tạo ra bản mockup hoàn hảo bằng photoshop thì việc chỉnh sửa có thể sẽ mất nhiều công. Sử dụng Balsamiq Mockups sẽ giúp bạn dễ dàng và nhanh chóng tạo ra các mockup thơ. Bạn đang có một ý tưởng tuyệt vời về cách bố trí một thiết kế trang web, hoặc cảm hứng thiết kế cho một ứng dụng mới, bạn muốn thể hiện ra cho bạn bè, đồng nghiệp xem xét nó. Có lẽ bạn đã cố gắng thiết kế nó trong photoshop nhưng hồn tồn thất vọng vì nó q phức tạp và quá lâu để thể hiện ra. Dù bằng cách nào bạn cần một cách tốt hơn để cho người khác thấy ý tưởng của bạn một cách trực quan và ngay lập tức. Balsamiq Mockups là một ứng
dụng tuyệt vời , đơn giản sẽ giúp cho bạn nhanh chóng tạo ra mockups của ứng dụng, trang web và nhiều hơn nữa sau đó sẽ chứng minh hoặc chia sẻ cho những người khác.. Phần mềm này có thể chạy trên mọi nền tảng máy tính.
Dưới đây là bản phác thảo website của FPT Polytechnic trên điện thoại di động sử dụng bansamiq mockup
Hình 2.6. Phác thảo website bằng công cụ Bansamiq mockup
3.1.3. Thiết kế giao diện trên Photoshop ( Kết quả tham khảo phần phụ lục 1)
a) Bước 1. Vào File \ New. Hộp thoại New hiện ra cho phép tạo một File mới.
Đặt tên là Home.
◦ Mục Height, đặt 2000px
◦ Resolution, chọn 72ppi.
◦ Các thiết lập khác đặt mặc định, như hình sau
Hình 2.7. Thiết kế giao diện trên Photoshop
b) Bước 2: Lần lượt tạo các Layer Group có tên Header, Featured, News,
Testimonials, Events, Gallery, Ads, Footer bằng cách vào menu Layer / New / Group. Tất cả các tham số đặt mặc định.
Hình 2.7. Thiết kế giao diện trên Photoshop
c) Bước 3: Sử dụng các công cụ Text, Line Tool, Rounded Rectangle Tool để
thiết kế các Layer trong phần Header, kết quả cuối như sau:
Hình 2.8. Thiết kế menu chính bằng Photoshop
Trong đó:
Logo FPT Polytechnic được cung cấp sẵn.Khoảng cách tối thiểu giữa logo và các thành phần xung quanh là ½ kích thước Logo.
Font chữ sử dụng là Arial. Tại Top Menu
Màu nền của Top Menu là #000
Các link có màu #fff
d) Bước 4: Sử dụng các công cụ Text, Image và Layer để tạo các layer trong
group Featured như sau:
Trong đó:
Các đề mục có kích thước 320x100px, màu nền #999, màu chữ #fff Ảnh trong các đề mục có kích thước 60x60px
e) Bước 5: Sử dụng các công cụ Layer, Image Tool tạo các layer
Hình 2.10. Thiết kế phần tin tức bằng Photoshop
Trong đó: Kích thước layer này là 320x460px.
Kích thước ảnh là 300x150px
Cỡ chữ phần “Tin tức Poly” 16px đậm, màu chữ #21759B. Cữ chữ tiêu đề bài vết đầu tiên: 16px đậm, màu chữ #000 Cỡ chữ phần except 12px, màu chữ #333
Cỡ chữ 3 bài viết tiếp theo 11px, đậm, màu chữ #4c4c4c, màu bullet #c00
f) Bước 6. Copy các layer được tạo trong bước 5 vào layer group
Hình 2.11. Thiết kế phần Poly góc nhìn bằng Photoshop
g) Bước 7: Sử dụng cơng cụ Text, Layer và Line Tool để tạo các layer trong
group Events như sau
Hình 2.12. Thiết kế phần sự kiện bằng Photoshop
Trong đó:
Màu nền của Event: #FE3905
Màu chữ: #fff
Màu chữ phần ghi ngày: #000
Kích thước text “SỰ KIỆN”: 16px, chữ hoa
Đường kẻ phân cách: 1px, kiểu liền, màu #FF5807
h) Bước 8: Sử dụng các công cụ Image Tool, Text và Layer để tạo các layer
Hình 2.13. Thiết kế phần thư viện ảnh bằng Photoshop
Trong đó:
- Phần chữ “Thư viện ảnh” cỡ 16px, màu #21759B, đậm, Kích thước mỗi ảnh là - 100x80px
- Khoảng trống giữa ảnh và đường viền : 4px, Độ cong của đường viền : 4px. - Màu đường viền là #ddd, kích thước chữ dưới mỗi ảnh là 13px, màu chữ #333
i)Bước 9: Sử dụng các công cụ Layer (Pattern), Text và Image để tạo các layer
trong group Footer, kết quả cuối cùng như sau:
Hình 2.14. Thiết kế phàn liên hệ bằng Photoshop
Trong đó: Màu chữ: #fff Màu link: #FFB3B3
Pattern sử dụng trong layer có màu đậm, các icon sử dụng từ Google Plus và Facebook
Bước 10: Vào File / Save hoặc nhấn Ctrl + S để lưu file.
3.1.4. Thiết kế giao diện trên WordPress cho thiết bị di động sử dụng Twitter Bootstrap ( các bước chi tiết tham khảo phụ lục 2)
Nguyên tắc:
Hiện tất cả các thành phần lên, sau đó thêm class visible-phone với những thành phần chỉ hiển thị trên thiết bị di động và hidden-phone với các thành phần không hiển thị trên thiết bị di động.
Sử dụng media query trong CSS để tác động đến những thành phần có kích thước xác định
trình duyệt và sự kiện $(window).resize() để bắt sự kiện thay đổi kích thước trình duyệt.
3.1.5. Tối ưu hóa ảnh hiển thị trên thiết bị di động (ảnh hiển thị trên điện thoại nhỏ hơn, lazy load, nén ảnh )
Mặc định, Twitter Bootstrap tự động resize kích thước ảnh sao cho kích thước lớn nhất bằng với kích thước trình duyệt để hiển thị trên mobile tốt hơn. Tuy nhiên, để giảm thời gian tải, chúng ta nên:
- Tối ưu hố hình ảnh: có thể sử dụng cơng cụ có sẵn trong WordPress hoặc
timthumb, resize bằng tay hoặc công cụ lossless compress của Google.
- Tải nội dung khi cần thiết (lazy load): có rất nhiều cơng cụ cho phép tải nội dung khi và chỉ khi người dùng cuộn nội dung tới phần liên quan. Trong WordPress, có thể sử dụng plugin BJ Lazyload tại địa chỉ http://wordpress.org/extend/plugins/bj-lazy-
load/để làm việc này.