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

Wpisy otagowane ‘narzędzia’

Fancy Border Radius Generator

wtorek, 19 Luty 2019

Wiedzieliście że można zaokrąglać narożniki boksów niesymetrycznie? No to już wiecie. To łatwizna, ale jest też pchełka którą można zrobić to wizualnie. To ta z tytułu tego posta. Polecaju. :)

Clippy – narzędzie do tworzenia kształtów

piątek, 18 Styczeń 2019

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.

Wycinanie tła

poniedziałek, 10 Grudzień 2018

Jakiś czas temu opisywałem już webappkę Clippingmagic, która wycina tło.
Ta opisywana teraz webappka – Remove.bg – jest jednak o trochę lepsza, choć nie idealna (gdy tło jest różnorodne i kolorystycznie zbliżone do obiektu wycinanego – raczej nie działa). Nic nie zastąpi ręcznego szparowania w fotoszkopie, ale zawsze warto adres remove.bg znać. Może kiedyś się do czegoś przyda…

Style dla map Google

sobota, 18 Sierpień 2018

Snazzymaps.com umożliwia stylowanie map googlowych. Można w zasadzie dopracować mapę tak, żeby była dokładnie w stylu strony na której jest prezentowana. To tyle – tylko tyle i aż tyle :)

Tablica Wimmera

sobota, 18 Listopad 2017

Trochę OT, ale warto zajrzeć. Mój programers z firmy, Picios, stworzył bardzo fajną webappkę to ogarniania, na co warto zwrócić uwagę na niebie w nocy (tj. co świeci najjaśniej). Astronomia here. Sprawdź: Wimmer’s Table.

Jak najszybciej znaleźć ikonę? Nabazgrać!

środa, 12 Kwiecień 2017

Gugiel wybuścił dziś nową apkę webową – autodraw. Pomysł jest prosty – algorytm bada co bazgrzesz, zgaduje ostateczny kształt i czasie rzeczywistym proponuje gotowe ikony – ładne i równe szkice zamiast Twojego bazgroła. Działa to bardzo dobrze:

Ale ja widzę genialne zastosowanie dla grafików/projektantów. Ile razy traciłeś cenne godziny minuty żeby odnaleźć ikonkę? Wpisujesz w wyszukiwarkę ikon (tą czy inną) tagi, synonimy szukanego słowa itp. To trwa. A tak – Google Autodraw, maz-maz – i odnalezione!
Googlu, kolejny raz przedłużasz mi życie! ;)

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

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.

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.

Kupię stronę www – nowy projekt

wtorek, 1 Kwiecień 2014

kupiestroneCoraz częściej zdarza mi się kupować gotowe strony www od osób które chcą je z róznych względów sprzedać. Na szybko stworzyłem ostatnio prostą stronę trochę oszczędzającą mój czas – zamiast wysyłać pytania każdemu kto jest zainteresowany sprzedażą swojego serwisu, teraz będę podawał adres witrynki służącej mi do zbierania takich informacji: KupieStrone.pl , a tam jest już odpowiedni formularz…

Dodatkowo, jest możliwość dopisania się do newslettera i także otrzymywania ofert sprzedaży stron www.

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

DetURL

wtorek, 20 Sierpień 2013

Krótko, za Strimsem:
Wprowadź „deturl.com/” przed adres filmu na YouTube itp. lub dowolnego obrazka, aby w szybki sposób uzyskać narzędzia do pobrania danego klipu, przerobienia zdjęcia, odczytania danych EXIF, możliwości wyszukania podobnych obrazów i wiele więcej.

Łatwe wycinanie tła online

niedziela, 28 Lipiec 2013

Clippingmagic.com to prosty onlajnowy program graficzny, odpalany w przeglądarce, używający zaawansowanych funkcji które w prosty sposób można wykorzystać do wycinania obiektów z tła zdjęć. Moim zdaniem rewelka, działa szybko, sprawnie i dokładnie. Przetestowałem i będę używał, chyba nawet Fotoszkopa porzucę w tego rodzaju zadaniach, na rzecz Clippingmagic. Na pewno warto znać.

