Profesjonalny Hosting

Przeglądając dziś projekt strony, którą mam nadzieję w niedalekiej przyszłości przerobić (jak otrzymam zlecenie) przez przypadek zauważyłem ukryty odnośnik do strony WWW. Wszedłem na stronę i niechcący znalazłem naprawdę świetny generator przycisków w technologii Flash. Adres strony jest banalny: http://www.flashbuttons.com Niestety nie chce mi się dziś przechodzić przez proces instalacji butonów, gdyż jest już późno, a trzeba by wgrywać pliki na serwer. Btw. Polecam, bo to naprawdę piękne przyciski.

O innym generatorze przycisków na stronę WWW.


wtorek, 30 grudnia 2008 0 komentarze

Thumbnails.org to portal umożliwiający zapisanie podglądu strony www w pliku graficznym. Ma on jednak trzy wady:

  1. Wymaga rejestracji (jest darmowa)
  2. Podgląd jest w bardzo niskiej rozdzielczości (tak było w testowanej przeze mnie darmowej wersji)
  3. Dodatkowo wymaga zamieszczenia kodu HTML na stronie, na której chcemy zamieścić podgląd.
Portal Thumbizy daje o wiele więcej znacznie niższym nakładem pracy:
  1. Nie wymaga rejestracji.
  2. Posiada aż 4 możliwe do ustawienia rozdzielczości.
  3. Jest całkowicie darmowy (korzysta z licencji Creative Commons szczegóły...).
  4. Nie zawiera oczojebnych, wkurwiających reklam.


podgląd - www.thumbizy.com

Jednak najlepszą opcją jest chyba możliwość podlgądu całej strony. Ponieważ trudno jest to sobie wyobrazić posłużę się Thumbizy :)

Podgląd mojego bloga w wykonaniu Thumbizy


Powyższe materiały oparte są o licencję CreativeCommons uznanie autorstwa, użycie niekomercyjne, bez tworów zależnych.






sobota, 27 grudnia 2008 0 komentarze

Jak zrobić głosowanie za pomocą gwaizdek w HTML/CSS
Jak zrobić gosowanie za pomocą gwiazdek w PHP
Jak zrobić gosowanie za pomocą gwiazdek w PHP wersja 2 poprawiona.

Powyższe przykłady nie są łatwe do zrobienia, wymagają wiedzy i cierpliwości. Jeśli ktoś potrzebuje projekt na wczoraj to może skorzystać z FiveStar. Jest to moduł oryginalnie zaprojektowany przez Lullabot i wspierany przez Acquia. Moduł gwiazdek na Blogger jest dostępny w wersji testowej, ale ja jestem z niego niesamowicie zadowolony. Na dole widać ramkę z proponowanym przez ten moduł wpisem wartym przeczytania.

Wspomnę, że jeszcze, że FiveStar został oryginalnie napisany dla Drupal, a za wspierającą go Acquią stoi sam Buyaert.

Zanim poznałem FiveStar korzystałem z gwiazdek Blogfroga, ale obecnie już z nich rezygnuję, bowiem znam lepsze, a dwa różne systemy głosowania wyglądają głupio.



dodajdo.com



http://geoclimate.com.au/

Wykonanie jest pierwszą rzeczą, która przyciągnęła moją uwagę do tej witryny. Zwraca uwagę podział na sekcje: nawigacja z kontaktami i 3-pozycyjnym menu: Home, Kontakt i Prawa Autorskie. Dalej mamy logo firmy, nagłówek. Następnie przechodzimy do stonowanego menu, obok którego widnieje obrazek. Treść strony zawarto w trzech białych kolumnach, z których każda dotyczy działalności firmy. Na samym dole stopka.

