<autoreklama>
Rewolucyjne Witryny Internetowe tani CMS szablony dla stron www retusz zdjec
</autoreklama>

Wpisy otagowane ‘skrypty’

Isotope

środa, 3 Grudzień 2014

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

wtorek, 30 Wrzesień 2014

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

środa, 11 Maj 2011

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

środa, 1 Kwiecień 2009

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

sobota, 14 Luty 2009

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)

sobota, 26 Kwiecień 2008

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

niedziela, 28 Październik 2007
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 :( ]

LightBox, ThickBox, GreyBox i LyteBox: Overlay na WWW

piątek, 3 Sierpień 2007

Ostatnio podczas projektowania pewnych dwóch witryn chciałem zastosować otwieranie obrazków oraz prezentacji Flash jako okienka overlay. Dosyć dokładnie przetestowałem gotowe cztery rozwiązania takiej funkcjonalności: LightBox, ThickBox, GreyBox i LyteBox. Wszystkie mają swoje plusy i minusy, o czym chciałbym opowiedzieć w tym wpisie.

LightBox
LightBox Na pierwszy ogień poszedł, już chwalony przeze mnie na Subiektywie, LightBox. Otóż LightBox jest niemal świetny – działa płynnie i bezawaryjnie. Na pewno na plus zasługują (+) łatwa instalacja i (+) świetne animacje zmian rozmiarów obrazków oraz wysuwania się podpisu, które wyglądają bardzo efektownie. Prawie (+) wszystko jest ładnie konfigurowalne. Ale są też i wady: Otóż (-) LB nie zadziała przed pełnym załadowaniem całej witryny: gdy klikniesz na linka go wywołującego przed zakończeniem wczytywania strony – obrazek otworzy się w nowym oknie. Drugi minus jest jeszcze poważniejszy: (-) LB umożliwia wyświetlanie w overlayu tylko obrazków! I trzeci minus: (-) LB korzysta z biblioteki jQuery Prototype. A jak wiadomo, różne biblioteki js potrafią się ze sobą „gryźć”.

ThickBox
ThickBox Na stronie LightBox’a autor zamieszcza link do ThickBoxa, który umożliwia wyświetlanie nie tylko obrazków, ale także wszelkich innych treści w okienku overlay. No cóż: coś za coś – ThickBox (-) nie jest już tak atrakcyjny wizualnie, nie animuje się i szczerze mówiąc wygląda trochę topornie. Mimo że (+) potrafi wyświetlać wszystko, po dwóch dniach testów zrezygnowałem z jego używania. Dlaczego? Otóż odkryłem dwa poważne mankamenty w działaniu TB: 1) (-) Gdy wyświetlany obrazek nie mieści się w obszarze okna, TB go automatycznie skaluje w dół. Niestety skaluje przez wycinanie linii, co wygląda tragicznie. 2) (-) Nie wiem dlaczego, w IE okienko TB pojawiało mi się zawsze blisko górnej krawędzi witryny, mimo że odpalałem TB z miejsca oddalonego o około 1000px poniżej. To wyklucza jakąkolwiek użyteczność (na witrynie z demonstracją TB działa dobrze, ale u mnie nie pomogła nawet podwójna reinstalacja TB i instalacja na świeżo na innej stronie). 3) (-) Zaznaczenie linka który ma być odpalany przez TB odbywa się za pomocą przypisania klasy „thickbox”, co może bruździć nam w naszym layoucie – ja musiałem kombinować żeby połączyć dwie różne klasy CSS. W innych rozwiązaniach overlayowych odbywa się to za pomocą przypisania parametru rel lub onClick, co jest wygodne i pożyteczne. 4) No i na dokładkę, (-) ThickBox korzysta z jQuery. Za to także całkiem fajnie się instaluje i konfiguruje (+). :)

GreyBox
GreyBox Nasz kolejny bohater jest trochę podobny do ThickBoxa. GreyBox (+) nie korzysta z żadnych bibliotek zewnętrznych, co oczywiście idzie mu na plus – wykorzystać go można wszędzie. Wygląda dobrze (choć to odczucie może być subiektywne). Co prawda nie ma tak wypasionych animacji jak LB, ale wygląda i zachowuje się estetycznie (IMO bardzo fajnie wygląda przeglądarka zdjęć). Odpalany jest przez funkcję JS opisaną w onClick, czyli wygodnie. Poza tym pozbawiony jest dziwnych zachowań w IE, wszędzie zachowuje się tak samo. (+) Instalacja też bez zastrzeżeń. Na minus natomiast zasługuje trochę utrudniona konfiguracja – (-) nazwy klas w CSSie nie są przejrzyste i intuicyjne, wiele rzeczy trzeba kilka razy poprawiać żeby uzyskać pożądany wygląd. Poza tym GB bardzo mi się spodobał i to właśnie na niego padł mój wybór.