Konwerter dźwięków

poniedziałek, 15 Lipiec 2013

Szybki, prosty, skuteczny konwerter dźwięków. Osobiście używam do przemianowania dźwięków z nagrań telefonu (w formacie totalnie kosmicznym) na mp3. Polecam. Dodatkowo po skonwertowaniu wielu dźwięków można zasiorbać wszsytkie razem, w jednym pliku spakowane. Mniam.

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

Przekonaj Klienta, że „u mnie działa”

poniedziałek, 10 Czerwiec 2013

Screenr. Prosta rzecz – webaplikacja z javowym appletem umożliwiającym szybkie, łatwe i darmowe nagranie filmiku z określonego obszaru pulpitu (tzw. screencast) i wrzucenie owego filmiku na www, razem z playerem. Do czego to przydatne? Do wykonania szybkiego szkolenia/instruktażu dla Klienta z panelu administracyjnego, który właśnie wdrożyliśmy, do umożliwienia Klientowi zobrazowania nam, o co mu chodzi, co nie działa, a co działa nie tak jak powinno, lub do tego, o czym w temacie niniejszego posta :)

Typo-efekty

niedziela, 30 Grudzień 2012

Nie wiem jakim cudem dopiero teraz „wpadłem” na ten generator… no ale cóż, tak już jest, Internet jest wielki. Jako uzupełnienie do wpisu o innej, podobnej webaplikacji:

Typoeffects.com to witryna z dwoma rewelacyjnymi generatorami grafik składających się ze słów. Mamy opcję generatora ascii-art, lub napisów ułożonych w kształt obrazka. Opcji i ustawień pracy generatora jest bardzo dużo, a efekty często są po prostu powalające. Warto zajrzeć, chociaż po to żeby się pobawić…

CSS Button Generator

poniedziałek, 17 Grudzień 2012

Dopisek uzupełnaijący (a może detronizujący?) poprzedni wpis o tego typu narzędziach: Trzy sprawdzone generatory przycisków CSS3. Otóż webnarzędzie cssbuttongenerator.com jest proste, łatwe, szybkie, dostępne, intuicyjne i darmowe. Ofkors pisze o kreatorze buttonów w css3. Jak dla mnie super – można stworzyć stan nieaktywny i aktywny, zaokrąglenia, cienie, gradienty, przesunięcia, cienie i inne bajery rodem z CSSa trzeciego (bez krzty grafiki ani JS).
Do ulubionych przeglądarki i używania na co dzień dla każdego webmastera.

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.

GDrive – dysk wirtualny od Google

wtorek, 24 Kwiecień 2012

Czekałem na to chyba ze dwa lata. Myślałem już że to legenda, że Google nie stworzy swojego dysku chmurowego…. no i dziś wystartował Google Drive ! :) Duży, stabilny, tani, przejrzysty system plików od Google, który prawdopodobnie będzie moim docelowym siedliskiem. Za $5 miesięcznie (czyli za około 16 zł miesięcznie) planuję zakup 100GB dysku i powolne przesiadanie się (w całości) z dysku stacjonarnego na wirtuala.
Mimo marudzenia wielu użytkowników, mnie firma Google przekonuje do siebie bardzo. Wszystkie jej produkty są dopracowane, solidne, polityka i regulaminy jasne i przejrzyste.  W przeciwieństwie do innych firm – w GDrive nie będę bał się trzymać żadnych danych.

Nabiera też sensu mój (na razie tworzony w głowie) projekt stworzenia zaawansowanej strony www od podstaw bez użycia desktopowych aplikacji. Już niedługo!

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

Neon flames – kolejny generator teł

niedziela, 11 Marzec 2012

Pamiętacie Silk? Była to zabawka/eksperyment – mini aplikacja graficzna, w której można było generować trójwymiarowe półprzezroczyste „materie”. Efektem kilkunastu sekund bezładnego machania myszką jest obrazek wart zastosowania jako tło w dowolnej aplikacji rozrywkowej lub na stronie internetowej … lub jako tło na pulpit.