Wyróżniłem grubą czcionką kluczowe części witryny. Dzięki temu zwróciłem już na to uwagę czytelników. Teraz przejdę do omówienia każdej z tych 7 składowych części, które się mają przyczynić do sukcesu Twojej witryny sieciowej.

  • Nawigacja - właściwie pełni ona tutaj rolę nagłówka, ale ponieważ w specyfikacj W3C nagłowkiem są oznaczane elementy blokowe, np. h1, h2, itp. nie chcę tutaj mieszać pojęć. Dlatego troszkę nietypowo nazwę tę część Nawigacją. W przypadku tej witryny nawigacja stanowi łącznik pomiędzy witryną internetową firmy a realną firmą. Telefon i adres email pozwalają na błyskawiczny kontakt, a pozostałe informacje są w zasadzie standarem w tej chwili - powrót do strony głównej, kontakt i nieco informacji prawnych i technicznych dot. witryny. Jak już wspomniałem jest to taki standard, który się narodził pewnie wraz z powstaniem takich platform webowych jak WordPress, Drupal czy Joomla.
  • Logo - co tu dużo mówić na temat loga, graficznie uzdolniony nie jestem, ale widzę, że to logo jest bardzo dobre. Pasuje do stylistyki strony, wyróżnia się, ładnie się komponuje z poniższym menu. Ważne, że przyciąga uwagę.
  • Nagłówek - mimo iż napisany niezgodnie ze standardami (takie rzeczy jak profil działalności zwykło się umieszczać w h1) to spełnia swoją rolę znakomicie. W 2 linijkach mamy przedstawioną wieloletnią tradycję firmy oraz jej obecny profil działalności (ujęty w trzy słowa kluczowe).
  • Menu - Jak już wspomniałem wraz z logiem tworzą dobre wrażenie. Menu jest szerokie, po najechaniu myszą delikatnie podświetla się. Ogólnie nic niezwykłego. Pokreślam 3 produkty, które się znalazły w menu - naprowadzają one czytelnika na konkretniejszy profil niż jest on ujęty w nagłówku.
  • Obrazek to główny element projektu witryny. Jest świeży, zielony, ekologiczny i nadaj stronie indywidualnego charakteru. Kolory nawigacji są zaczerpnięte z obrazka. Obrazek i zielona stylistyka infoprmują, że mamy do czynienia z czymś ekologicznym, mimo, iż to słowo bezpośrednio nie zostało na stronie użyte. Ekologia wkońcu jest w modzie i może przyciągnąć potencjalnego klienta.
  • Treść właściwa to sedno strony i jej powód istnienia. Firma po raz kolejny chwali się jaka ona to nie jest, czego to ona nie posiada by wkońcu dać Tobie, znurzonemu już tą grą i napewno napalonemu na ich produkt - dać wiadomość, że możesz się stać szczęśliwym posiadaczem tego produktu i to na partnerskich, równych zasad. A to dobre!
Firma permanentnie na każdym kroku promuje siebie. Zwróćcie uwagę na Menu i pierwszą z 3 kolumn na białym tle: AboutUs. Są z siebie dumni. Chcą się przedstawić w jak najlepszym świetle, aby na końcu (Our Services) się dobrze sprzedać na zasadzie "partnerstwa".

Niestety stronie brakuje czegoś. To coś jest w moim mniemaniu animacją żywej biedronki na tym soczystym, zielonym liściu (może gdzieś tam w oddali jest jakieś zakopcone, nieszczęśliwe miasto?). Animacje takie nie mają sensu bycia na tzw. Front Page, czyli Stronach wejściowych... z wielu powodów. Lecz gdyby zastosować tego typu animację zamiast statycznego obrazka, to strona odżyłaby i stanowiła by krok milowy w stronę wizerunku firmy high-tech.

czwartek, 25 grudnia 2008 0 komentarze

Muszę wkleić kod w dowolne miejsce posta! 865b4e253280d804a50054b3c29f9a67 Żenujące. Blogbox, cóż to za głupi pomysł! Nie dało się tego zrobić inaczej, ukryć w tagach html?

środa, 24 grudnia 2008 0 komentarze

Fryzjerski scuttle
Formuła 1 i Psychoterapia
Pozycjonowanie, newsy, internet, auta, czyli Wykop (zawieszony do 1-go stycznia)
http://prymus.niop.pl/ - PR2, niestety polskie kodowanie się wali tematyk - kadry, zasoby ludzkie, turystyka

wtorek, 23 grudnia 2008 0 komentarze


Blogger

  • Lepsza pozycja w wyszukiwarce (Google lepiej traktuje swoje produkty od konkurencyjnych a Blogger jest wyjątkowo dobrze, lepiej niż YouTube, sprawdzone)
  • Brak podstron
  • Ciekawe, wręcz genialne widżety
  • Problemy ze standardami
  • Prostszy w edycji
  • Druga pod względem popularności platforma blogowa
  • Można przenieść na własną domenę
WordPress
  • Pozwala tworzyć podstrony
  • Trudny w edycji
  • Podobno dobrze się indeksuje w wyszukiwarce Google
  • Posiada mnóstwo darmowych skórek
  • Posiada mnóstwo widżetów
  • Najpopularniejsza platforma blogowa
  • Można zainstalować na własnej domenie

Banalność edycji, łatwe w instalacji, dobrze działające dodatki to główne zalety Bloggera. Brak podstron uznaję za jego największą wadę. Jest jeszcze słabe radzenie sobie ze standardami wynikające z prostoty kodu blogu Google. Mam też jak to mówią Czesi napad - widzę przyszłość, w której Blogger może mi już nie wystarczyć do segregowania treści.

WordPress to kombajn. Jest bardziej rozbudowany od Bloggera, posiada też większą ilość widżetów, ale jest trudniejszy w obsłudze i mniej intuicyjny (trzeba się przyzwyczaić).

Polecam WordPress dla tych którym Blogspot już nie wystarczy.

Chcąc zaprojektować dobrą stronę www nie możesz kierować się wyłącznie swoim widzimisię, a nawet widzimisię Twojego zleceniodawcy. (pisze o tym Jacob Cass na swoim blogu). Musisz pisać przede wszystkim dla użytkowników. A ci mają już wyrobione swoje zachowania, sposób w jaki zwiedzają strony, swój tryb poszukiwania informacji.

