Stron w sieci jest pełno, więc w takiej pigułce podaję gdzie szukać ikon. Oczywiście warto sprawdzić licencję, czy zezwala nam na użycie ikon w komercyjnych projektach:)

15 wyszukiwarek/katalogów ikon:

1. IconFinder.net
2. Iconarchive.com
3. IconLet.com
4. IconLook.com
5. IconSeeker.com
6. Icons-Search.com
7. EasyIconFinder.com
8. VeryIcon.com
9. www.fasticon.com
10. www.iconspedia.com
11. www.axialis.com
12. www.icojoy.com
13. www.outlawdesignblog.com
14. www.freeiconsdownload.com
15. www.dezignus.com

Kolekcje ikon social media

1. The Best Social Media Icons All in One Place
2. Handycons 2 – another free hand drawn icon set
3. 22 Amazing Styles of RSS Icons Free for your Blog
4. 21 Sets of Free Social Bookmarking Icons for Your Blog

Kolekcje ikon Twitterowych

1. 100+ Remarkably Beautiful Twitter Icons and Buttons
2. The best Twitter Icons for you
3. 181 Free Twitter Buttons, Badges, Widgets and Counters to Help you Find Followers
4. Over 75+ Beautiful Twitter Design Icons

Kolekcja bardzo ładnych ikon

1. 60 Free Vector Icon Packs for Design Professionals
2. 40 Professional Icon Sets For Free Download
3. 40 Beautiful Free Icon Sets
4. 75 Best Free Graphic Design Icon Sets
5. 50 of the Best Ever Web Development, Design and Application Icon Sets
6. The Best Original Freebies by Web/Graphic Designers and Illustrators
7. Free Icon Pack: Web Injection
8. Bagg & Box Telecharger Icon Pack
9. Cemagraphics Icons
10. City Icons
11. Round theme icons
12. PI Diagona Pack (400 ikon)
13. Bagg & Box Telecharger Icon Pack (70 wysokiej jakości ikon)
14. Firefox Icons Packs

… na pewno na tym się nie kończy

Warto śledzić Smashing Magazine i tego typu serwisy.

Tworzenie ikon

Oczywiście ikonki możemy też tworzyć sami. W sieci jest sporo poradników, ba nawet i videotutoriale sie znajdą. W tym celu można skorzystać z programu graficznego (np. Photoshopa) lub innego programu (np. freeware’owy IcoFX w tym celu sprawdzi się doskonale)

Oczywiście w sieci znajdziemy bardzo proste narzędzia pomagające w tworzeniu favico. Faviconka – to po prostu ikona, która pojawia się przed adresem w polu adresowym, zakładkach oraz na liście ulubionych przeglądarki internetowej. Aby stworzyć taką ikonę wybieramy plik wyjściowy (najlepiej obrazek kwadratowy), klikamy „zrób ikonę!” i gotowe.

Narzędzia online  do tworzenie faviconki:

1. favicon.pl
2. favicon.cc
3. favicon.co.uk
4. html-kit.com/favicon

No to tyle w takim telegraficznym skrócie:)

Update:
W międzyczasie trafiłem na Open Icon Library, czyli pakiet zawierajacy:

Unikalnych ikon: 10,787
Unikalnych plików PNG: 10,489
Unikalnych plików SVG: 3,723

Źródło: http://openiconlibrary.sourceforge.net/

Na pewno przyda się każdemu, kto posiada stronę, bloga, projektuje interfejsy systemów, czy po prostu szuka inspiracji.

Stron będących skarbnicami przykładów jest wiele. Przedstawię dziś najciekawsze z nich, do których czasem wracam.

• csszengarden.com – tej strony nikomu nie trzeba przedstawiać
• templatemonster.com – baza szablonów wszelakich
• onepagefolios.com – portfolia wybitnych projektantów
• toptut.com – z tematami do WordPressa
• joomla24.com – z tematami do Joomli
• Brands of the World
• Dot Com Logotypes
• How to Design a Logo
• Free LogoTypes
• Good Logo
• Go Promos
• Logoed
• Logo in Process
• Logomarket.com
• Logotypes Russia
• LogoTypes from Maldolva
• Logotypes
• Satlogo.com
• Sport Logos
• i jeszcze:
• 80 Free 2 Column Templates –
• 101WebTemplates
• Ades Design
• All-in-one Website Templates and hosting packages
• CSS Design Templates
• Design Load
• Elated Web Page Kits (Templates)
• Free Basic CSS Templates
• Free Layouts
• Free Site Templates
• Free Templates & Web Designing
• Free Web Templates
• Free Web Site Templates
• Graphic Templates
• TheNetter.com Web Design
• MyCelly Free CSS Templates
• My Free Template Home
• Open Design Community
• Opensource Web Design Templates
• Opensource Templates
• Professional Dreamweaver Templates
• Studio 7 Opensource Templates
• Template Hunter
• Templates Box
• Templates to Go
• Template Eyes
• Templates Theme Graphics
• Template World
• Web Page Design Templates AU
• Zero Web