Otóż teraz mamy do czynienia z podobną zabawką – „Neon Flames” to webaplikacja (btw., napisana w HTML5 przez szwacarskiego programistę, który popełnił wiele innych ciekawych eksperymentów webowych) umożliwiająca stworzenie form graficznych, których wygląd można porównać do widoku galaktyk i mgławic. Wychodzi toto świetnie, a zabawa jest przednia, tym bardziej że do dyspozycji mamy, oprócz kolorów, także inne parametry „pędzla”.

ColorHexa – kolorystyczny kombajn

sobota, 25 Luty 2012

<a href=”http://www check this link right here now.colorhexa.com/”>Narzędzi kolorystycznych w Sieci jest wiele, i na tym blogu ten temat był już poruszany wielokrotnie (jeśli nie wierzysz – przeklikaj się przez powiązane tagi). jednak to narzędzie – ColorHexa – zasługuje na wzmiankę głównie ze względu na swoją przejrzystość i użyteczność. Niby jest to kombajn – można mieszać kolory, palety, generować gradienty i kombinować na wiele innych sposobów. A jednak, mimo mnogości funkcji – aplikacja przedstawia się i działa bardzo funkcjonalnie. Wszystko co potrzebne – jest na swoim miejscu, dostępne wtedy gdy powinno być dostępne. Po prostu witryna napisana w sposób przemyślany i przetestowany. Korzystanie z takich rozwiązań przyspiesza tworzenie twoich projektów, a więc pozwala Ci więcej zarabiać. decydowanie warto porzucić kilka innych narzędzi, dla ColorHexy.

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]

Tagxedo – kreatywna grafika w kilka chwil

czwartek, 27 Październik 2011

<a href=”http://www.tagxedo buy atorvastatin online.com/” rel=”http://www.tagxedo.com/”>Nie lubię Silverlighta i dlatego jeszcze nigdy nie pisałem o żadnych narzędziach z wykorzystaniem tej technologii. Myślę że Microsoft wyskoczył jak Filip z konopii, tworząc i rozwijając klon Flasha w momencie, gdy flash odchodzi w zapomnienie.

Jednak teraz zrobię wyjątek i zaprezentuję webaplikację stworzoną w tej właśnie technologii. Nie jest to jakieś niezbędne narzędzie, ale może być przydatne dla wszelkich grafików/projektantów w momentach, kiedy po prostu nie ma pomysłów na coś kreatywnego.

Chcę pokazać Wam Tagexedo – webaplikację, którą pokazał mi Kumpel/Klient Grzesiek (pozdro!).

Co ta pchełka potrafi? Otóż automatycznie tworzy ładne grafiki, używając odpowiednio ułożonych słów pobranych z jakiegoś źródła (np. z pliku, kanału Twittera, strony internetowej itp.). Wyniki są bardzo efektowne i zaciekawiające – na pewno przyciągną niejeden wzrok, gdy użyć ich w jakiejś publicznej publikacji. Warto zainstalować Silverlighta chociażby po to, żeby się tym cackiem pobawić.

[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ś.

Adobe popiera HTML5!

poniedziałek, 1 Sierpień 2011

To się musiało stać, chociaż dziwi mnie, że to właśnie Adobe, właściciel technologii Flash, wypuścił narzędzie – Adobe Edge wizualny edytor HTML5, CSS3 i JS. Na razie to początki, ale dla mnie to wyraźny znak, że flash odchodzi, a na jego miejsce wkraczają nowe technologie.

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

Silk – zabawka, czy generator grafiki?

poniedziałek, 13 Czerwiec 2011

Wpadłem ostatnio na webaplikację „Silk”, dzięki której można kilkoma kliknięciami i pociągnięciami myszy wygenerować efektowną, kolorową grafikę. Grafika „rysuje się” w ciekawy sposób, podczas której istnieje możliwość sterowania wiatrem (shift+ruchy myszką) a efekt możemy zapisać. Można też powtórzyć animację. Zabawa przednia, przynajmniej na kilka minut. Lubię takie interaktywne dema, pokazują one moc komputerów i Internetu jako narzędzi.

Jednak zastanawiam się, czy grafik wygenerowanych za pomocą „Silka” nie użyć przy projektowaniu stron. A jak wygląda sprawa praw autorskich? Co prawda pierwszą kreskę narysowałem ja, ale resztę wykonał algorytm, który zaprojektował twórca narzędzia. Tak czy owak – rzecz ciekawa przynajmniej do obejrzenia.

3 sprawdzone generatory przycisków CSS3

środa, 4 Maj 2011

(Mały trick na początek, z tych oczywistych: To, że są to generatory przycisków, wcale nie oznacza, że można je stosować tylko do generowania przycisków. :) Przecież wystarczy w niewielkim stopniu zmienić kod, a można stworzyć np. bardzo ładne pole tekstowe lub boks na treść…)

