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

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

spinjsJuż 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

userfly.com 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)

Zmiana wyglądu pól radio i checkmark formularzy 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ć]

Sposób na własne czcionki na stronach WWW

sIFRIstnieje metoda na umieszczenie napisu wykonanego dowolnym krojem czcionek na stronie WWW. Napis tak umieszczony będzie „zaznaczalny” i „kopiowalny” – słowem, będzie zachowywał się tak jak powinien. Co ważne – crawlery wyszukiwarek będą ten napis widzieć w sposób naturalny, czyli zastosowanie tej metody nie wpłynie ujemnie na SEO ani dostępność. Działa pod wszystkimi popularnymi przeglądarkami.

Mowa o sIFR (Scalable Inman Flash Replacement). Technika ta jest połączeniem javascriptu i flasha (w którym wyświetlany jest krój czcionki). Działanie sIFRu jest bardzo proste: Na początku ładowana jest strona (x)html. Następnie skrypt js sprawdza, czy jest zainstalowany flash – jeśli nie jest, napisy które miały być wyświetlone zewnętrzną czcionką, pozostaną wyświetlone czcionką zdefiniowaną w CSS. Jeśli flash jest zainstalowany, js w miejsce podmienianego napisu „wkleja” obiekt flasha zawierającego kod actionscript, który generuje określony napis w określonym kroju czcionek. Wszystko się dzieje w ułamku sekundy, często niezauważalnym przez użytkownika.

Technologia sIFR jak widać jest ciekawa i działa wręcz bezbłędnie. Jednak nie zamierzam jej używać bo: 1) nie jest dostępna dla osób nie używających js lub/i flasha lub używających jakiegoś adblockera 2) taka kombinacja powoduje niepotrzebną komplikację kodu strony, 3) każdy flash obciąża nieco procesor i powoduje wolniejsze działanie przeglądarki na słabszych maszynach (a wciąż się z takimi spotykam). Kilkadziesiąt flashy na stronie może zablokować przeglądarkę.

Niemniej – technologia sFIR jest ciekawym rozwiązaniem którego kiedyś bardzo poszukiwałem. Gdyby jakiś Klient bardzo marudził nad konieczną zmianą kroju na jakiś fikuśny, sIFRa będzie można mu zaserwować :)

[edit: jest też inne, lepsze rozwiązanie: wiki.github.com/sorccu/cufon … ale płatne :( ]