Jakob Nielsen zauważył i opisał na swoim blogu jeden z modeli, z jakiego korzystają użytkownicy. Polega on na tym, iż przeglądają oni witrynę w trzech liniach: dwa razy od lewej do prawej by zjechać pionowo w dół. Tak narodził się częsty model F przeglądania strony. Najlepiej wyjaśni to obrazek.




Narzędzie, którym zostały zrobione obrazki nazywa się EyeTracker. Jak widać na w/w obrazkach użytkownicy przeglądają witryny w rzędach od lewej do prawej i jeśli nie znajdą szybko informacji przeglądają witrynę w dół, przy czym klikalność pierwszych bloków witryny jest kilkukrotnie wyższa niż kolejnych.

Na sam koniec dodam, że użytkownicy przeglądając witrynę zachowują się trochę bezmyślnie. Bowiem z grafik tu przedstawionych wyraźnie widać, iż tak naprawdę to sami nie wiedzą czego poszukują. Kilkają bezmyślnie w pierwszy lepszy sektor i surfują dalej.

Przy okazji wyszła mi tutaj jedna rzecz, że byłem w błędzi sądząc, że userzy zawsze patrzą wpierw na lewy górny róg strony. W pierwszych dwóch przypadkach byłoby to więc Menu/Nawigacja boczna, lecz tak się nie stało. Co więc zachęciło użytkowników pokazanych stron an kliknięcie w to czy tamte miejsce? Mógł być to kolor, który podobno jest szalenie ważny, a im jażniejszy tym większą uwagę przykówa. Wypadało by więc, aby użytkownik głupi kliknął na żółte lub pomarańczowe menu. Tymczasem on jest skrupulatnie omijał. Na temat kolorów pisałem w tym poście: Znaczenie kolorów na stronach www. Wynikało z niego, że użytkownicy powinni klikać w ten żółty i pomarańczowy (oba ciepłe, zachęcające do klikania) kolor. Tak się jednak nie stało. Moja odpowiedź dlaczego: bo ponieważ najjaśniejszym kolorem był w tym wypadku biały!

Technika, którą m.in. testuję na tym blogu, to oznaczanie najważniejszych treści najjaśniejszym kolorem. Jedynie w wypadku treści tekstowych byłem gotów na wyrzeczenie, ale chyba czas to zminić. Od teraz dam na biało linki, a niech treść postów będzie jasno-zielona.

Więcej na temat użytkowników z deseniem F można poczytać na stronie www.useit.com


Chris Spooner ze strony Vectortruts.com zebrał i przedstawił te 30 pięknych projektów logo.

Pokażę tylko niektóre z nich. Całość możesz obejrzeć Tutaj.










niedziela, 21 grudnia 2008 0 komentarze

AboutUs.Org odnalazłem przez przypadek w trakcie mojego zwykłego kopania w sieci. W pierwszym momencie wydawało mi się, że strona posiada jakieś niebywałe informacje na temat domen. Wpisałem więc przykładową domenę i zobaczyłem coś, co w pierwszej chwili wyglądało na ...katalog! Konkretnie chodzi tutaj o to, że wczytano title, opis, słowa kluczowe i miniaturkę mojej strony. Z jedną różnicą, że każde słowo kluczowe zostało przetworzone z automatu na linka :) Od razu oczywiście kliknąłem...

Co się okazało, nie były to zwykłe tagi, lecz automat przetworzył słowa kluczowe zaczerpnięte z mojej strony na kategorie. Niby serwis Web 2.0 a jednak jakiś inny. Już myślałem, że jakiś geniusz przerobił Scuttle gdy wtem ujrzałem button edit wiki. Nie jest więc co żaden katalog, scuttle, autorski skrypt, lecz przerobiona Wikipedia?? Niemożliwe, gdyż dokładnie pamiętam - dziś po raz pierwszy widziałem kopię Wikipedii na domenie jakiegoś pozycjonera. Myśląc, że edytuję czyjąś kopię Wikipedii wrzuciłem na główną stronę Wolnej Encyklopedi słowo k###a (pewnie już mam bana). Wracając do tematu, nie chciałem wierzyć, że to może być ten sam skrypt, ale ujrzałem coś, co mi przypomniał czasy gry w Neverwinter Nights, gdy przesiadywałem na stronie Wiki tej gry i widziałem tam coś takiego. Ktoś postawił tam Wiki! Eureka ;p

Ach, i żebym pamiętał MIAŁEM TYLKO KUPIĆ DOMENĘ NA ZAPLECZE!!!!!!!!!!

* na podstawie listy katalogiseo.info



























































































IDadresPRlink zwrotnyG IPG BL
11
Katalog stron firmowych - StronyFirm.pl
????
10
Katalog Transportowy
0N51-1
9
Katalog Transportowy
0N29-1
8http://www.wyszukaj.com/5T??
7katalog.gryfow.info0N3870
6natopie2N15809
5http://skocz.com6T strona główna
4http://katalog.bajery.pl5wymagany
3http://www.katalog4u.com5wymagany
2http://strony.swiata.pl4wymagany
1Byleco.info1nie