W momencie, gdy większość nowoczesnych przeglądarek obsługuje już nowe definicje CSS3, ich użycie zaczyna nabierać sensu. A jest w czym wybierać.
Poprzednio było tylko jednokolorowe tło, ramka, definicja kroju czcionek i jego atrybutów. Teraz dochodzą: dowolne gradienty tła, cienie lub poświaty zewnętrzne lub/i wewnętrzne, dowolny krój czcionek (dla samej czcionki również cienie/poświaty), zaokrąglenia, przekrzywienia, obracanie, a do tego jeszcze animacje (transitions) przy przejściu do/do róznych stanów przycisków. Aż trudno wymyślić coś więcej…

W takiej mnogości opcji nie dziwota że zaczęły pojawiać się generatory. Poniżej zaprezentuję trzy dobre generatory przycisków dowolnych elementów „boksowych” CSS3. Od dobrego do najlepszego.

Na pierwszy ogień, najbardziej popularny:
CSS Tricks Button Maker
Zalety: Prosty, czysty, czytelny, intuicyjny. Przycisk można stworzyć bardzo, ale to bardzo szybko. Pokazuje podgląd na żywo i ustawianie podstawowych opcji: krój czcionki (tylko trzy do wyboru), wielkość czcionki, margines wewnętrzny, zaokrąglenia, kolory gradientu, tekstu i tła dla stanów aktywnego i naciśniętego.
Czego mu brakuje: Niestety brak mu wielu rzeczy. Przede wszystkim precyzyjnej edycji wartości, poza tym ustalania cienia/poświaty, większej ilości czionek do wyboru, definicji wyglądu gradientu, animacji, gradientów i innych opcji dla stanów aktywnego i naciśniętego…. No i wkurza mnie że np.  cień dla napisu jest „na sztywno” zdefiniowany. Kod żródłowy przycisku otrzymujemy po jego naciśnięciu – wbrew pozorom nie musi to być oczywiste.

Drugi generator, ten już umie więcej:
CSS3 Button Generator
Zalety: Wszystkie opcje widoczne od razu, podgląd w real-time, ustawienia ładnie pogrupowane:  tło, ramki, cienie/poświaty, kolor i wielkość napisu, cienie/poświaty dla napisu, biblioteka gotowych przycisków.
Czego mu brakuje: Brak definicji kroju i atrybutów czcionek, określania jakiegokolwiek wyglądu przycisku w stanie naciśnięcia/po naciśnięciu, suwaki lub nawet zwykłe pola tekstowe byłyby wygodniejsze niż listy select (którymi posługujemy się w przypadku tego generatora) – przez to definiowanie wymarzonego przycisku może potrwać trochę dłużej…

Przypadek trzeci:
DVIA Button Generator (beta)

Zalety: mimo że jeszcze „w betach”, to właściwie wszystkoumiejący. Edycja w zakładkach w osobnym oknie – IMO wygodnie i praktycznie. Definiujemy chyba prawie możliwe wartości na wszystkie możliwe sposoby. Podgląd oczywiście w real-time. Na uwagę zasługuje genialny edytor gradientu, który ja osobiście traktuję jako osobne narzędzie w narzędziu.
Czego mu brakuje:
Jako że beta, potrafi czasem (rzadko ale zawsze) sypnąć błędem. Poza tym denerwujące jest to, że wygląd pseudoklasy :hover i :click projektujemy rozpoczynając od domyślnych ustawień, a nie od projektu określonego dla normalnego wyglądu przycisku. Przydałaby się też osobna edycja ramki na każdej z krawędzi, podobnie dla zaokrągleń narożników.

