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

Wpisy otagowane ‘webaplikacje’

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

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…

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.

Sposób na testowanie mobilnych www

czwartek, 23 Lipiec 2015

browserstackTechnologie i techniki tworzenia mobilnych stron, mimo że są i działają, charakteryzują się jeszcze niedojrzałością i siermiężnością. No bo jak napisać złożoną stronę która będzie wyświetlała w 100% (i ani o 1% mniej) szerokości absolutnie na każdym urządzeniu mobilnym? Rzeź, przynajmniej na razie. Przeliczanie rozdzielczości natywnych, symulowanych, faktycznych i bóg wie jakich jeszcze, na niemal każdym urządzeniu działa inaczej. A do tego ta przeglądarka obsługuje viewport, a tamta nie, a jeszcze ina – częściowo i nie zawsze. Temat jest do ogarnięcia, ale pochłania mnóstwo czasu i pracy.

Najgorzej jest z testowaniem na różnych urządzeniach. Byłoby dobrze mieć pod ręką wszystkie typowe fizyczne sprzęty, ale to ze względów głównie finansowych – niemożliwe. Z pomocą przychodzą nam więc aplikacje/emulatory i symulatory. Nie dość dokładne -prawie wszystkie. Prawie – bo jest wyjątek. BrowserStack oferuje testowanie działania i wygladu stron na wielu popularnych sprzętach z iOSem i Androidem. Usługa jest płatna, ale (na ten moment) można za darmo testować działanie (na dokładnym, natywnym emulatorze) przez kilkadziesiąt minut oraz wykonać kilkadziesiąt screenshotów.

Każdy mobilny webdeveloper powinien znać to narzędzie. ;) A może są jakieś inne, podobne, o których nie wiem?

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.

Skomodorkuj siebie :)

niedziela, 1 Kwiecień 2012

Bezużyteczna zabawka znaleziona na Wykopie jakiś czas temu: Za pomocą tej prostej aplikacji każde zdjęcie / obrazek możesz bardzo szybko przerobić na taką, która będzie wyglądać jak wyświetlana na kościach graficznych legendarnego komputera C=64.

C64 Yourself to fajna rzecz, może kiedyś komuś przyda się w jakimś awangardowym projekcie. :)

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.

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

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.

Najlepsze webaplikacje roku 2010

poniedziałek, 3 Styczeń 2011

Krótko, treściwe, obiektywne i konkretne zestawienie. Na pewno będę użytkownikiem co najmniej 3 z tej dziesiątki.

Gra w HTML5

niedziela, 7 Listopad 2010

<a href=”http://www.phoboslab simvastatin price.org/biolab/”>Jeszcze jedna zaległość, którą chciałem opublikować: Grywalna i nawet wciągająca gra, napisana w całości w HTML5 (plus javascript oczywiście). Może szaef Apple’a ma trochę racji, mówiąc że flash nie będzie już potrzebny… Zapraszam do gry :)

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.

Estetyczne ładowanie

piątek, 3 Kwiecień 2009

Animacje preload Prawie dwa lata temu prezentowałem stronę AjaxLoad, na której stworzyć można było „profesjonalną” animację typu „please wait”.

Dziś u RAFiego znalazłem link do podobnego serwisu, jednak tam jest inny – wg mnie obszerniejszy i lepszy – wybór animacji. Najbardziej smakowite są animacje 3D, które można stosować chociażby w LightBoxie, czy innych *boxach.

Pozwoliłem sobie obok stworzyć małą mozaikę z typów animacji oferowanych właśnie przez Preloaders.net, aby lepiej Was zachęcić – wizualnie. :).

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

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.

Tester wyrażeń regularnych

wtorek, 17 Lipiec 2007
Wyrażenia regularne zawsze były dla mnie czarną magią. Jednocześnie czasami bardzo się przydają, ale napisanie skomplikowanego „wyszukiwacza” trwa u mnie czasem kilka godzin. Prawdopodobnie następnym razem REGex TESTER bardzo mi pomoże.