sobota, 20 grudnia 2008 0 komentarze

Na podstawie katalogiseo.info























































IDNazwa PR gipgblYip Ybllink zwr.freemod uwagi
3
Artykuły Od Fan-shop.pl
211013320-+-
2
P.Page Artykuły Od Miasto-pila
160413220n0+-
1http://www.wielcy-sportowcy.com/0218131082++-

I.
Pytanie. Jeśli stworzę 3 subdomeny, wstawię unikalny content ukierunkowany i podlinkuję je stąd, a następnie #1 i #2 zalinkują do trzeciej a ta trzecia zalinkuje do pierwszej - Czy Google uzna pierwszą i trzecią subdomenę za najbliższe sąsiedztwo? Co się stanie ze stroną 'matką', czyli tym blogiem. Czy zajmie ostatnie miejsce, czy też ze względu na swoją moc (poprzez zasiedzenie) znajdzie się na pierwszym miejscu.

Odp. Ponieważ domeny linkując oddają część swojej mocy, to wyniki wyszukiwania będą następujące:

  1. 1
  2. 3
  3. 2
Jak przy tym wypadnie ten blog pozostaje zagadką.

II.
Skąd Google wie, że np. musztarda jest bliższa majonezowi niż świątecznym bombką? Zakładam, że to wie dzięki obserwacji zachowań ludzkich. Naprawdę, zatrważająca maszyna ten Google.

Google ustala
sąsiedztwo na tej samej zasadzie, co pokrewieństwo słów. Myśli kotłują mi się niemiłosiernie, chyba skoczę na piwo dla rozluźnienia. Wcześniej jeszcze dodam sobie linka do mojego postu, który popełniłem na forum PiO.

piątek, 19 grudnia 2008 0 komentarze

Niestety nie jestem w stanie przenieść większości menusów na bloga, ponieważ są one mocno zakodowane w html/css. Z pewnością zajęłoby mi to więcej niż dzień.
1. Podświetlane menu
http://www.cssplay.co.uk/menus/visitedmenu.html
2. Wyskakujący opis
http://www.cssplay.co.uk/menus/menuseven.html
3. Pochyłe buttony
http://www.cssplay.co.uk/menus/menutwelve.html
4. Ostatnio popoularne - dodatkowa strzałka po najechaniu kursorem + podświetlenie
http://www.cssplay.co.uk/menus/top_pointer.html
5. Nowoczesne menu 3d
http://www.cssplay.co.uk/menus/pro_horizontal#nogo
6. Schowane menu podwójne
http://www.cssplay.co.uk/menus/tabs_two.html
7. Menu poziome butony 3d
http://www.cssplay.co.uk/menus/centered_sliding_doors.html
8. Nadpisujące się zakładki
http://www.cssplay.co.uk/menus/overlap.html
9. Wysuwane w prawo, przeźroczyste menu
http://www.cssplay.co.uk/menus/side_tabs.html
10. Menu w kształcie wysuwanego języka
http://www.cssplay.co.uk/menus/pull_tabs.html
11. Neonowe menu
http://www.cssplay.co.uk/menus/neon_menu.html
12. Wysuwane w dół menu z przeźroczystością
http://www.cssplay.co.uk/menus/opaque_dl.html
13. Czarno białe obrazki po najechaniu myszą zmieniają się w kolorowe!
http://www.cssplay.co.uk/menus/flickerfree_mk3.html
14. Menu z wyskakującymi obrazkami
http://www.cssplay.co.uk/menus/enlarge.html
15. Wielopoziomowe menu
http://www.cssplay.co.uk/menus/dd_valid.html
16. Dodatkowe menu rozwijane pod hover
http://www.cssplay.co.uk/menus/dd_valid_2.html
17. Eleganckie menu kaskadowe (podobne do poprzedniego)
http://www.cssplay.co.uk/menus/drop_line.html
18. J/w
http://www.cssplay.co.uk/menus/pro_dropline.html
19. j/w, ale z przeźroczystością
http://www.cssplay.co.uk/menus/pro_dropline7.html
20. Kaskadowe z kolorowymi obrazkami na hover
http://www.cssplay.co.uk/menus/pro_dropline8.html
21. Styl Apple
http://www.cssplay.co.uk/menus/pro_line_down_fly.html
22. Kolejne profesjonalne i całkiem ładne menu kaskadowe z dropline
http://www.cssplay.co.uk/menus/pro_left_right_line.html
23. Bardzo ładnie wyglądające profesjonalne menu, przeźroczystość i flyout
http://www.cssplay.co.uk/menus/flyout_horizontal.html
24. Komercyjny dropdown z przeźroczystością
http://www.cssplay.co.uk/menus/drop_variation.html
25. Profesjonalny dropdown podwójny
http://www.cssplay.co.uk/menus/pro_drop7
26. Wariacja na temat dropdown
http://www.cssplay.co.uk/menus/skeleton2.html
27. Regał w bibliotece



czwartek, 18 grudnia 2008 2 komentarze