To tyle na dziś… mam nadzieję że się komuś przydałem.
Gwoli przypomnienia: O (innym, prostszym) generatorze przycisków pisałem już tutaj.

25 narzędzi dla użyteczności stron www

czwartek, 4 Listopad 2010

Na blogu Hongicat.com jakiś czas temu znalazłem listę 25 narzędzi poprawiających użyteczność stron internetowych. Przynajmniej połowa z nich jest zdecydowanie warta uwagi. Prawdopodobnie niektóre narzędzia omówię w przyszłości na stronach bloga…

CSS3 w Internet Explorer 6

sobota, 21 Sierpień 2010

Ostatnio bardzo dużo pisze się w Sieci o nowych standardach HTML5 i CSS3. Osobiście cieszę się, że te technologie się rozwijają, ale co do ich szybkiego upowszechnienia – jestem sceptykiem. Dużo kodu jeszcze upłynie, zanim programiści definitywnie przerzucą się na te na-wpół-nowe techniki.
Jednak z drugiej strony CSS3 jest coraz częściej używany i zaczyna się zdarzać, że odwiedzam strony, które z CSS3 korzystają „po całości”, tak jakby nie istniały wcześniejsze wersje języków webowych. W zawiązku z tym jakiś czas temu zastanawiałem się, czy byłoby możliwe napisanie systemu, który jakimś sposobem poprawnie wyświetla definicje CSS3 na przeglądarkach ich nie obsługujących (mam tu na myśli głównie IE6-7). Zrobiłem mały research i okazało się (a jakże), że rozwiązanie tego typu już istnieje – co prawda pozwala na implementację jedynie części dobrodziejstw CSS3 na IE6, ale dobre i to.

Mowa o CSS3 Pie – aplikacji, która za pomocą odpowiedniego pliku .htc pokazuje Explorerowi, jak wyświetlać nowe style. Mowa o zaokrągleniach rogów boxów, obsłudze cienia i gradientów  w tle – czyli o najważniejszych funkcjach. Moim zdaniem – ewenement i rzecz bardzo w dzisiejszych czasach przydatna. Dlatego ląduje na tym blogu.

Jak stworzyć PDF ze strony WWW?

czwartek, 24 Czerwiec 2010

Można zrobić zdjęcie strony, edytować je w jakimś programie graficznym i zapisać jako PDF… ale to będzie po prostu obrazek zapisany w dokumencie PDF, podczas gdy  sieciowa aplikacja pdfmyurl.com po prostu konwertuje stronę WWW do pliku PDF.

Wygenerowany plik PDF nie jest idealny – gdzieniegdzie „odstają” gradienty i nie „chwyta” wstawek flashowych… ale za to wszystkie teksty są zaznaczalne i edytowalne. Ta webaplikacja na pewno zasługuje na wzmiankę, toteż to robię. ;)

Kolorowe kombinacje

wtorek, 15 Czerwiec 2010

Nie lejąc wody: colorcombos.com to jeden z serwisów zajmujących się schematami kolorystycznymi stron www i publikacji. Posiada bazę schematów, tester kolorów i kikla innych opcji, ale dla mnie najważniejszą jest możliwość „ściągnięcia” schematu kolorystycznego dowolnej strony poprzez podanie jej adresu URL. Nie wiem, jak to działa, ale działa i jest fajne i przydatne. :)

SmushIt

czwartek, 10 Czerwiec 2010

O bezstratnym zmniejszeniu rozmiarów plików grafiki w formacie PNG pisałem już kiedyś, we wpisie „Jak zmniejszyć PNG„. Do optymalizacji wielkościowej plików JPG używam świetnej pchełki offline „jpegoptim

