Sitenizi Hızlı Erişim için İyileştirin!

By metude, Çağlar Yeşilyurt

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.

İçindekiler Listesi

Giriş

11.10 ile birlikte, Opera'nın masaüstü sürümü sitelerin Hızlı Erişim'de nasıl görüntüleneceğini belirlemeye izin veriyor. Varsayılan olarak, Hızlı Erişim web sitenin ekran görüntüsünü kullanıyor. Ama artık site yöneticileri, özel bir ikon, Hızlı Erişim'e özel CSS ya da içerik belirleyebilirler.

Logo kullanmak

Bu bölümde Hızlı Erişim'e özel bir logo ya da ikon kullanımına bakacağız.

HTML5'de ikonlar

Muhtemelen yer imleri ikonlarını tanıyorsunuzdur. İlk olarak 1999'da Internet Explorer 5'de tanıtılmıştı.

HTML4 özelliklerine dahil edilmemesine rağmen, tarayıcı üreticileri sonunda icon değeri için rel tanımına link elementinde kısayol ikonu desteğini ekledi. Apple, sonraları dokunmatik cihazlarında kullanmak için bunu apple-touch-icon olarak genişletti. HTML5 özelliklerine göre, icon artık for the rel tanımı için geçerli ve standartlaşmış değer oldu.

Hızlı Erişim ikonu tanımlarken

Hızlı Erişim ikonu tanımlamak, kısayol ikonu tanımlamaya çok benzerdir. Sadece sayfanızın head kısmına bir <link> etiketi eklemeniz gerekiyor.

<head>
    <title>Opera Türkiye</title>
    <link rel="icon" type="image/png" href="http://logonuzun/konumu/neredeyse.png">
</head>

Hızlı Erişim ikonları:

En az 114 piksel genişlik, 114 piksel yükseliğe sahip olmalı. Bu varsayılan ikon boyutudur ve bundan küçük ikonlar yoksayılacaktır.
Formatları PNG, JPEG ya da GIF olmalıdır. SVG resimleri şimdilik desteklenmiyor. Hareketli görsellerin sadece ilk karesi kullanılacaktır.

Varsayılan olarak maksimum ikon boyutu 256 piksel genişlik, 160 piksel yüksekliktir. Bundan büyük ikonlar sığdırılmak için yeniden boyutlandırılacaktır (demo). Kullanıcılar varsayılan genişlik ve yüksekliği opera:config'den değiştirebilirler.

Öbür yandan, Opera 11.10 apple-touch-icon, apple-touch-icon-precomposed ve image_src parametreleri için destek verecek.

Birden çok ikon kullanmak

Ayrıca birden çok ikon tanımlayabilirsiniz. Bu özellik ile kullanıcılarınız sayfayı yer imlerine eklediğinde başka bir ikon alacaklar, Hızlı Erişim'e eklediklerinde başka bir ikon alacaklar.

<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>

Eğer birden çok ikon tanımlarsanız, Hızlı Erişim için büyük olanı seçecektir (demo). Eğer iki ikon da aynı boyuttaysa, öncelik ilk bağlantıya verilecektir (demo).

Hızlı Erişim girdiniz için özel içerik hazırlamak

Hızlı Erişim girdisine özel içerik ve biçimlendirme sağlamak için bir kaç yol var. Bunlar: CSS'de view-mode:minimized, X-Purpose HTTP header ve otomatik yenileme. Bu bölüm hepsini açıklıyor.

`view-mode:minimized` kullanmak

The Speed Dial screen in Opera 11.10

Şekil 1: Opera 11.10 'da Hızlı Erişim ekranı

view-mode ortam özelliği için görüntülenme moduna göre özel bir stil tanımlar. view-mode: minimized kullanarak Hızlı Erişime alternatif stillendirme ya da içerik sağlayabilirsiniz. view-mode özelliği diğer ortam özellikleri gibi çalışır. device-width gibi. Her ortam sorgusu gibi stillendirme, bir @media bloğu içinde olmalıdır.

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

Ya da harici bir stil dosyasını bağlantı olarak verip, (view-mode: minimized)ortam değişkenlerini tanımlayın.

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

Çalışan view-mode: minimized örneği görün.

view-mode: minimized'de Hızlı Erişim'in 256 piksel genişlik, 160 yüksekliğe bağlı olduğunu unutmayın.

X-Purpose Header kullanmak

Hızlı Erişim girdinizi farklı URL'de sunmak da mümkün. Bunun nedeni Hızlı Erişim isteklerinin X-Purpose: preview içermesidir.

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

Bu headerı tespit ederek başka hangi URL'nin sunulacağı, Hızlı Erişim'e gönderilen dosyaların sınırını ya da farklı bir içeriği göstermekte kullanabilirsiniz. Bunun kullancının Hızlı Erişim girdisinde tıkladığı adresi değiştirmeyeceğini unutmayınız.

Aşağıdaki örnekte, tüm Hızlı Erişim isteklerini /preview.html adresine yönlendirmek için Apache'nin mod_rewrite'ını kullanıyoruz. (Gerçek dünyada bundan daha özel şeyler yapabilirsiniz)

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

Ya da aynı adreste farklı içerikler sunmayı sağlamak için sunucu taraflı bir dil kullanmayı tercih edebilirsiniz. Aşağıdaki örnek PHP kullanıyor.

<?php
if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') {
    // Hızlı Erişim içeriğini gönder
} else {
    // Düzenli olarak içerik gönder
}
?>

Düzenli aralıklarla içeriği yeniletmek

Hızlı Erişim içeriğinizi daha dinamik yapmak için kulanıcı, siteyi Hızlı Erişim bölmesine yerleştirdiğinde otomatik olarak yenilenmesini sağlayan bir davranış oluşturabilirsiniz. Bunu 2 adımda yapabilirsiniz.

meta etiketi kullanmak:

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

Preview-Refresh tepki için başlık ayarlamak:
```
Preview-Refresh:3600
```

Not: Bu değer saniye cinsinden tanımlıdır. Yukarıdaki parametre, Hızlı Erişim'i her saat yenilenecek.

Hızlı Erişim önceliği

Hızlı erişim ilk olarak önceliği view-mode: minimized CSS parametresine verir. Eğer bu stil kullanılabilir değilse, tarayıcı ikon için bakacak. Eğer tanımlı ikon da yoksa, ya da ikon dosyası kayıp-hasarlı ise, Hızlı Erişim web sitesinin bir ekran görüntüsünü kullanacaktır.

Opera ürün desteği

Şimdilik bu geliştrimeler sadece Opera Masaüstü kullanıcıları için kullanılabilir.

Diğer belgeler

Links from the WHATWG HTML5 specification (İngilizce)
View mode media feature specification (İngilizce)

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