Do niedawna wstawiałem na swoje strony taką czcionkę, jaka mi się podoba. To był błąd. Niestety większość popełnia ten sam błąd. Dowiedziałem się, że różne czcionki mogą mieć różne zastosowania i nie wszędzie pasują. Poniżej znajduje się moja lista najpopularniejszych czcionek i rodzaje zastosowań, jakie dla nich znalazłem. Zapraszam do lektury.


  1. Franklin Gothic Medium

    Gotyk jest dość ważnym elementem w dziejach - głównie zachodniej kultury. Czcionki gotyckie jako forma przekazu podkreślają wyrafinowanie i są symbolem czasu. Używaj czcionek gotyckich tylko na stronach kapeli metalowych, rockowych i na wszystkim co jest związane z ezoteryką. Czcionka będzie też świetnie wyglądać na kartkach miłosnych.


  2. Century Gothic

    Century Gothic to wariacja gotyckiej czcionki. Nie jest tak elegancka jak Franklin, wręcz powiedziałbym, że byle jaka, wieśniacka. Cóż, może ktoś ją wykorzysta do przedstawienia swojej wsi o średniowiecznych tradycjach ;) Obie czcionki są bezszeryfowe, ale używaj ich tylko, aby nadać stronie odpowiedni, mhroczny wygląd. ;)


  3. Georgia

    Georgia, (z ang. Gruzja) jedna z najlepszych czcionek. Jest to czcionka szeryfowa, co oznacza, że nienajlepiej się ją czyta. Będzie odpowiednia dla tytułów i nagłówków, oraz ważniejszych wiadomości.


  4. Impact

    IMPERIUM KONTRATAKUJE! Tak, ta czcionka ma kosmiczny styl. Jeśli akurat piszesz stronę na temat Gwiezdnych Wojen, to musisz tej użyć.


  5. Helvetica

    Dzieło szwajcarskich skrybów, zwane kamieniem milowym typografii. Najczęściej stosowana czcionka przez webdizajnerów. Microsoft zapożyczył ją sobie od nich i zmienił nazwę na Arial, przez co ta czcionka jest defacto najczęściej stosowaną czcionką na świecie. Mimo wielu wad w sumie mogę ją polecić.


  6. Script

    Unfortunatelly there is no known to me polish version of this font, so if You like, You can choose it to write on some foreign project. The best of this font is that it is stylish anb rememberable. Coca-Cola and Pepsico are signing their's products by this. Script is althought too small for me, but maybe there are better sized versions that this.


  7. Arial

    Ta czcionka jest wszędzie. Też masz jej już dosć? Btw. Widzisz jakąś różnicę między nią a Helveticą?


  8. Comic Sans MS

    Ta czcionka cieszy tylko słiitaaśnee blondynki z migających na różowo blogów Onetu. Wprawdzie są jeszcze mali chłopcy w przedszkolu, którzy nie mają nic przeciwko jej... Moim zdaniem nadaje się wyłącznie na stronę główną Domowego Przedszkola, ostatecznie na blog poświęcony komiksom.


  9. Lucida Console

    Czcionka dla prawdziwych geeków. Jest absolutnie najlepszą czcionką z jaką miałem do czynienia. Użyje jej tylko ten, kto bez chwili zastanowienia umie wymówić "~" albo "CMD" (ja nie). Nadaje się na stronę główną gier takich jak Quake.


  10. Times New Roman

    Znakomicie nadaje się na tytuły i nagłówki, ale tekst napisany za jej pomocą staje się nieczytelny. Oryginalnie ta czcionka została stworzona z myślą o pisaniu w wąskich kolumnach.


  11. Verdana

    Verdana to moja ulubiona czcionka. Jest bardziej czytelna niż Arial i nie jest tak rozjechana jak czcionki konsolowe (Console). Staram się ją stosować wszędzie. Źle wygląda jako nagłówek lub tytuł strony.


  12. Tahoma

    Jest podobna do Verdana, ale jej litery stoją znacznie bliżej siebie, przez co ta czcionka traci czytalność. Nie znajduję dla niej żadnego zastosowania, Verdana jest lepsza. Jeśli masz jakiś pomysł, zostaw proszę komentarz.





Inspiracja: Jacob Cass
Just Creative Design



Serwis CIS (Chapin Information Service) przeprowadził test pięciu najpopularniejszych przeglądarek pod kątem ich zabezpieczeń haseł użytkownika. W zestawieniu udział wzięły:

  • Opera 9.62
  • Firefox 3.0.4
  • Internet Explorer 7.0
  • Safari 3.2
  • Google Chrome 1.0






Opera 9.62 Firefox 3.0.4Internet Explorer 7.0Safari 3.2Google Chrome 1.0
77522

Ostateczne wyniki testu pokazują, że przeglądarki oparte o WebKit (Safari, Chrome) najsłabiej chronią hasła użytkowników.


Źródło: http://webhosting.pl/Chrome.i.Safari.slabo.chronia.hasla.uzytkownika

