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

Wpisy otagowane ‘rozwiązania’

Hacki CSS dla IE

piątek, 2 Styczeń 2009
Witam w 2009 :)
Webhosting.pl to serwis, któremu na początku nie dawałem dużych szans na przetrwanie. Jednak, jak się okazało, dzięki patronowi (i najprawdopodobniej hojnemu sponsorowi) tego serwisu – home.pl, na Webhosting.pl co jakiś czas pojawiają się bardzo ciekawe i przydatne artykuły.
Jednym z nich jest tekst Haki CSS i komentarze warunkowe dla niepokornego Internet Explorera, który w sposób (jak dla mnie) w zupełności wystarczający przekazuje większość wiedzy, jaką warto mieć, aby projektować strony wyglądające identycznie w nowoczesnych przeglądarkach i IE.
Polecam.

Nowa metoda kolorowania zdjęć B&W

niedziela, 16 Grudzień 2007
Colorization Using Optimization Nie tak dawno pisałem o nowatorskiej metodzie skalowania zdjęć z zachowaniem szczegółów, a dziś wpadłem na stronę opisującą kolejny nowatorski algorytm, który może być używany do obróbki grafiki, a konkretniej – do szybkiego i dokładnego kolorowania czarno-białych zdjęć i filmów video.
Jak to zwykle w takich przypadkach bywa, całość opiera się na bardzo prostym pomyśle – „rozmalowywania” barw ręcznie zaznaczonych linią lub plamą w obszarze ograniczonym załamaniami kontrastu czarno-białego obrazu.
Metoda jest prosta, łatwa i szybka. Na opisującej ją stronie znajdziemy sporo przykładów zastosowania – zarówno na zdjęciach jak i filmach, oraz źródła algorytmu dla MATLABa. Cóż – Świat idzie do przodu, a z nim technologie, także te dotyczące obróbki obrazu.

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 :( ]

CAIR – Nowa metoda skalowania zdjęć

poniedziałek, 8 Październik 2007

Content Aware Image Resizing Rzecz jest na tyle ciekawa, że postanowiłem o tym napisać u siebie, mimo że w wielu miejscach Sieci (szczególnie tych dla grafików i fotografów) aż o tym huczy.

Chodzi o tzw. Content Aware Image Resizing (CAIR, czasem zwaną też „Liquid Rescale”), metodę skalowania zdjęć opracowaną przez izraelskich naukowców. Pisząc językiem laika – Metoda ta zmniejszając rozmiary zdjęcia stara się zachować duże rozmiary ważnych elementów tegoż zdjęcia. Trudno to opisać, a łatwiej zobaczyć, więc popatrzcie teraz na obrazek po lewej. Duży obrazek to źródło, obrazek w górnym prawym rogu jest przeskalowany tradycyjnie, a ilustracja w prawym dolnym rogu – za pomocą CAIR. Niezłe, co?

Pobawić się tą technologią można za pomocą aplikacji pod adresem swieskowski.net/carve (podłożyć można własne zdjęcia), natomiast wykorzystać ją w praktyce np. za pomocą darmowego programu graficznego GIMP, stosując plugin Liquid Rescale.

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.

Jeszcze nie wiesz, jak zrobić menu w CSS?

wtorek, 13 Marzec 2007
Tutaj masz 71 gotowych rozwiązań :)

mintAjax

poniedziałek, 22 Styczeń 2007

mintAjax Prosta i łatwa w obsłudze biblioteka z funkcjonalnością AJAXa oraz zaawansowanego JS.Na razie nigdzie nie stosowałem, tylko się trochę nią pobawiłem. Naprawdę fajna rzecz :)
Na uwagę zasługuje też dział Przewodnik, w którym można świetnie zorientować się co to cudeńko potrafi.

53 techniki CSS bez których nie przeżyjesz

sobota, 20 Styczeń 2007

Dziś na Wykopie pojawił się link do świetnego artykułu, w którym autor zebrał 53 techniki wykonywania przeróżnych uprzyjemniaczy życia za pomocą styli CSS (wraz z linkami do gotowych rozwiązań).
Nie mogę się powstrzymać przed zalinkowaniem tego artykułu tutaj – to naprawdę świetny resource dla wszelkich webdeveloperów.

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.

Opera, FF2, IE6 i IE7 w jednym stali domu

piątek, 5 Styczeń 2007

IE Stanadalone… czyli pakiet przeglądarek do testowania witryn WWW. O ile ze współżyciem pierwszych trzech nie ma problemów, to istnienie Internet Explodera w wersji 6 i 7 w jednym systemie stanowi już pewien problem wykonawczy. Z pomocą przychodzi pakiecik IE7_standalone który ściąga i instaluje siódemkę niezależnie od istnienia szóstki, będącej już w systemie. Tego mi było trzeba:)

Teraz w moim XP mam Operę 9, FireFoxa 2, Explodera 6 i Explodera 7 :) Jeszcze Safari by się przydał, ale marudził narazie nie będę (o MacBooku marzę od dawna…) ;)

BTW. Cała akcja dzięki temu wątkowi na forum MI/IM.

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ł.

Pantone

wtorek, 28 Listopad 2006

Paleta kolorów Pantone to zestaw kilku(nastu?) tysięcy barw powstałych przez procentowe zmieszanie innych. Podczas realizacji pewnego zlecenia dostałem nazwę i oznaczenia barwy Pantone do użycia w projekcie. Nie wiedząc, jak przekształcić tą barwę na znany wszystkim system RGB, zacząłem przekopywać Internet. Wynikiem było założenie nowego wątku na Forum IM/MI oraz znalezienie tabeli przybliżonych wartości RGB dla kolorów Pantone.

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.

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 :)

Dropdown menu

czwartek, 14 Wrzesień 2006

Szukałem, szukałem, aż znalazłem :)
Bardzo fajne i łatwe dropdown menu, napisane tylko w CSSie :) O tutaj :)

[edit, 29.09.06: Tutaj też niezłe rozwiązanie :)]