Hay cho phép trang web của bạn tỏa sáng trên Speed Dial

By SupValya, Ngọc Sơn

The mechanisms to optimize Speed Dial icons covered in this article are only supported in Opera 11.10 to 12.16, and do not work in Opera 15 and later.

Mục lục

Giới thiệu

Với phiên bản 11.10, Opera cho máy tính để bàn cho phép người dùng có thể thỏa sức sáng tạo trong Speed Dial. Mặc định, Speed Dial sử dụng ảnh chụp màn hình của trang web. Nhưng bây giờ bạn có thể chỉ định một biểu tượng hoặc cung cấp CSS dành riêng cho Speed Dial hay những nội dung cụ thể khác.

Sử dụng một logo

Phần này sẽ hướng dẫn bạn cách dùng logo tùy chỉnh hoặc biểu tượng trong Speed Dial.

Các biểu tượng trong HTML5

Chắc hẳn bạn đã quá quen với những biểu tượng của các bookmark. Chúng đã được giới thiệu lần đầu trong Internet Explorer 5 vào năm 1999. Mặc dù không có trong HTML4, các nhà cung cấp trình duyệt cuối cùng đã đồng ý bổ sung biểu tượng lối tắt bằng cách hỗ trợ cho icon như là một giá trị trong rel thuộc tính của phần tử link. Apple sau đó đã mở rộng chuẩn này để các thiết bị liên lạc thông qua apple-touch-icon. Theo đặc tả kỹ thuật của HTLM5, icon giờ là một chuẩn hợp lệ cho thuộc tính rel.

Chỉ định một biểu tượng Speed Dial

Chọn một biểu tượng cho Speed Dial cũng tương tự như chọn biểu tượng cho các lối tắt (shortcut). Chỉ cần thêm một thẻ <link> ở đoạn head trong tài liệu của bạn.

<head>
    <title>My Opera</title>
    <link rel="icon" type="image/png" href="http://path/to/logo.png">
</head>

Biểu tượng Speed dial phải thỏa mãn các điều kiện sau:

Rộng ít nhất 144 pixel và cao ít nhất 114 pixel. Đây là kích thước tối thiểu và các biểu tượng có cỡ nhỏ hơn sẽ bị bỏ qua.
Định dạng ảnh là PNG, JPEG hoặc GIF. Định dạng SVG chưa được hỗ trợ. Chỉ khung hình đầu tiên của một ảnh động được sử dụng.

Mặc định, kích cỡ tối đa của một biểu tượng là rộng 256 pixel và cao 160 pixel. Các biểu tượng lớn hơn sẽ được thay đổi kích cỡ để phù hợp với kích cỡ trên (demo). Bạn có thể thay đổi kích thước mặc định tối thiểu và tối đa bằng cách mở menu opera:config.

Bên cạnh đó, Opera 11.10 cũng hỗ trợ apple-touch-icon, apple-touch-icon-precomposed và image_src.

Sử dụng nhiều biểu tượng

Bạn có thể chỉ định nhiều biểu tượng. Thật tuyệt vời khi bạn sẽ nhận được một biểu tượng khi bookmark trang và nhận được một biểu tượng khác khi thêm trang đó vào Speed Dial.

<head>
    <title>My Opera</title>
    <link rel="icon" type="image/png" href="http://path/to/128x128image.png">
    <!-- This will be the speed dial icon -->
    <link rel="icon" type="image/png" href="http://path/to/200x200image.png">
</head>

Nếu bạn chỉ định nhiều hơn một icon, Speed Dial sẽ chọn biểu tượng lớn nhất (demo). Nếu cả 2 biểu tượng có cùng kích thước, liên kết biểu tượng đầu tiên sẽ được ưu tiên (demo).

Cung cấp thiết kế riêng trong Speed Dial của bạn

Có một vài cách thức mới để tạo thiết kế nội dung riêng phù hợp và tạo phong cách độc đáo cho Speed Dial: view-mode:minimized trong CSS, tiêu đề X-Purpose HTTP, và tự động tải lại. Chúng sẽ được giới thiệu rõ hơn trong phần này

