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

Wpisy otagowane ‘webmastering’

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

Parallax na Twojej stronie www

niedziela, 2 Listopad 2014

Ostatnio modne są „nowoczesne” strony, w których podczas przewijania, pojawiają się i znikają paski z ilustracjami/tekstem. To tak zwany parallax effect – „fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości„.

U Webmastaha od jakiegoś czasu jest pożyteczny tutorial, jak taki efekt w prosty sposób wykonać. Warto się chociaż przeklikać.

Wyszukiwanie podobnych obrazków

wtorek, 7 Październik 2014

Podczas pracy przy webdeveloperce dość często, z różnych powodów, zdarza się, że potrzebujemy wyszukać obrazek podobny do tego który już mamy. Najczęściej Klient podsyła mi do projektu jakąś ilustrację do której nie ma praw, a moim zadaniem jest odnaleźć możliwie podobną, którą mogę zakupić wraz z prawami do użycia.

W Chrome sposób na to jest prosty. Wczytuje obrazek do przeglądarki, nasiskam klawisz „s” i klikam na obrazku prawym przyciskiem myszki. Powoduje to wyszukiwanie przez Google obrazków podobnych. Ale to wyszukiwanie nie jest idealne.

tineyeDlatego warto skorzystać z dedykowanej wyszukiwarki tego typu, jaką jest na przykład TinEye. Działa szybko, prosto, intuicyjnie, a wyniki wyszukiwania są bardzo zadowalające.

Na GRX.pl kilka nowych szablonów www…

sobota, 15 Marzec 2014

Poniżej cztery smaczki spośród kilkunastu nowych. Po więcej zapraszam na GRX.pl :)

Sposób na linie w js – dowolnie pochyłe

sobota, 15 Luty 2014

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Generator trójkątów CSS

środa, 1 Styczeń 2014

triangleKolejne proste, łatwe i przydatne narzędzie – CSS Triangle Generator – do tworzenia prostych trójkatów z borderów CSS’owych. Osobiście używam często, działa wysmienicie. Warto znać.

Obrazek w kodzie strony

środa, 26 Czerwiec 2013

Base64 to sposób kodowania danych do ciągu znaków. Używany przez wiele portali do kompresowania/ukrywania danych lub części kodu, jednak jego najfajniejsze i najważniejsze zastosowanie jest inne. Można kodować pliki graficzne. Całe. I umieszczać bezpośrednio w html, jako kod strony. Zastosowane dla ikon i innych małych elementów strony, takie rozwiązanie znakomicie przyspiesza wczytywanie się całości (ładuje się z htmlem, jednocześnie nie blokując kanału przeglądarki). Warto używać, acz zważać trzeba na umiar – ładowanie wszystkich obrazków tym sposobem raczej stronkę zamuli, niż przyspieszy.

Czym to ugryźć? Na przykład tym: base64-image.de. Prosty enkoder, działa wyśmienicie. Takie pchełki fajnie przyspieszają pracę nad stroną.

Konwerter fontów TTF do EOT

środa, 26 Wrzesień 2012

Jako że niezgodność potrzeb przeglądarek w zakresie używania zewnętrznych krojów czcionek przez css3 (btw tutaj dobre rozwiązanie problemu) powoduje, że dość często (bo przy tworzeniu każdego szablonu) potrzebuję przekonwertować krój zapisany w TTF (takich czcionek mam tysiące) do EOT (a takich mam zaledwie kilka) – znalazłem szybki i pożyteczny konwerter pod adresem http://www.kirsle.net/wizards/ttf2eot.cgi . Używam już kilka miesięcy z powodzeniem, zatem polecam.

Klikalna mapa polski w jQuery

czwartek, 12 Kwiecień 2012

Piotrek, kumpel z pracy, znalazł coś fajnego – kompleksowe rozwiązanie problemu wykonania interaktywnej mapki europy, polski i innych obszarów, z klikalnymi województwami.

O, proszę: winstonwolf.pl/clickable-maps/polska.html. Oczywiście free. Za niewielką opłatą. Oszczędność czasu i pracy. Polecam.

Sprawdzacz headerów

poniedziałek, 19 Marzec 2012

Kolejna pchełka: web-sniffer.net do narzędzie do sprawdzania i testowania informacji nagłówkowych wysyłanych przez podstronę przed jej wyświetleniem. Serwis umożliwia również podgląd interpretacji takich headerów przez różne silniki/przeglądarki (i boty), i w zależności od używanej wersji protokołu HTTP i typu żądania (get, post, …).

Taki web-sniffer może się komuś przydać… :)

CSS Inline Styler

sobota, 17 Marzec 2012

Kiedyś takiego narzędzia szukałem, ale odniosłem porażkę i straciłem godzinę na konwersję ręczną.

Dzisiaj McBarlo podrzucił mi linka: inlinestyler.torchboxapps.com . Jest to pchełka, konwertująca zewnętrzne/osobno zdefiniowane definicje stylów – do stylów opisanych w atrybucie style, czyli do stylów „inline”. Właściwie trudno napisać coś więcej, bo to taki przydaś. :)

Generator plików .htaccess

poniedziałek, 13 Luty 2012

http://htaccess.lapti.pl/. Brzydki, nieostylowany, ale funkcjonalny i bardzo użyteczny. Reguły generowane przez ten generator działają, w przeciwieństwie do wielu procedur i porad na forach internetowych. Dobre są też gotowe rozwiązania predefiniowalne, których ludzie najczęściej szukają. Krótko mówiąc – rzecz godna polecenia :)