wtorek, 16 grudnia 2008 1 komentarze

Tagi to słowa kluczowe. Blogger umożliwia Tobie dodanie listy tagów. Funkcja ta ma pewne wady, gdyż:


  • wygląda archaicznie i nieprofesjonalnie

  • niepotrzebnie zajmuje dużo miejsca

  • elementy odróżniają się cyferką postawioną obok, co jest po prostu brzydkie

Poza tym serwisy Web 2.0 nauczyły się pokazywać słowa kluczowe właśnie w formie chmury tagów. Jeśli wyposażysz swojego bloga w taką chmurę tagów, ludzie pomyślą, że to wygląda profesjonalnie. Zyskasz dzięki temu prestiż lub może nawet nowego/-ych czytelnika/-ów.



Jeśli znasz język angielski z pewnością możesz przejść od razu na stronę http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html, gdzie znajdziesz obszerniejszą instrukcję jak zamieścić Chmurę Tagów na Bloggerze.



Dla tych, którzy nie znają angielskiego.


  1. Przechodzimy do zakładki Ustawienia - Edytuj kod HTML

  2. W kodzie odnajdujemy linię ]]>‹/b:skin›

  3. Wklejamy poniższy kod powyżej odnalezionej linii

    /* Label Cloud Styles
    ----------------------------------------------- */
    #labelCloud {text-align:center;font-family:arial,sans-serif;}
    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
    #labelCloud a{text-decoration:none}
    #labelCloud a:hover{text-decoration:underline}
    #labelCloud li a{}
    #labelCloud .label-cloud {}
    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
    #labelCloud .label-cloud li:before{content:"" !important}

  4. Poniżej tej samej linii kodu ]]>‹/b:skin› wstawiamy


    ‹script type='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    ‹/script>


    Tu ważna informacja. Kolejno CloudMin oznacza minimalną ilość użyć, aby tag został wyświetlony (w domyśle jest 1), MaxFontSize to maksymalny rozmiar czcionki elementu, który występuje najczęściej, MaxColor to maksymalna wartość koloru, który jest współzależny MaxColor i MinColor. MinFontColor jest domyślnym rozmiarem najrzadziej występującego elementu. lcShowCount odpowiada za liczbę użyć tagu (false lub true jeśli chcesz, żeby liczba powtórzeń była widoczna).


  5. Ostatecznie pozostaje nam odnaleźć ostatnie miejsce w kodzie: ‹b:widget id='Label1' locked='false' title='Labels' type='Label'/›
    Znajduje się ono prawdopodobnie na samym dole kodu. Zastępujemy tę linijkę następującym kodem:


    ‹b:widget id='Label1' locked='false' title='Label Cloud' type='Label'›
    ‹b:includable id='main'›
    ‹b:if cond='data:title'›
    ‹h2>‹data:title/>‹/h2›
    ‹/b:if›

    ‹div class='widget-content'›
    ‹div id='labelCloud'/›
    ‹script type='text/javascript'›

    // Don't change anything past this point -----------------
    // Cloud function s() ripped from del.icio.us
    function s(a,b,i,x){
    if(a>b){
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
    }
    else{
    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
    }
    return v
    }


    var c=[];
    var labelCount = new Array();
    var ts = new Object;
    ‹b:loop values='data:labels' var='label'›
    var theName = "‹data:label.name/›";
    ts[theName] = ‹data:label.count/›;
    ‹/b:loop›

    for (t in ts){
    if (!labelCount[ts[t]]){
    labelCount[ts[t]] = new Array(ts[t])
    }
    }
    var ta=cloudMin-1;
    tz = labelCount.length - cloudMin;
    lc2 = document.getElementById('labelCloud');
    ul = document.createElement('ul');
    ul.className = 'label-cloud';
    for(var t in ts){
    if(ts[t] < cloudMin){
    continue;
    }
    for (var i=0;3 > i;i++) {
    c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
    }
    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
    li = document.createElement('li');
    li.style.fontSize = fs+'px';
    li.style.lineHeight = '1';
    a = document.createElement('a');
    a.title = ts[t]+' Posts in '+t;
    a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
    a.href = '/search/label/'+encodeURIComponent(t);
    if (lcShowCount){
    span = document.createElement('span');
    span.innerHTML = '('+ts[t]+') ';
    span.className = 'label-count';
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    li.appendChild(span);
    }
    else {
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    }
    ul.appendChild(li);
    abnk = document.createTextNode(' ');
    ul.appendChild(abnk);
    }
    lc2.appendChild(ul);
    ‹/script›

    ‹noscript›
    ‹ul›
    ‹b:loop values='data:labels' var='label'›
    ‹li›
    ‹b:if cond='data:blog.url == data:label.url'›
    ‹data:label.name/›
    ‹b:else/›
    ‹a expr:href='data:label.url'›‹data:label.name/›‹/a›
    ‹/b:if>
    (‹data:label.count/›)
    ‹/li›
    ‹/b:loop›
    ‹/ul›
    ‹/noscript›
    ‹b:include name='quickedit'/›
    ‹/div›

    ‹/b:includable›
    ‹/b:widget›