Okazuje się, że istnieje narzędzie, optymalizujące w taki bezstratny sposób każdą grafikę. Mowa o SmushIt – jest to intuicyjna, prosta mini-web-aplikacja, zmniejszająca rozmiar plików graficznych „podanych” poprzez upload lub wskazanie adresu URL. Tak zoptymalizowany plik można oczywiście ściągnąć na dysk. Szybko, łatwo, bezboleśnie, dla wszelkich webowych rodzajów grafik.

Jeszcze o tworzeniu żałobnych wersji

sobota, 15 Maj 2010

Jakiś czas temu pisałem o  tworzeniu czarno-białej wersji strony, na przykład na potrzeby żałobnej szaty graficznej witryny.

Ostatnie tragiczne wydarzenia spowodowały m.in., że musiałem w krótkim czasie stworzyć żałobne wersje kilkunastu witryn internetowych, które prowadzę. Okazało się, że opisywana przeze mnie webaplikacja GrayBit nie spełnia moich oczekiwań – jest bardzo powolna i lubi się zawiesić przy większej ilości kodu i grafik.

Dlatego postanowiłem zadziałać i, mimo że programista ze mnei raczej marny, zdołałem napisać sobie prosty skrypt PHP przekształcający w dowolnym pliku wartości kolorów zapisane w formacie #HHH lub #HHHHHH na skalę szarości.

Postanowiłem się nim podzielić, bo może komuś jeszcze się przyda – dlatego przedstawiam pchełkę css2gray.  Enjoy.

(uwaga: css2gray nie rozpoznaje definicji kolorów innych niż podane powyżej – być może inne obsługę innych definicji dodam w terminie późniejszym)

W poszukiwaniu ładnych krojów czcionek

środa, 21 Kwiecień 2010

 

Nie od dziś wiadomo, że wybranie dla strony www ładnego, nietypowego stylu czcionek jest trudne. Oczywiście mówimy o tradycyjnym wyświetlaniu liter, nie biorąc pod uwagę takich wynalazków, jak ten. Być może dla niektórych jest to proste – dla mnie nie.

Nie lubię używać oklepanych, typowych i banalnych krojów. Jakkolwiek rozumiem użycie czytelnych ariala, verdany czy tahomy w akapitach, tak znalezienie odpowiedniego, ozdobnego kroju i stylu dla nagłówków i śródtytułów stanowi dla mnie zawsze wyzwanie.

Ostatnio zauważyłem (wiem – powinienem to wiedzieć), że niektóre kroje liter w stylu italic, wyglądają totalnie inaczej, niż styl prosty.

Na przykład Georgia:

Georgia prosta wygląda tak,

i wydawałoby się, że pochylona Georgia powinna wyglądać tak (symulacja przez przekrzywienie prostego kroju w Photoshopie):

tymczasem:

Georgia Italic wygląda tak

Jest różnica, prawda?

Takich przykładów jest więcej, tylko trzeba je odnaleźć. Postanowiłem zatem napisać prosty automat do wyszukiwania nietypowych ustawień dla czcionek.

Pod adresem http://www.uranik.pl/fonttest/ umieściłem prosty skrypt pokazujący kombinacje trzech z pięciu znaczących parametrów stylu dla wybranego kroju liter:

pochylenia, pogrubienia, kapitalików (small-caps), druku rozstrzelonego oraz zagęszczonego.

Kroje liter wybrać można z listwy rozwijanej u góry lub u dołu. Wybrałem najbardziej uniwersalne kroje, nazywane czasem mianem „websafe fonts”. Przy ich wyborze posiłkowałem się tą stroną. Oczywiście mogę tę listę rozszerzyć/zwęzić (proszę o ewentualne uwagi). Całość opisałem uniwersalnym językiem CSS, zrozumiałym dla każdego.

Mam nadzieję, że to małe narzędzie przyda się Wam tak, jak i mi.

Tworzenie czarno-białej wersji strony www

czwartek, 21 Styczeń 2010