LyteBox
LyteBox LyteBox jest w zasadzie podobny do LightBoxa (może dlatego że na nim bazuje), ale (+) potrafi wyświetlać iframki (a więc potrafi w okienku overlay wyświetlić (teoretycznie) wszystko, co potrafi wyświetlić przeglądarka). (+) Wygląda estetycznie i ładnie się animuje, chociaż brak mu tego „klimatu”, jaki da się odczuć podczas używania LightBoxa. (+) Posiada przydatną opcję auto-slideshow, dzięki której nadawałby się świetnie do zaawansowanych galerii zdjęć, gdyby nie fakt że posiada ten sam mankament, co ThickBox – (-) skaluje zdjęcia przez wycinanie linii, dopasowując się do rozmiarów obszaru wyświetlania strony. I – chociaż IMO poważny, to był jego jedyny minus. LyteBoxa (+) instaluje i konfiguruje, a także używa się bardzo wygodnie i intuicyjnie. Nie wymaga on żadnych zewnętrznych bibliotek (choć w poprzednich wersjach korzystał z Prototype). Linki otwierane LyteBoxem definiuje się parametrem rel, więc nasze style linków pozostają naszymi stylami :)

RiddleBox ;)

Na swoim blogu PerfectionOrVanity.com (BTW nowy lay jego bloga jest bardzo fajny, jak i nowa nazwa – bardzo trafna. Chociaż za pierwszym razem przeczytałem PerversionOrVanity ;)), Riddle opracował i opisał rozwiązanie otwierające okienko overlay, wykorzystując głównie CSS, a minimalizując użycie JavaScript. Co prawda, jego rozwiązania nie testowałem, ale wygląda obiecująco. Zamieszczam więc link jako bonus.

Bardzo prawdopodobne (a nawet pewne!) jest istnienie innych rozwiązań wyświetlania overlayowych okienek, których nie opisałem w tym wpisie. Postaram się nadrobić te braki w najbliższej przyszłości.

AjaxDaddy

niedziela, 10 Czerwiec 2007

AjaxDaddy Grxmrx znów mi podesłał fajnego linka: AjaxDaddy to zbiór kilkudziesięciu gotowych modułów ajaxowych typu głosowanie, zakładki itp. na Twoją stronę. Są przykłady, jest kod, są pliki oraz są przejrzyste instrukcje instalacji. Polecam nawet dla AJAXa nie chwytających :)

PageFlip

czwartek, 11 Styczeń 2007

PageFlip 2.2 Flashowe rozwiązanie (link na obrazku obok) świetne do prezentacji np. katalogu produktów. Symuluje książkę – kartki przewraca się prawie tak naturalnie jak w prawdziwej książce. Na kartkach mogą być animacje lub nawet aplikacje (w ActionScript) lub strony WWW, a same kartki mogą byc przezroczyste. No i można je wyrywać :) Najlepsze jednak jest to że ta prezentacja ma status openSource!
I niech mi ktoś jeszcze powie że flash nie jest efektowny.

SWF Upload

wtorek, 5 Grudzień 2006

Jeszcze kilka dni temu z programistką próbowaliśmy rozgryźć problem uploadu na serwer, poprzez HTTP, wielu plików naraz. Dziś (na Wykopie) znalazłem Aplikację JS-Flash, która pozwala nie tylko na upload wielu plików, ale ma też wiele innych przydatnych cech. Z SWFUpload będę od teraz korzystał.

Lightbox

wtorek, 28 Listopad 2006

Jakiś czas temu Grxmrx przypomniał mi o istnieniu ciekawego skryptu js do wyświetlania pełnych wersji ilustracjiLightbox. Wynik działania skryptu jest bardzo efektowny, choć ma kilka wad: zaawansowana technologia prawdopodobnie ogranicza dostępność (czyli nie będzie działać na wszystkich przeglądarkach), podczas oglądania ilustracji strona jest blokowana no i nie można porównać dwóch obrazków… Mimo to, skrypt uważam za godny polecenia.

Coś dla programistów: Code Snippets

wtorek, 24 Październik 2006

Grxmrx podrzucił mi dziś link do stronki, na której znajduje się wiele gotowych skryptów/fragmentów kodu… może się okazać przydatne, nie tylko programistom. Mamy tu kody właściwie we wszystkich najpopulatniejszych językach (PHP, Perl, Phyton, REBOL, HTML, C, js, Ruby…). Code Snippets.

Dynamic Drive

sobota, 14 Październik 2006

Już dawno miałem wkleić tutaj tego linka… Serwis dynamicdrive.com to miejsce gdzie znajdziesz właściwie wszelkie potrzebne skrypty js/dhtml. Bardzo dobrze napisane, z prezentacjami testowymi, wprost do zastosowania… a, co najlepsze, wielu z nich można używać legalnie nawet w komercyjnych projektach :) Mniam :)