Ostatnio natknąłem się też na listę 60 eleganckich projektów zebranych przez Smashing Magazine. Nic tylko oglądać,

Uwaga: Z nieznanych przyczyn kod ten nie działa poprawnie w niektórych przeglądarkach IE [pisząc niektórych nie mam na myśli jakichś wersji – tylko poszczególne egzemplarze].

Wiele razy walidowałem swoje i nie tylko swoje strony, na których znalazły się animacje flash i okazywało się, że wstawiony kod nie był poprawny z naszym ukochanym WWW Konsorcjum i przyjętymi standardami. Oczywiście na wszystko (lub prawie wszystko) można znaleźć lekarstwo, a ja jako dobry “chirurg od stron” takie lekarstwo mam i oczywiście się podzielę wiedzą Trochę czasu poświęciłem by odszukać dobry lek na bolączkę webmastera, dążącego do 100% poprawnego kodu XHTML, zatem zapiszę, bo w przyszłości może przydać się nie raz.

Przy okazji natknąłem się na problem ramek, pojawiających się na najechaniu na Flash, zobaczyłem też co piszą na Adobe i co zrobić, by Internet Explorer poprawnie wyświetlał animacje flash, aż w końcu znalazłem panaceum na poprawnie osadzony kod dla pliku swf, oczywiście dla wszystkich przeglądarek pod Windę, Maca czy Linuksa

W tej paczce mamy dwa potrzebne pliki: Exception.js i FlashTag.js, które umieścimy sobie w katalogu ze skryptami javascript.
W samym kodzie z kolei w head dodajmy:

a w body:

I gotowe:)
Można się delektować.

Dobrze by było jeszcze trochę plik zoptymalizować. W teście narzędzi do optymalizacji CSS prym wiedzie Icey’s CSS Compressor i nic dziwnego, bo ten optymalizator potrafi zredukować wielkość pliku dość znacznie.

Jak widać na dołączonym obrazku redukcja o ponad 25%, czyli z 8.28 kB mamy 6.17 kB.
Co prawda kod nie jest czytelny, ale warto mieć kopię w której ewentualnie poczynimy poprawki i plik poddamy kolejnej optymalizacji.

Innym optimalizatorem godnym uwagi jest CleanCSS, który posiada więcej opcji:

Jednak nie jest tak “skuteczny” ja wspomniany wcześniej Icey’s CSS Compressor.
Wybrałem opcję z największą kompresją i uzyskany plik był mniejszy tylko o 22,5%. Niby szczegóły, ale jednak )
Podobnie CSS Optimizer (z uzyskanym efektem 21,84%) i Flumpcakes (7%) nie wypadły szczególnie.

Pewnie wielu z was zastanawia się, po co to wszystko, ale może tak jeszcze WTF (wytłumaczę to fajnie).
Jeśli mamy naprawdę duży plik .css, to na pewno taki optymalizator może się nam przydać. Gdyby założyć, że o 25Kb udało nam się odchudzić nasz arkusz styli CSS, to przy około 100 użytkownikach dziennie transfer plików z serwera zmniejsza się nam o około 2,5MB, rocznie jest to ponad 900MB, a więc dość sporo. Nie dość, że przyspieszymy ładowanie strony, to zaoszczędzimy na transferze A więc dwie pieczenie na jednym ogniu:)

Silnik Internet Explorera stara się przedstawić niektóre elementy jako prostokąty i tym sposobem ułatwić sobie ich pozycjonowanie i renderowanie. Elementom, które uważa za nadające się do
uproszczonej obsługi nadaje właściwość hasLayout

Tak to czasami bywa, że nieraz jakieś elementy nam się rozjadą pod Explorer’em, podczas gdy w Firefox’ie (Flock’u, SeyMonkey, k-meleon’ie i innych przeglądarkach opartych o Gecko), Operze, czy Safari jest wszystko OK.

Przedstawię to może na przykładzie. Niedawno wspominałem o stronie TwojaPozycja.pl, na niej zresztą znalazłem opisywanego tu buga.

Dodam, że używam fajnego narzędzia, które się zowie Internet Explorer Developer Toolbar, jak widać na dołączonym obrazku w takich chwilach bardzo się przydaje, aby podejrzeć który DIV jest do poprawy

1) Zobaczmy jak wygląda strona rozjechana:

2) Spójrzmy, co trzeba naprawić w kodzie… a więc w arkuszu styli (nasz ulubiony CSS) dopisać: overflow : hidden; position : relative; w linii 80-tej.

3) A teraz spójrzmy jak strona wygląda po naszych poprawkach:

Co prawda już środkowa część nie zjeżdża nam na dół pod lewe menu i jest tam gdzie być powinna, ale reklamy Googiela najeżdżają na stopkę.

Na to też mam lekarstwo

Zauważyłem, że PADDING-TOP w paru miejscach ma za duże wartości i można się nieco pobawić zmniejszając wartości, ale o tym już wspomnę autorowi serwisu w mailu )