Na testowanie stron – Browserling

środa, 28 Grudzień 2011

<a title=”Browserling” href=”http://browserling atorvastatin online.com/” rel=”http://browserling.com/” target=”_blank”>Browserling to ostateczne i idealne rozwiązanie problemów z testowaniem stron pod różnymi przeglądarkami.

„Przeglądarniątko” działa genialnie prosto i skutecznie – za każdym zapytaniem odpalają cały system operacyjny i w nim wybraną przez nas przeglądarkę, a w niej – pobrany adres strony. Całość jest „używalna” w 100% – czyli nie dostajesz screenshotu, ale otrzymujesz w pełni funkcjonalną stronę odpaloną w wybranym browserze, którą możesz przetestować także pod kątem interakcji i realnej użyteczności.

Strony testować można za pomocą przeglądarek IE, Firefox, Chrome, Opera i Safari, we wszystkich pełnych wersjach + najnowsze wersje prototypowe (nightly, itp.).

Łatwe, proste, przyjemne, szybkie – i o to chodzi. Jest tylko jedno „ale” – narzędzie nie jest do końca darmowe. Za free można używać do woli, ale sesja testowania jednej strony w jednej przeglądarce może trwać max 5 minut, a po opłaceniu $20 miesięcznie – czas testowania jest nieograniczony. Myślę jednak że wersja darmowa powinna wystarczyć wszystkim.

[aha: za cynk dziękuję mcbarlo i pośrednio grxmrx’owi]

[Przydaś] Konwerter Word -> HTML

piątek, 14 Październik 2011

Jakiej jakości kod HTML generuje program Word – każdy wie, ale napiszę to: Fatalnej. A niektórzy Klienci wysyłają treść właśnie w docach/xdocach. Jeśli treść jest skomplikowana (punktatory, zagnieżdżone tabelki, inne bajery) – ręczne przekształcanie takiego dokumentu na HTML jest bardzo czaso/praco/nerwo-chłonne.

Z pomocą przychodzi mała webaplikacja word2cleanhtml.com. Jej działania można się domyślić po nazwie. Może nie generuje on rewelacyjnego kodu gotowego do wstawienia na stronę, ale na pewno oszczędza dużo czasu/pracy/nerwów. Przydaś.

Layer Styles

czwartek, 16 Czerwiec 2011

Oszukałem Was – przepraszam.

Ale bezwiednie. :) Bo pisząc notkę o Ultimate CSS Gradient Generator (dwie notki niżej) jako o rewelacyjnym narzędzi do tworzenia gradientów css, nie wiedziałem o webaplikacji Layer Styles more info here.

A Layer Styles potrafi o wiele więcej – możesz edytować cień zewnętrzny i wewnętrzny, gradient tła, obwiednię i zakrzywienie rogów. To wszystko ze wszystkimi możliwymi opcjami, z podglądem w czasie rzeczywistym, i w megawygodnej formie przesuwalnego okna efektów, takiego samego jak w Photoshopie. I to jest naprawdę rewelacja. Wygoda, intuicja, szybkość działania. Tego szukamy. :)

htaccess

czwartek, 17 Czerwiec 2010

Pod adresem http://blog.alchemycode.pl/2010/01/27/10-przykladow-wykorzystania-plikow-htaccess/ znalazłem praktyczny tutorial (a nawet nie tutorial, ale gotowiec) z kodem najczęściej używanych plików .htaccess.

Blog blog.alchemycode.pl w ogóle jest fajny – polecam.

Czym jest HTML5 i czy się przejmować?

środa, 9 Czerwiec 2010

Fajna infografika (kliknij aby powiększyć).

What the Hex?

czwartek, 27 Maj 2010

Oto gra przeznaczona dla niewielu grup zawodowych, w tym głównie dla webdesignerów, webmasterów, programistów css :)

What The Hex?

Jak dobry(a) jesteś?

Kształtownik akapitów

niedziela, 16 Grudzień 2007
Text Wrapper

Pod adresem www.csstextwrap.com znajduje się bardzo ciekawa i pożyteczna aplikacja on-line o (właściwie wszystko mówiącej) nazwie Text Wrapper. Mówiąc krótko – jest to skrypt generujący kod umożliwiający układanie kolumny tekstu w pożądany kształt (czyli nie tylko prostokąty, ale także kółka, zygzaki, szpice, paragrafy, czy co tam sobie jeszcze wymyślimy – na przykład w kształt literki S :) jak Subiektyw). Narzędzie jest bardzo proste w użytkowaniu – ustawiając na bocznych liniach zielone punky i przesuwając je odpowiednio, tworzymy pożądany kształt krawędzi tekstu. W każdym momencie możemy zresetować ustawienia krzywizny jednej z linii. Możemy też określić wysokość i szerokość bloku tekstu, wysokość interlinii, właściwość text-align, krój czcionki oraz jej rozmiar. Możliwe jest także ułożenie tekstu według przygotowanego wcześniej obrazka. Wynik dostajemy w trzech wersjach: XHTML/CSS (w jednym pliku), w XHTML i CSS (w pliku XHTML mamy ustalone odnośniki do klas, które są dokładnie zdefiniowane w pliku CSS), oraz w JavaScript. Narzędzie jest świetne, chyba nie ma się do czego przyczepić. Nic tylko używać!

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.