Pingdom tools

wtorek, 3 Lipiec 2007
Pingdom ToolsPingdom Tools to narzędzie analizujące podaną witrynę pod kątem czasów wczytywania się jej elementów. Można też mierzyć ping i traceroute, a wyniki obliczeń sortować i filtrować na różne sposoby. Słowem – narzędzie może być bardzo przydatne do optymalizacji strony.

IE NetRenderer

piątek, 8 Czerwiec 2007

Kiedyś już pisałem o narzędziach robiących screenshoty witryn pod różnymi przeglądarkami. Takie narzędzia pomocne są szczególnie tym, którzy chcą stworzyć stronę wyglądającą tak samo pod różnymi browserami, ale nie mają do nich dostępu.

IE NetRenderer Wczoraj grxmrx podrzucił mi link do narzędzia o nazwie NetRenderer. Co prawda NetRenderer robi screenshoty tylko jako IE, ale za to we wszystkich ‚kluczowych’ wersjach 5.5, 6 i 7 a także (i to jest najlepsze) potrafi stworzyć obrazki które są wynikiem nałożenia na siebie zdjęć stron z przeglądarek IE 6 i 7 przez co można w bardzo prosty sposób wyłapać różnice w wyglądzie badanej strony wyświetlanej na tych dwóch browserach. Rzecz iście przydatna :)

17 przydatnych narzędzi kolorystycznych on-line

piątek, 1 Czerwiec 2007

… czyli rozszerzenie mojego styczniowego wpisu o tytule „Kolorowe narzędzia„. Linków tego typu trochę mi przybyło, postanowiłem je więc razem wylistować w jednym poście.

Kilka ostatnich pozycji jest ciekawostkami lub narzędziami „z przymrużeniem oka”… W każdym razie na pewno kliknąć warto :)

My Cool Button

wtorek, 29 Maj 2007

My Cool Button Na Wykopie co prawda ten link nie został doceniony (czytaj: nie wszedł na stronę główną), ale uważam że tutaj powinien zagościć. A mamy do czynienia z on-line’owym generatorem cukierkowych przycisków w stylu web2.0. Rzecz dość fajna: ustala się kolory, rozmiary, czcionkę, można wstawić swoją ikonkę… brakuje jednak pozycjonowania elementów (szczególnie pionowe centrowanie nie jest dobrze rozwiązane) oraz automatycznego odświeżania wyniku… no ale narzędzie jest przydatne, chociażby do generowania pustych buttonów, na które potem naniesiemy grafikę „ręcznie”.

Panta Deusz Lorem Ipsum (i nowomowa)

środa, 23 Maj 2007

Panta Deusz Każdy wie czym Lipsum.com jest :) Lecz nie każdy wie, że istnieje narzędzie Lipsum.pl, dzięki któremu możemy wygenerować tekst wypełniający layout – nie tylko łaciński Lorem Ipsum, ale także nowomowę oraz tekst złożony z fragmentów Pana Tadeusza, rozpraw Kanta, lub nawet tekst pisany cyrylicą (nie mam pojęcia o czym ;)). Narzędzie jest przydatne, wygodne i nowocześnie zaprojektowane. Podoba mi się :)

Stripe Generator (2.0 Beta, oczywiście ;))

piątek, 27 Kwiecień 2007
Stripes Jak wiadomo, na tym blogu zbieram linki do wszelakich narzędzi webmasterskich. Nie mogłem więc pominąć jednego z moich ostatnich wykopów i nie zamieścić linka do aplikacji Stripe Generator. Stronka służy do generowania prawie-w-real-time pasków spotykanych często u góry teł witryn internetowych. Co prawda programik jest trochę ograniczony (aby odświeżyć podgląd – trzeba weń kliknąć, możliwe są tylko ułożenia pasków co 45° oraz wysokość maksymalna do 200px), ale używalność i pożyteczność jest dobra – oszczędza się trochę czasu w Photoshopie…