Ze specjalnymi znakami jest tak, że większość z nich nie możemy wpisać naciskając jeden klawisz, lecz wpisując 7-8-io znakowy kod. Tabelę kodów możemy znaleźć na stronie earthlink Dlaczego o tym piszę? Ano dlatego, że Jakub na swojej stronie justcreativedesign zamieścił całkiem ciekawy artykuł (uwaga) pt. “13 znaków, że jesteś złym designerem”.

W poprzednim zdaniu ukryty jest cały powód zamieszczonej notki.

13 znaków, że jesteś złym designerem


Ten styl cudzysłowi jest bardziej stylowy, nowoczesny i hmmm.. jaki jeszcze? Ładny?

Szkoda, że ostatnio nie zrozumiałem dyskusji dotyczącej odmiany słowa cudzysłów, bo pewnie w tej chwili popełniłem gafę. :)

poniedziałek, 15 grudnia 2008 0 komentarze

Jakie kolory stosować?

Gotowych rad tu nie znajdziesz, bo takowych uniwersalnych nie ma, można jednak podkreślić pewne aspekty składajace się na identyfikację kolorów.

  • Różnice społeczne, kulturowe - zarówno globalne, np biały jest uznawany za kolor żałoby w japoni i korei, u nas czarny z fioletowym do tego służy.

    Jak i różnice lokalne np. wiek wśród odbiorców, młodzi w naszej komercyjnej kulturze przewaznie wolą kolory jaskrawe, czyste (pewnie z przyzwyczajenia, bo właśnie takie wyraźne kolory dostarcza się małym dzieciom), podczas gdy starszym osobom lepiej zafundować bardziej stonowane kolory.

    Można tu też zaliczyć status społeczny, polityk będzie się ubierał tak jak inni politycy. A młody buntownik tak jak inni buntownicy. Oczywiście są wyjątki jeżeli ktoś chce sie wyróżnić, podkreślać swoją odmienność w danej grupie społecznej np. Jacek Kuroń w niebieskiej koszuli.

    Jak widać w tworzeniu stron www, warto zwrócić uwagę do kogo tak w zasadzie kierujemy naszą stronę, do jakiej grupy społecznej, kierujesz do ekologów - rób na zielono, kierujesz do osób starszych rób w pastelach.

  • Doświadczenia uniwersalneczerwone znaki drogowe - czyli te które dotyczą każdego z nas, np. kolor czerwony jako kolor związany z emocjami i ciepłem, (ogień,krew i serce ktore utrzymuja nas przy życiu itp) nie często też występuje naturalnie, chyba że się np. pokaleczymy. Przykłuwa uwagę na całym świecie i wywołuje szybkie emocjonalne reakcje, np używany jako czerwony znak STOP (zielony jechać, czerwony stop) - do szybkiego reagowania. Badania nad mózgiem dowodzą, że w sytuacjach kryzysowych (wymagajacych szybkiej reakcji) emocje mogą wziąść górę nad świadomym myśleniem, o to własnie chodzi niektórych zastosowaniach tego koloru np. w połączeniu z niebezpieczeństwem, skoro tak czy inaczej daje on silny bodziec dla emocji. Można stosowac na stronie internetowej w podobnych celach, choć pamiętaj aby nie za wiele, bo za dużo emocji, to nie zdrowo i traci wtedy swoje znaczenie.

    Weźmy jeszcze np. niebieski, żyjemy w końcu pod tym samym niebem, i oglądamy podobne powierzchnie wody. Niebieski jest przeźroczysty, nieskończony, nieograniczony, czysty i daleki. Niebieskie przedmioty oddalają się, oczywiście to tylko złudzenie, spowodane tym że niebo zawsze było daleko i nieosiągalne, zjawisko to można np. wykorzystać do próby przybliżania innych kolorów, w kontraście z niebieskim. Jeszcze taka mała ciekawostka dawniej malowano domy na niebiesko, bo owady nie lubią latać w strone niebieskiego, mają poprostu powody by nie przemiesczać się w górę w stronę nieba, a człowiek to wykorzystał.

    Jeszcze jeden z podstawowych czerwone znaki drogowe kolorów został do omówienia, jest nim żółty. Żółty - pochodzący od Słońca, tego słońca które przez wiele lat było uważane nie za gwiazdę, ale za bóstwo. Jak już o bóstwach mowa to mamy też żółte pioruny od gromowładnego. Żółte słońce i żółty ogień, siarka - umożliwały poznawanie świata przez rozświetlanie dróg, gdyby nie te źródła światła to świat nie byłby ten sam, stąd niesie ten kolor ze sobą duże znaczenie jako kolor władczy i porządany. Nawet w dzisiejszych czasach, w których tak sobie cenimy złote ozdóbki (kolejne bóstwo) i potrafimy się o nie nawzajem pozabijać. Jak kiedyś słońce tak teraz "żółty" prąd dostarcza nam powodów do życia i radości. Dzieki temu wszystkiemu żółty jest dla nas najbardziej widocznym i rzucającym sę w oczy kolorem, niesie ze sobą zarówno porządanie jak i niebezpieczeństwo. Robotnicy na budowach mają żółte ubrania, czy też żółte kaski aby było ich widać z daleka. Jest często używany przy tworzeniu reklam, właśnie ze względu na swoja widoczność.


  • Kolory, a kategorie produktów - przygotowywując się do stworzenia, czy też reklamowania jakiegos produktu, najpierw szukamy części wspólnych tego produktu z daną kategorią produktów, a potem dopiero cech wyróżniajacych. Do części wspólnych kategori produktów często zaliczany jest właśnie kolor, np. komputery i elektronikę często spotykamy w różnych skalach szarości. Jeżeli masz na swojej stronie jakieś produkty warto się zastanowić czy nie mają one jako cechy wspólnej jakiegoś koloru.

    Dlaczego warto podkreślić rolę części wspólnych? - w procesie uczenia się, ostatnim stadium jest zapominanie o tym że stosujemu daną wiedzę, staje się ona dla nas codziennością. Np. mleko zawsze jest białe, nie musimy tego sprawdzać, właśnie ta swiadomość pozwala nam sprawniej funkcjować - raz sie nauczyliśmy, a potem z góry zakładamy że to mleko jest białe, tak samo z każdym innym popularnym produktem.

    Można oczywiście próbować stosować element zaskoczenia, próbowac się wyróżnić. Kiedyś znalazłem w osiedlowym sklepie jakieś desery mleczne w czarnym opakowaniu, chyba coś nie szły, bo długo stały, więcej ich nie spotkałem. Bardziej przypominały znicze niż kategorie produktu do której należały.



  • Cechy grup produktów związane z koloremchmury lekkie i ciężkie - kolory też kojarzą nam sie z różnymi cechami, np. niektóre kolory mają swoją wagę. Biały waży kilka gramów, podczas gdy czarny kilka kilogramów. W modzie są produkty z napisem "Light" (lekkie, mają mało cukru itd), opakowania tych produktów też są lekkie. Czarne pastylki odchudzające? - jakby to wygladało, albo z drugiej strony białe ciężarki do ćwiczeń? Mamy lekki puch śniegowy, lekkie chmury i ciężkie ciemne chmury.

    Czarny garnitur - ciężki rozwazny, dlatego pewnie niektórzy kojarzą go z finansami, bo chcą aby ich kasa była w rozważnych stanowczych rękach mocno stąpających po ziemi. Lepiej tak, niż w białym lekkim wybielonym lekkoduchu - który umywa ręce.

    Kolejna sprawa kolory ciepłe: pomarańczow, żółty, czerwony - stymulują do działania, energiczne, w porównaniu z kolorami bardziej uspokajającymi - niebieski, zielony, fioletowy, szary (używanymi np. jako zimne tło dla lepszego kontrastu).



  • Moda na kolory - doskonałym przykładem jest np. "czarna wołga" - inna już być nie może. Czy też "gorączka złota", mówiąca o dobitym znaczeniu zółtego koloru. Można też tu wspomnieć o kolorze będącym ostatnio w modzie, zapoczątkowanej poprzez "pomarańczową rewolucję".

    Oprócz takiej mody, mamy jeszcze powatrzające sie zjawiska uwielbienia niektórych kolorów, np. czerwone mikołaje, czy serca na walenetynki. Czy też zieleń na wiosnę.