GrayBitPewien Klient, któremu wykonałem dosyć złożoną szatę graficzną i szablon portalu www (ponad 2000 linii kodu CSS, około 200 pilków graficznych) zlecił mi wykonanie jej wersji w odcieniach szarości. Czarno-białe miało być wszystko – od kolorów zdefiniowanych w CSS, poprzez grafiki, a kończywszy na favikonce.

Początkowo szukałem w Internecie webaplikacji, która by to wszystko (albo prawie wszystko) zrobiła za mnie automatycznie. Może źle szukałem, może za krótko, ale – nie znalazłem. Znalazłem jedynie webaplikację GrayBit, która rzeczywiście przekształca stronę na pozbawioną kolorów, ale 1) działa strasznie wolno, 2) robi to dla celów podglądu, a nie użycia w dodatkowej wersji strony 3) pobieranie przekształconych przez to narzędzie plików jest bardzo utrudnione.

Mimo to postanowiłem z tej aplikacji skorzystać i udało się – po zabawie z pobieraniem wielu plików, zmianie adresów w pobranych plikach CSS i HTML udało mi się w ciągu kilkunastu minut stworzyć wersję szarą portalu (cz-b pliki JPG ze względu na stratę jakości stworzyłem od nowa). Jednak wciąż nie mogę uwierzyć że w Internecie nie istnieje webaplikacja robiąca to szybko, łatwo i przyjemnie. Marzeneim jest narzędzie pobierające pakiet zip z szablonem i „wypluwające” taki sam pakiet, tyle że z plikami i definicjami kolorów przekształconymi w odcienie szarości.

Jeśli znasz taką aplikację – daj znać w komentarzach. Zapewne nie tylko ja będę Ci wtedy wdzięczny.

Zbiór aplikacji on-line

sobota, 2 Styczeń 2010

Tematyka tego bloga zobowiązuje mnie do zamieszczenia linka do sporego zbioru darmowych aplikacji on-line do edycji muzyki, wideo i grafiki. Dobrze mieć te linki pod ręką.

Nawiasem mówiąc, zastanawiam się czy dałoby się już teraz przesiąść całkowicie na aplikacje on-line i realizować wszystkie projekty i zamówienia, korzystając tylko z nich. A jeśli jeszcze nie teraz, to kiedy? Przyznam, że kusi mnie ta możliwość i być może w 2010 roku przeprowadzę próbny eksperyment w tym zakresie. :)

Jak dobrać kolorystykę strony?

środa, 18 Listopad 2009

Color Scheme Designer Podczas projektowania szaty graficznej zdarza się często, że brakuje nam odpowiedniego schematu barw. Czasami bywa też tak, że zmiana jedynie kolorystyki w gotowym już layoucie znacząco poprawia jego wygląd i czytelność.

Webaplikacja Color Scheme Designer to przejrzysty interfejs, umożliwiający szybkie i łatwe określenie kolorów w schemacie, w którym dominują dwa, trzy lub cztery kolory główne (w różnych konfiguracjach wzajemnych). Dodatkowo otrzymujemy kolory dodatkowe, których warto używać do tworzenia np. gradientów lub ikon.

Nie wiem jak Wy, ale ja od dziś będę korzystał prawie codziennie z tej aplikacji. Problem doboru barw od zawsze był dla mnie barierą trudną do przeskoczenia.

Jak zmniejszyć PNG?

niedziela, 18 Październik 2009
Ling.pl Czy da się zmniejszyć wielkość pliku PNG? Szczerze przyznam że moja wiedza do dzisiaj wykluczała taką możliwość. Dzisiaj u RAFiego znalazłem link do webnarzędzia PunyPNG. Oferuje ono bezstratną kompresję plików JPG, GIF i … PNG właśnie. Sposób działania jest prosty: Aplikacja oblicza, który format będzie najekenomiczniejszy dla danej grafiki, a następnie bezstratnie kompresuje wybraną grafikę. Z moich trestów wynika że można zmniejszyć wielkość grafiki na średnio-przeładowaną graficznie stronę o 30-40%. Warto więc skorzystać.

