Opera Logo

Trochę czasu minęło od ostatniego wpisu – wynika to z braku czasu, a nie braku pomysłów na wpisy (tych mam aktualnie całkiem dużo) i dziś coś krótkiego oraz sympatycznego – przeznaczonego specjalnie dla ludzi posiadających własną stronę lub bloga w Internecie. Jak wszyscy wiemy w przeglądarce Opera istnieje od ładnych kilku lat mechanizm SpeedDial (to te boksy z ulubionymi witrynami, które są widoczne, gdy kliknie się Nowa karta). Od niedawna jednak mechanizm ten został rozbudowany o kilka ciekawych rozwiązań. Pierwsze to możliwość wykorzystywania własnego obrazka dla własnej strony w SpeedDial i tym się w poniższym wpisie zajmiemy. Druga ciekawa nowość (ale już na kiedy indziej) to rozszerzenia do Opery, które umieszczają się jako nowy boks w SpeedDialu i mają pewną funkcjonalność. Pomysł tego rozwiązania jest o tyle ciekawy i innowacyjny, że dość trudno wymyśleć dobre zastosowanie dla tego feature’a. Oczywiście jest kilka rzeczy, które od razu przychodzą na myśl, ale nie jest ich zbyt dużo… Ok, z inwencją twórczą nigdy nie było u mnie fenomenalnie, to się nie będę wypowiadał ;]

Reasumując: spróbujemy dziś przerobić widok miniaturki naszej własnej strony. Mamy w tym kierunku 2 główne możliwości: możemy zrobić własny obrazek o odpowiednich wymiarach, który będzie wykorzystywany przez przeglądarkę do zastąpienia miniaturki (na ogół to będzie polecana opcja) albo możemy zmodyfikować styl CSS używany, gdy strona pobierana jest przez aktualizatora miniatur Opery. Gotowy boks dla mojego bloga jest widoczny po prawej stronie.
puredev-speeddial-view

Obrazek zamiast miniaturki

Chcąc użyć własnego obrazka należy przygotować ikonkę o wymiarach minimalnych 114px na 114px, a maksymalnie 256px na 160px. Nie ma stałych proporcji, gdyż te mogą się zmieniać w zależności od ilości boksów w SpeedDialu, jak i od wybranej skórki. Po przygotowaniu i wrzuceniu na serwer dodajemy poniższą linijkę do sekcji Head w naszym pliku z layoutem.

<link rel="icon" type="image/png" href="http://example.com/speeddial_picture.png" />  

Jeśli korzystamy z WordPressa i nie chce nam się grzebać w plikach motywu możemy użyć gotowej wtyczki w tym samym celu. Znaleźć ją można pod adresem: http://wordpress.org/extend/plugins/opera-speed-dial/. Wtyczka ta nie robi nic więcej ;]

Osobny styl dla SpeedDial

Alternatywnie możemy zmodyfikować wygląd naszej strony pisząc odpowiedni kod CSS dla danego typu view-mode wykorzystywanego w tym celu przez Operę. Przykład poniżej:

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

lub

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

Wykorzystanie tej metody daje nam generalnie nieco więcej możliwości niż statyczny obrazek oraz lepiej wygląda dla różnych wielkości boksa SpeedDial, jednak nie zawsze wygląda tak dobrze jak własnoręcznie przygotowany obrazek w Photoshopie ;]

Podsumowanie

Jak widać SpeedDial daje nam sporo możliwości do poprawienia wyglądu naszej witryny nawet i w miniaturce. Zdaję sobie sprawę, że nie każdy Operę kocha i że nie jest tak popularna, jak powinna być (;]), ale z doświadczenia wiem, że podobny mechanizm pojawi się niedługo w innych wiodących przeglądarkach, więc warto już na przyszłość zdawać sobie sprawę z jego istnienia i już zawczasu podrasować swoją witrynę :)

Tak, to co pokazałem w powyższym wpisie jest wpisane w standard jako W3C Candidate Recommendation, więc jest to coś więcej niż tylko “fajny pomysł” ludzi z Opery.

W międzyczasie polecam dodać mój blog do własnego Speed Diala chociażby po to by przekonać się, że działa jak powinien :)

Referencje

http://www.ramoonus.nl/2011/06/opera-speed-dial-for-wordpress/

http://devfiles.myopera.com/articles/4992/view-mode.html

http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon

http://www.w3.org/TR/view-mode/