Dùng `view-mode:minimized`

The Speed Dial screen in Opera 11.10

Hình 1: Màn hình Speed Dial trong Opera 11.10

Đặc tính truyền thông view-mode định nghĩa một cách để chỉ định kiểu thông qua chế độ xem. Bằng cách dùng view-mode: minimized, bạn có thể cung cấp cho các kiểu thay thế hoặc nội dung hiển thị đã được thiết kế riêng cho Speed Dial. Tính năng view-mode flàm việc giống như những tính năng truyền thông khác, như là device-width. Như với bất kỳ truy vấn truyền thông, kiểu sẽ được chứa trong một @media block.

@media screen and (view-mode: minimized) {
    body {
        color: #fff;
        background: #b20000;
    }
}

Hoặc bạn có thể liên kết đến một kiểu bên ngoài, và thiết lập giá trị của thuộc tính truyền thông với (view-mode: minimized)

<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">

Xem một ví dụ view-mode: minimized khi nó làm việc.

Hãy nhớ rằng view-mode: minimized tạo nên một khung nhìn Speed Dial có kích thước 256 pixels chiều rộng và 160 pixels chiều cao.

Sử dụng tiêu đề X-Purpose

Nó cũng có thể được dùng để tạo một URL khác cho Speed Dial của bạn. Điều này lí giải tại sao mỗi yêu cầu Speed Dial bao gồm một tiêu đề X-Purpose: preview

GET / HTTP/1.1
Host: www.bbc.co.uk/news
X-Purpose: preview
User-agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; en) Presto/2.8.99 Version/11.10

Bằng cách phát hiện phần tiêu đề, bạn có thể chọn một URL khác, giới hạn các tập tin sẽ được gửi đến Speed Dial, hoặc hiển thị nội dung khác. Chú ý rằng điều này không ảnh hưởng đến cac URL đã được người dùng mở khi click vào Speed Dial.

Trong ví dụ dưới đây, Opera dùng mod_rewrite của Apache nhằm chuyển hướng tất cả các yêu cầu Speed Dial đến /preview.html (có thể bạn sẽ muốn cụ thể hơn so với điều này trong thế giới thực).

RewriteEngine On
RewriteCond %{HTTP:X-Purpose} ^preview$
RewriteRule ^(.*) /preview.html

Hoặc có thể bạn muốn sử dụng một ngôn ngữ từ phía máy chủ để có điều kiện phục vụ các nội dung khác nhau tại cùng một URL. Ví dụ dưới đây sử dụng PHP.

<?php
if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') {
    // Send Speed Dial content
} else {
    // Send regular content
}
?>

Tự động tải lại theo định kỳ

Để thực hiện nội dung Speed Dial năng động hơn, bạn có thể thiết lập để Opera tự động tải lại khi người dùng thêm một trang vào Speed Dial. Bạn có thể thiết lập theo 2 cách

Dùng một tag meta:

<meta http-equiv="preview-refresh" content="3600">

Thiết lập Preview-Refresh như một tiêu đề đáp ứng:
```
Preview-Refresh:3600
```

Chú ý rằng bạn phải thiết lập các giá trị bằng giây. Thiết lập 3600 giây sẽ làm cho Speed Dial tải lại mỗi 1 giờ.

Speed Dial ưu tiên

Speed Dial ưu tiên đầu tiên là view-mode: minimized CSS. Nếu không có kiểu nào khả dụng, trình duyệt sẽ tìm kiếm một biểu tượng.Nếu không có biểu tượng được quy định hoặc nếu các tập tin bị mất hoặc bị hỏng, mặc định Speed Dial sẽ sử dụng một ảnh chụp màn hình của trang web.

Hỗ trợ sản phẩm của Opera

Bây giờ các cải tiến chỉ có sẵn cho người sử dụng Opera Desktop.

Đọc thêm

This article is licensed under a Creative Commons Attribution 3.0 Unported license.