Generator efektów flash on-line

wtorek, 14 Kwiecień 2009

Flash to technologia tworzenia i prezentacji treści, którą nie każdy zna i nie każdy stosuje. Jednak gdy o flashu masz blade pojęcie (lub nie masz odpowiedniego – drogiego – oprogramowania), a Twój Klient sygnalizuje, że projekt koniecznie ma zawierać jakiś błyszczący animowany bajer – możesz skorzystać z Generatora efektów flashowych on-line na stronie effectgenerator.com.

Edytor działa w całości w oknie przeglądarki i ma naprawdę duże możliwości – możesz tworzyć nawet skomplikowane tekstowe (setki krojów czcionek do wyboru) i obiektowe – efekty przejścia, animacji , manipulować kolorami, jasnością, alfą, cieniami, tworzyć slideshow’y, zagnieżdżać filmy, obrazy, obiekty. Słowem – nie przychodzi mi do głowy efekt prezentacyjny, którego za pomocą aplikacji EffectGenerator nie dałoby się utworzyć.

Wynik otrzymuje się w postaci gotowych do zagnieżdżania (także – bezpośrednio w popularnych serwisach społecznościowych) kodów i linków, co także jest bardzo wygodne.

Pobawiłem się generatorem 5 minut i pokusiłem się o stworzenie małej animacji, aby pokazać choć wycinek możliwości generatora. Odśwież stronę tego wpisu, aby sobaczyć ruchome efekty.

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.

Przejrzyście, dla webdesignerów

środa, 23 Styczeń 2008
For Webdesigners Czegoś takiego brakowało. Na witrynie www.forwebdesigners.com autor zebrał w bardzo przejrzysty sposób ponad 500 tutoriali i narzędzi on-line dla projektantów stron. Całość podzielona na intuicyjne kategorie i tagi. (Prawie) wszystko co potrzebne. Szukasz jakiegoś narzędzia? Zanim zaglądniesz na Subiektyw – zajrzyj na ForWebdesigners.com. :)

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ć!

Image Reflection Generator

wtorek, 23 Październik 2007
Reflection Maker Reflection Maker to nic innego, jak łatwa, prosta, intuicyjna, przyjazna i przejrzysta w działaniu i obsłudze aplikacja on-line służąca do tworzenia łebdwazerowego efektu odbicia obrazka. Przydatne dla nie-grafików, lub dla grafików leniwych :)
Grafikę wejściową możemy pociągnąć z Sieci, możemy też wysłać plik z dysku. Podajemy jeszcze wielkość odbicia, kolor tła i – voila :) Wynik dostajemy w JPGu (szkoda że nie w PNGu z alfą, ale darowanemu koniowi…).

Ponad 20 narzędzi do pracy z CSS

niedziela, 21 Październik 2007
CSS Tools Pod tym adresem znajduje się spis ponad 20 narzędzi do edycji, tworzenia i zarządzania klasami, obiektami i w ogóle kodem CSS. Część z nich jest bardzo przydatna. Są narzędzia do oczyszczania, optymalizowania i kompresji kodu, automatycznego tworzenia zaokrąglonych narożników, efektów takich jak rollover, list, menusów, oraz nawet całych layoutów. Smacznego :)

Generator graficznych zakładek

piątek, 19 Październik 2007

Navigation Tab Menu Generator Wpis na blogu Pawła Wimmera przypomniał mi o głównej tematyce tego bloga, od której ostatnio nieco odbiegłem…

Aplikacja sieciowa pod adresem tabsgenerator.com pozwala na szybkie stworzenie on-line ładnych obrazków zakładek dla menusów stron internetowych. Przyda się przede wszystkim nie-do-końca grafikom :)
Hint: Stwórz sobie dwie (lub nawet trzy) podobne zakładki, jedna z nich może świetnie wyglądać jako „wybrana” lub po najechaniu wskaźnikiem myszki (np. podświetlona zakładka) – taki efekt można łatwo zmontować poprzez przesuwanie tła CSS (Riddle dobrze opisał to tutaj).