publikacja: 19 września 2008, 23:36; autor: Szymon Skulimowski http://wpninja.pl/flashowa-chmura-tagow-ilub-kategorii-w-3d/

Flashowa chmura tagów i/lub kategorii w 3D

Flashowa chmura tagów i/lub kategorii w 3D

Jeśli znudził ci się wygląd standardowej chmury tagów to być może powinieneś wypróbować WP-Cumulus-a. Wtyczka ta potrafi wygenerować flashową animację tagów i/lub kategorii i, po drobnej przeróbce, wspiera także polskie znaki diakrytyczne.

Jak „to” w ogóle wygląda?

Przykład można obejrzeć na blogu LJDiaz.com (na dole prawego sidebara). Chmura zmienia kąt i prędkość obracania się względem pozycji kursora myszy. Trzeba przyznać, że utrudnia to nieco kliknięcie w konkretny element, zwłaszcza gdy jest on małych rozmiarów.

Z poziomu panela administratora będziemy mogli ustalić taki dane jak:

  • kolor fonta i tła (wspierana jest także przeźroczystość),
  • wysokość i szerokość jaką zajmować będzie flash,
  • prędkość obracania,
  • rozłożenie elementów (losowe lub względem wagi),
  • rodzaj elementów (tagi i/lub kategorie),
  • zaawansowane parametry (liczbę elementów, rozmiary fontów itp.)

Instalacja

  1. Pobrać z repozytorium, rozpakować, uzyskany katalog przegrać na serwer do katalogu z wtyczkami (wp-content/plugins) i aktywować w panelu administracyjnym.
  2. Wstawić na bloga poprzez:
    • dodanie widgetu (panel administracyjny-wygląd-widgety, o ile szablon z którego korzystasz je obsługuje),
    • lub stworzenie nowego wpisu lub strony i w treści podanie [WP-CUMULUS],
    • lub wywołanie dowolnym miejscu w plikach szablonu funkcji
      <?php wp_cumulus_insert(); ?>.

Polska wersja

Podążyłem za wskazówkami otrzymanymi od autora i przygotowałem polską wersję chmurki. W końcu nie każdemu chciałoby się ściągać ważącego 500MB triala Adobe Flash CS3 tylko po to aby dopieścić jakąś tam wtyczkę do WordPressa, prawda? :-)

Aktualizacja:
Kuba przedstawił u siebie sposób na zamianę polskich znaczków na zwykle slugi. Polecam jako alternatywę dla mojej paczki :-).

