(no, js też jest potrzebny)
Jakiś czas temu znalazłem bardzo przydatną rzecz – plugin/skrypt z mapami (w różnych rozmiarach i kolorystykach) z wybieralnymi województwami (dla Polski) lub innymi regionami (dla innych krajów Europy). Fajna rzecz, a po podaniu imienia, nazwiska i e-maila – darmowa. I można stosować w projektach komercyjnych!
cssmapsplugin.com
Tag: skrypty
Postarzanie zdjęć przez Javascript
W dzisiejszych czasach możliwości CSS, js, samych przeglądarek i związanych z nimi dodatków – są niemal nieograniczone. Można wykonać wszystko. Kwestia poświęcenia czasu i zaprogramowania rozwiązania… albo: Odnalezienia gotowego rozwiązania w necie. Bowiem większość rzeczy, które chcesz zrobić – zostało już zrobione i wystarczy dotrzeć do takiego rozwiązania.
Tak też było ze zdjęciami, które Klient chciał mieć postarzone, i to w jednym i tym samym stylu. Mogłem zrobić makro w Photoshopie, ale po co, skoro znalazłem VintageJS – skrypt do modyfikacji zdjęć w locie.
Dostępny dla jQ, Angulara i standalone. Mnóstwo fajnych opcji, można się wtopić w zabawę na długie godziny. Możemy edytować jaskrawość, kontrast, winietę, oświetlenie, kolory (nasycenie, nakładanie, parametry rgb), szum, sepię, ramkę (różnego rodzaju). To dużo opcji. Ale są też fajne gotowce, żeby na szybko coś ogarnąć. Polecam, działa świetnie.
Clippy – narzędzie do tworzenia kształtów
Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.
Fancybox pozamiatał wszystkie lightboxy
To zdarzyło się już dawno temu, ale pomyślałem że warto to mieć na blogu. Otóż jakiś (długi) czas temu porównałem kilka óczesnych rozwiązań overlayerowych dla stron www.
Dzisiaj król jest tylko jeden, a jego nazwa to Fancybox. Ten magiczny skrypcik potrafi w zasadzie wszystko co mógłby potrafić. Jest świetny.
Isotope
Świetny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).
Spin! czyli kręciołek w JavaScript
Już dwa razy poruszałem temat generatorów loaderów: tutaj i tutaj. jednak w obu przypadkach generatory te produkowały grafikę/animację.
Tym razem jest inaczej. Spin.JS to skrypt który tworzy animację ładowania przez kod JS. Animację co prawda słabo konfigurowalną (chociaż – czy słabo? Zobacz ile suwaczków! :)), ale lekką, przyjemną, bez plików, skalowalną, i przyjazną wszystkim przeglądarkom.
Wyostrzanie obrazków w PHP
Gdy za pomocą biblioteki graficznej GD, skalujemy w PHP obrazek w dół – staje się on po prostu nieostry. Jeśli dodać do tego kompresję JPG (która często dla miniaturek ustawiana jest na sporą wartość) – mamy mdłą miniaturkę, niezachęcającą do kliknięcia w nią tak jak powinna zachęcać. Czy jest na to sposób? Owszem – wystarczy przed zapisaniem miniaturki wyostrzyć ją. Początkowo chciałem taki skrypt sam napisać, ale przerosło mnie to. Zatem, po kilkudziesięciu minutach googlowania – znalazłem działające rozwiązanie, tutaj: adamhopkinson.co.uk/blog/2010/08/26/sharpen-an-image-using-php-and-gd
A na bloga wklejam, bo może komuś oprócz mnie też się przyda… Jeśli znasz podobne rozwiązania/tricki, śmiało daj znać w komentarzu.
(Obrazek zapożyczony z docelowego linku)
UserFly – król podglądaczy
Już kilkanaście razy podchodziłem do tematu śledzenia zachowań użytkowników na stronie – za każdym razem kończyło się to fiaskiem instalacji, zbyt zasobochłonnym skryptem lub niezadawalającą prezentacją wyników.
Wczoraj przetestowałem skrypt UserFly, służący do tego celu, i jestem zachwycony. Dlaczego?
- UserFly rejestruje całą interakcję użytkownika z witryną (przewijanie, klikanie, wypełnianie formularzy itp.
- UserFly przedstawia tą interakcję w formie „naturalnych” filmików do oglądnięcia
- UserFly jest bardzo prosty w instalacji – w sekcji head należy wkleić tylko jedną linijkę (i to wszystko)
Ma tylko jedną wadę: nie jest za darmo – za nagranie powyżej 10 filmików trzeba zapłacić – jednak, jeśli komuś zależy na zbadaniu userów swojej strony – zdecydowanie polecam to narzędzie.
A o UserFly dowiedziałem się stąd.
jQuery – mój następny krok
Nauka tworzenia stron większości webmasterów wygląda mniej więcej tak:
- uczymy się podstaw HTML
- uczymy się programować tabelki w HTML
- uczymy się podstaw CSS
- zarzucamy tworzenie w tabelkach, uczymy się modelu pudełkowego
- uczymy się podstaw JS
- uczymy się lepszej obsługi JS i DOM
- udoskonalamy system pudełkowy – layouty wielokolumnowe itp.
- uczymy się AJAX
- …gdzieś po drodze powyższych uczymy się podstaw PHP i MySQL oraz uczymy się tworzenia grafiki… być może także opanowywujemy podstawową obsługę flasha…
- … i co dalej?
Umiemy bowiem w 100% zadowolić naszych Klientów. Nasze witryny zachwycają i (po odpowiedniej dozie pracy) mogą wyglądać i zachowywać się w dowolny wymyślony sposób. Właściwie nie ma granic.
Ależ granice są. Należy się rozwijać. Stagnacja to śmierć. Długo się zastanawiałem
Następnym krokiem, według mnie, powinna być nauka zaawansowanej obsługi dobrego frameworka JS/AJAX. Przejrzałem mozliwości wszystkich popularnych silników tego typu i wybór padł na jQuery. Dlaczego? Jego stosunek parametrów użyteczności, efektywności i efektowności jest po prostu najlepszy. Plus – maszyna jQuery jest naprawdę megałatwa do naumienia nawet dla osób mających tylko blade pojęcie o JS (fakt – jakieś pojęcie trzeba jednak mieć).
Uczę się jQuery namiętnie już od kilku tygodni i im więcej się uczę – tym bardziej opada mi szczęka. :) jQuery rządzi.
Tym, których przekonałem, polecam bardzo dobry kurs jQuery na Ferrante.pl, lub wpisanie jQuery w Google. Wyników będzie sporo.
Definiowalne przyciski radio i checkbox (edit: i select)
Jak wiadomo, wygląd większości pól input i textarea formularzy możemy w dużym stopniu modyfikować poprzez CSS. Jednak gdy chodzi o przyciski zaznaczeń typu radio i checkbox, sprawa nie jest już taka prosta – ich wygląd zależy od używanego GUI – nie da się wyglądu tych przycisków zdefiniować bezpośrednio w CSS.
Jak wiadomo, czego się nie da zrobić przez CSS, robi się przez JS :) Wyszukałem więc rozwiązania problemu podmiany przycisków radio i checkbox na ładniejsze.
Niestety wielu kompleksowych rozwiązań tego problemu w Internecie nie ma – znalazłem dwa:
Prym w tym temacie wiedzie skrypt Fancy Form. Rozwiązanie to działa bez zarzutu prawie wszędzie. Ma jednak wadę (choć dla niektórych zapewne to będzie zaleta) – korzysta z frameworka MooTools.
Istnieje też skrypt CRIR (Checkbox & Radio Input Replacement), który z żadnej biblioteki JS nie korzysta. CRIR to plik javascript, definicje styli CSS oraz dopisanie atrybutówclass=”NowyRadio” i class=”NowyCheckbox” w odpowiednich tagach kodu (x)html (w Fancy Form nie trzeba było tego robić). Daje to możliwość ustalenia wielu różnych wyglądów przycisków zaznaczenia na jednej stronie.
Znalazłem także trzy inne rozwiązania, których niestety nie mam czasu przetestować: Checkbox Replacement Script (o przyciskach typu radio tu nie pomyślano), Rozwiązanie na WebDeveloper.com (także tylko checkboksy) oraz jeszcze jeden, nieco przydługi skrypt.
Mam nadzieję, że komukolwiek zaoszczędziłem czasu tym małym zestawieniem :)
[edit: aby uzupełnić temat, należy jeszcze wspomnieć o NiceForms, który świetnie sobie z ostylowaniem formularzy radzi, oraz, dla równowagi – Gorący apel Riddlea’, aby formularzy NIE stylować]