To by było na tyle o znaczeniu kolorów, mam nadzieję że od tej pory zaczniesz trochę inaczej je postrzegać bardziej wykorzystywać ich znaczenie. Pamiętaj jednak aby nie brać żadnej interpretacji za jednej i jedynie słusznej, działającej uniwersalnie, każdy człowiek jest inny, ma inną percepcję wynikajacą z doświadczenia. Dlatego każdy kolor ma dla każdego odrobinę inne znaczenie, związane z innymi emocjami, skojarzeniami.



wtorek, 9 grudnia 2008 0 komentarze

Strona http://www.mycoolbutton.com
oferuje nam wygenerowanie przycisku na własną site. Możemy wybrać interesujący nas kształt, kolor, styl i rozmiar napisu oraz grafikę. Fajny bajer.
Przykłady:




















Polecam również darmowy generator przycisków Flash na stronę WWW

poniedziałek, 8 grudnia 2008 0 komentarze

Całkiem niezły sposób na dodanie Gwiazdek na Bloggera opatentowali nasi polscy blogerzy. Otóż sposób jest banalnie prosty, mimo, iż ktoś musiał na niego poświęcić aż 2 dni.

Instrukcja:

  • Wchodzimy w Pulpit Nawigacyjny > Ustawienia > Układ > Edytuj Kod HTML
  • W polu Edytuj szablon zaznaczamy Rozszerz szablony widżetów
  • Odnajdujemy fragment kodu:

  • Wklejamy kod:
     
  • wtorek, 2 grudnia 2008 0 komentarze
    Profesjonalny Hosting

    Najnowsze