Komentarze (38)

  1. Anonim (19 września 2008, 23:42) #:

    chmura tagów jest ekstra.jedno tylko pytanie czy jest ona do zainstalowania wylącznie na www? czy w prezentacjach ppt też można czegoś takiego użyć?

  2. Szymon Skulimowski (19 września 2008, 23:47) #:

    Nie znam się na prezentacjach (uff, dziękuję opatrzności, że nigdy nie musiałem tego robić) ale jeśli umożliwiają one inkludowanie elementów flashowych (.swf) wraz z zewnętrznym plikiem xml przechowującym dane to tak, da się :-)))

  3. Tomek (20 września 2008, 0:23) #:

    Super wtyczka :) Zastąpiła u mnie tradycyjne tagi :)

  4. Szymon Skulimowski (20 września 2008, 0:25) #:

    @Tomek,
    A ściągnąłeś spolszczenie animacji? Bo jakoś nie wyświetlają Ci się polskie znaczki w tagach.

  5. Tomek (20 września 2008, 11:06) #:

    No tak, zapomniałem :)

  6. dzg (20 września 2008, 11:07) #:

    no stary jakbys wiedzial czego szukalem :D

  7. Hadret (20 września 2008, 16:49) #:

    Ojej, Flash? Nie, nie, dziękuję (:

  8. Ravicious (20 września 2008, 18:15) #:

    Tak jak Hadret, flashowi raczej podziękuje…

  9. seoblogi (22 września 2008, 12:15) #:

    Witam
    Dzięki za tłumaczenie, fajnie się ta chmurka prezentuje na moim blogu blogów :)

  10. Chumber (29 września 2008, 16:41) #:

    No i w tym momencie powstaje dylemat: lepsza wizualizacja czy może lepsze skanowanie przez pająki?

  11. Szymon Skulimowski (30 września 2008, 0:54) #:

    No i w tym momencie powstaje dylemat: lepsza wizualizacja czy może lepsze skanowanie przez pająki?

    Albo lepiej – kto przeglądając stronę w ogóle używa chmury tagów? Ja bardzo, bardzo, bardzo rzadko.

  12. dzg (30 września 2008, 1:01) #:

    u mnie przynajmniej powinny grać ważną rolę ;)

  13. aniec2 (30 września 2008, 13:30) #:

    działa bez zarzutu! Tego mi brakowało „GŁOWA” a nie „GLOWA”:)

    Pozdrawiam

  14. Szymon Skulimowski (4 listopada 2008, 12:04) #:

    Kuba opisał u siebie sposób na zamianę „ą, ć, ę…” na „a, c ,e”. Polecam:
    http://kubazwolinski.com/2008/11/04/odjechane-tagi/ :-)

  15. Dejw (13 lutego 2009, 14:30) #:

    @Szymon Skulimowski
    Wszystko super, ale chyba przez pomyłkę podczas dodawania polskich znaków, wyłączyłeś zmienną „hicolor” z działania (nie podświetlają się tagi, kiedy wskazujemy je myszką).

    @Chumber
    Jeśli komuś zależy na robotach, może jednocześnie wypisywać zawartość chmury tagów do html, zamiast narzekać. Trzeba tylko zmodyfikować troszkę ten plugin, ale pewnie to już za trudne ;-)

  16. Szymon Skulimowski (13 lutego 2009, 14:46) #:

    Wszystko super, ale chyba przez pomyłkę podczas dodawania polskich znaków, wyłączyłeś zmienną „hicolor” z działania (nie podświetlają się tagi, kiedy wskazujemy je myszką).

    Wydaje mi się, że w momencie gdy robiłem polskie pliki (wrzesień) to wtyczka w ogóle nie miała jeszcze tej opcji. Jak znajdę czas to zaktualizuję pliki. :-)

    Dzięki za informację!

  17. Tomek (13 lutego 2009, 15:24) #:

    Ja już od dawna niestety nie mam PL bo z każdą aktualizacją, trzeba zmiany od nowa wprowadzać a człowiek strasznie leniwy ;)

  18. Dejw (14 lutego 2009, 18:35) #:

    Wszyscy Ci, którzy nie lubią flasha na stronach, mogą zobaczyć ten plugin w wersji Java Script pod adresem http://student.agh.edu.pl/~fatyga/projects/stratus/example.html

    Dla tych co od razu wytkną, że „jest beznadziejny” zastrzegam się: powstał on z wczoraj na dziś. Zostało jeszcze dużo do napisania, ale efekt już jest zbliżony do rzeczonego Wp-Cumulusa.

  19. Tomek (14 lutego 2009, 19:10) #:

    Zapowiada się nieźle :)

  20. palmiak (14 lutego 2009, 20:36) #:

    Cacy, ale…

    Na komputerze uzbrojonym w Core duo 2×2 giga + 2 giga ramu pod Fedorą 10 zajętość wyglądała następująco:
    Opera przed: CPU0 ~4% CPU1 ~7%
    Opera po odpaleniu: CPU0 ~11% CPU1 ~55%

    Fx przed: CPU0 ~5% CPU1 ~9%
    Fx po odpaleniu: CPU0 ~21% CPU1 ~98%

    Wyniki pobrane za pomocą top, oczywiście troszkę na oko bo nie przepisywałm wszystkiego w tabelki i nie robiłem różnych obliczeń.

    Wnioski należy wysnuć samemu, a autorowi życzę miłej optymalizacji :)

  21. Dejw (14 lutego 2009, 23:48) #:

    @plamiak
    U mnie nieoczekiwanie działa troszeczkę lepiej (sprzęt mam taki sam z zastrzeżeniem, że pamięci o połowę mniej).

    To prawda, że wydajność nie jest mocną stroną projektu, ale dla porównania u mnie oryginalny flashowy plugin zabierał porównywalnie dużo zasobów. Poza tym, na początku zawsze działa wolniej a potem się rozkręca.

    Może wyeliminowanie pośredniości w postaci zewnętrznej biblioteki zmniejszy narzut chociaż trochę. Mimo wszystko i tak nie uda się tego zoptymalizować do „zadowalających” wyników. W ostateczności całość działa całkiem znośnie dla małej ilości tagów ;-)

  22. Chumber (15 lutego 2009, 12:37) #:

    Nom… CPU trochę obrywa … :/ Z dwojga złego chyba ten flash lepszy?

  23. Dejw (15 lutego 2009, 12:56) #:

    Niestety tutaj muszę się zgodzić, że jak na razie flash wygrywa. Poza tym wersje JS napisałem jako alternatywe dla tych co nie chcą aby wymagane było posiadanie dodatkowych pluginów, żeby oglądać ich stronę, bo wygrać z flashem w tej konkurencji będzie dość ciężko.

  24. Szymon Skulimowski (16 lutego 2009, 23:18) #:

    Wszyscy Ci, którzy nie lubią flasha na stronach, mogą zobaczyć ten plugin w wersji Java Script pod adresem http://student.agh.edu.pl/~fatyga/projects/stratus/example.html

    Fajna sprawa. Mam nadzieję, że uda Ci się zoptymalizować swój projekt. :-)

  25. Dejw (16 lutego 2009, 23:48) #:

    Nawet po optymalizacji projekt będzie pozostawiał wiele do życzenia pod względem zajętości procesora, więc nie ma się co nastawiać na rewolucję ;-)

  26. Łukasz Więcek (17 lutego 2009, 2:06) #:

    I bo ja wiem, czy to jest aż takie fajne. Widziałbym coś takiego tylko jako osobną podstronę bloga. W sidebarze o szerokości 300px ta animowana chmura jest całkowicie niepraktyczna. Czytelne są tylko te największe agi, które akurat znajdują się „najbliżej” nas – a cała reszta jest „czymś” w tle.

    Jak dla mnie to przerost formy nad treścią.

  27. Lukas (22 lutego 2009, 19:52) #:

    Chciałbym zgłosić buga, który się wkradł. Oprócz zgłaszanego braku podświetlenia, polska wersja ‚tagcloud.swf’ przestała obsługiwać gradient kolorów dla tagów.

    Czy ktoś już to zgłaszał? Niestety nie mam flasha CS3 by to naprawić. Możliwe, że jakiś krok opisany przez autora pluginu został pominięty.

    Będę wdzięczny Szymonie za info na maila. Dziękuję serdecznie!

  28. elo_ziomek (19 maja 2009, 13:21) #:

    Witam,
    trafiłem na ten temat szukając na googlach „chmura tagów” – bardzo ciekawe rozwiązanie, dopisuję się tutaj żeby podać przykład chmury tagów który znalazłem, widać że ktoś ją moim zdaniem fajnie zmodyfikował choćby to że się zatrzymuje po najechaniu na tag, looknijcie: qna.info.p, poprosiłem o udostępnienie kodu chmurki, jeżeli będzie można, w komentarzach dodam info gdzie ten kodzik można dostać, bardzo fajny temat pozdrawiam i szukam dalej:)

  29. elo_ziomek (19 maja 2009, 13:21) #:

    pomyłka literowa: http://www.qna.info.pl

  30. me (23 czerwca 2009, 18:39) #:

    Witam,

    Czy działa wam ta polska wersja z tej strony? U mnie dalej nic (widzi tylko: ó)

    Próbuje juz na 100 sposobów:
    np:
    i.addVariable(„tagcloud”, „ółźćń„);

    albo

    i.addVariable(„tagcloud”, „%25C3%25B3%25C5%2582%25C4%2585%25C5%25BC%25C5„);

    i dalej nic.. testowałem na kilku przegladarkach, z najnowszym plugnem flash…

    Gdby był ktoś w stanie pomóc..

    Dziękuję, pozdrawiam.

  31. margoo (23 czerwca 2009, 19:23) #:

    Jak w tej zmodyfikowanej wersji ustawić kolor tła? Ten ostatni parametr przy wywoływaniu SWFObject nic nie zmienia (a w oryginalnej wersji działa świetnie)… muszę sie ratować ustawieniem transparentności, ale to z drugiej strony nie działa na linuxie.

    Z góry wielkie dzięki za wskazówki.

  32. www (13 lipca 2009, 7:37) #:

    Moze ktoś napisać, w który miejscu zmienić wielkość tej chmury?
    Próbowałem w każdym możliwym i nic;/:(

  33. Gość (25 sierpnia 2009, 5:23) #:

    >> No i w tym momencie powstaje dylemat: lepsza wizualizacja czy może lepsze skanowanie przez pająki?

    Nie trzeba rezygnować ani z jednego, ani z drugiego.
    Boty Google już świetnie indeksują tekst we flashu.

  34. Alik (15 września 2009, 17:16) #:

    Oj, przydałaby się ponowna kompilacja z wszystkimi szykanami obłsugianwymi przez wersję angielską. ;)
    Prosimy…

  35. WCbarbi (6 października 2009, 15:05) #:

    A ja trafiłem tu z google i żeby wrzucić chmurę na swoją stronkę trzeba coś zawsze doinstalowywać a tu jest chmura zajebista i jest chodzi na luzie pozdrawiam Dejw -a.

  36. Dejw (19 października 2009, 18:50) #:

    @WCbarbi: Również pozdrawiam ;-) Mimo wszystko odradzam Ci gorąco korzystanie z mojego skryptu :-P Nie może on na razie konkurować z płynnością Flash’a. Może kiedyś to się zmieni, lecz jak na razie żadne znaki na niebie i ziemi nie wskazują, żebym coś w najbliższym czasie poprawił.

  37. enid - M.D.N.S. (23 października 2009, 2:42) #:

    hej, mam prośbę…
    mam blog na bloggerze- blogspot… mam taką chmurę, jednak nie umiem sprawić, aby etykiety/tagi miały polskie znaki, albo chociaż takie puste miejsca… będę baaardzooo wdzięczna za pomoc!
    z góry dzięki
    - Ewelina – „ciemna” w sprawach flash :/

  38. Sebastian (13 listopada 2009, 22:31) #:

    dzięki, działa ekstra!
    Pozdrawiam

Dodaj własny komentarz

Odnośniki z innych stron (3)

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. How to add more characters to WP-Cumulus | Roy Tanck's weblog

    [...] http://wpninja.pl/flashowa-chmura-tagow-ilub-kategorii-w-3d/ Share and [...]

  2. » Trójwymiarowe tagi zwane WP-Cumulus » NaszeWP | Wielki zbiór porad dla Wordpress-a

    [...] znaków. Jednak jak na oficjalnie stronie można się dowiedzieć Polski odpowiednik stworzył Szymon Skulimowski i można pobrać z jego strony tutaj. Chyba że nie chcesz polskich znaków „ą, ś, ł, [...]

  3. Flashowa chmura tagów, czyli szczyt bezużyteczności » IT z ogonkiem

    [...] do blogu WP-Ninja, gdzie znajdziecie szczegółowy opis instalacji tego ustrojstwa w WordPressie: http://wpninja.pl/flashowa-chmura-tagow-ilub-kategorii-w-3d/A co Ty myślisz o takiej flashowej chmurze tagów? Jest sens umieszczać coś takiego na [...]