RSS

Text Fade Read More – tweaks

śr, gru 5, 2012 1 534 razy czytany

nie komentowany

If you were looking for nice text fade out with read more link you probably found this one: http://css-tricks.com/text-fade-read-more/. This is great tutorial and helped me with most recent project, however I need this effect working on white background and working on Internet Explorer.

I spend few moments on tweaking this one and decide to share that with you to save your time.

background: rgba(255,255,255,0);

/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, white));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), white);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0), white);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0), white);
background-image: -o-linear-gradient(top, rgba(255,255,255,0), white);

Make sure you add background property – without this you’ll get nasty gray gradient. We don’t want that on white background.

Another one thing I’ve noticed that it didn’t work on IE – just add this line to the same class definition:

filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#00FFFFFF, endColorstr=#FFFFFFFF)

tada … tested only on IE9 on IE9 and IE8 mode, so I think you should be fine.

Cheers

 

Continue reading...

Design i oferta od Depositphotos

pon, paź 29, 2012 1 496 razy czytany

nie komentowany

Każdy twórca stron internetowych może potrzebować odpowiedniej grafiki, która nie tylko powinna

być jak najwyższej jakości, tak żeby wzbogacała projekty, ale co ważne jej cena również powinna
być przystępna. Dzisiaj przyjrzymy się ofercie oraz designowi strony banku zdjęć stockowych
Depositphotos.

Ogólnie Depositphotos to zagraniczny bank stockowy, który oferuje nam pliki stocki na licencji
royaltyy-free – ilustracje, zdjęcia, grafiki stockowe. To propozycja zarówno dla osób, które potrzebują
grafik do swoich projektów, jak również dla tych, którzy chcą sprzedać wysokiej jakości grafiki czy
zdjęcia. W bazie znajdziemy ponad 9 milionów plików stockowych do pobrania, które są zbiorem
pracy twórców z całego świata. Ze znalezionych informacji wynika, że Depositphotos planuje również
wprowadzić wideo stockowe, w ofercie dla dostawców możemy zauważyć zachętę do wgrywania
tego rodzaju plików. Same zdjęcia możemy kupować za kredyty, jako pojedyncze pliki co jest bardziej
korzystne, gdy potrzebujemy mniejszej ilości plików. Wówczas ceny oscylują od 0,8 dolara za pliki
o niskiej rozdzielczości do 20 dolarów za pliki wektorowe, które możemy powiększać do dowolnych
rozmiarów bez straty na jakości pliku. Druga opcja to abonamenty czasowe i mamy tu przyglądało
najtańszy i najmniejszy abonemetn za 69 usd, który zapewnia nam pobieranie 5 plików o dowolnych
rozmiarach dziennie przez okres miesiąca lub największy abonament za 1899 usd, dla osób z
większym zapotrzebowaniem na Stocki, w którym każdego dnia możemy pobierać 30 plików dziennie
przez cały rok.

Odwiedzając bank Depositphotos mamy wrażenie, że strona jest bardzo prosta i nie atakuje nas
zbyt dużą ilością informacji, nie razi w oczy intensywnymi kolorami. Dużym udogodnieniem jest
polska wersja językowa strony, jako jedna z trzynastu dostępnych opcji. Na samej górze widzimy
wyszukiwarkę plików, przy pomocy której szybko możemy zacząć korzystać z serwisu i znaleźć
interesujące nas pliki. W centrum umieszczony jest przesuwany ekran, który informuje nas o
najnowszych wydarzeniach i promocjach w serwisie, obecnie 20 procent . Strona cechuje się
lekkością, dzięki której przeglądanie staje się bardziej przyjemne i przede wszystkim nie sprawia
nam problemu. Najważniejsze informacje, jak na przykład ceny abonamentów czy pojedynczych
plików widać już na stronie głównej, dzięki czemu nie tracimy czasu na poszukiwania. Na samym dole
widzimy rozbudowane menu, z którego możemy dotrzeć do każdego miejsca serwisu bez względu na
to czy interesuje nas kariera w Depsositphotos czy też propozycja dla dostawców plików stockowych.
Dzięki prostocie strony zwiększa się jej funkcjonalność i szybkość ładowania. Przy tego typu stronach
bardzo ważna jest również odpowiednia wyszukiwarka plików. Jak wspominaliśmy znajduje się ona
w dosyć widocznym miejscu a jej działanie jest w pełni satysfakcjonujące. Ogólnie przy bazie zdjęć
posiadającej ponad 9 milionów plików przydaje się funkcja ligtbox, która ułatwia wyszukiwania,
zapamiętywanie wyszukiwania czy dodawanie plików do koszyka, a również odpowiednie filtry
pomagają nam znaleźć to co rzeczywiście nas interesuje.

Podsumowując, zarówno samo wykonanie strony jak i oferta serwisu jest dosyć interesująca, dlatego
warto się nim zainteresować. Bardzo przyjemne są różnego rodzaju promocje, przykładowo obecnie
mamy zniżkę na zdjęcia związane z Halloween, a aktualne informacje w tym temacie prezentuje blog
Depositphotos
. Dla innych banków, może być to poważna konkurencja, czy zmniejszą swoje ceny czy
będą konkurować z Depositphotos w jakiś inny sposób?

Continue reading...

Nowe szablony (templates)

sob, cze 23, 2012 2 227 razy czytany

1 komentarz

Jako web designerzy i developerzy bardzo często spotykacie się z sytuacją kiedy klient potrzebuje coś najlepszego na świecie i na wczoraj. Z pomocą przychodzą gotowe templaty (szablony). Na szczęście jest z czego wybierać i wcale nie są drogie jeżeli przeliczysz kilka dolarów na ilość roboczogodzin, które trzeba by poświęcić na stworzenie czegoś równie dobrego jak te:

 

 

 

To okazuje się, że można naprawdę dużo zaoszczędzić, bo wiadomo, że czas to pieniądz.

Następnym razem skoncentrujemy się bardziej na szablonach, które są kompatybilne z urządzeniami przenośnymi

Continue reading...

WHMCS client area template

wt, maj 22, 2012 1 421 razy czytany

nie komentowany

Witam wszystkich po przerwie … następna pewnie też będzie pewnie taka długa.

Mały update. Jeżeli świadczysz usługi hostingowe i korzystasz z WHMCS mała niespodzianka. Uaktualniliśmy  nasze dwie tempki dostępne na themeforest o dodtkową opcję – panel administracyjny klienta jako WHMCS template. Link do naszego portfolio na themeforest.

Instalacja jest bajecznie prosta. Haczyk jest tylko taki, że trzeba zainstalować WHMCS w podkatalogu, tempka (ok – niech będzie – landing page) musi być w katalogu głównym. W paczce jest instrukcja, z tym, że nie po polsku, ale jeżeli będziecie mieli jakieś problemy, to można śmiało do nas pisać po polsku przez formularz kontaktowy.

WHMCS Template

WHMCS Hosting Template

Continue reading...

Kolejne przykazania … czego nie powinno się robić na stronach. Część 2′a.

czw, mar 15, 2012 2 429 razy czytany

nie komentowany

Po dosyć długiej przerwie.

16. Nie używaj migającego tekstu – chyba, że wiesz na 100%, że będą strone odwiadzać ludzie z 1996 roku.

17. Staraj się unikać skomplikowanych URL’i – proste, zawierające kluczową dla treści frazę / słowa są najlepszym rozwiązaniem – nie tylko raking strony będzie szedł w górę, ale również łatwiej będzie znaleźć link w wyszukiwarce, zanim jeszcze strona się wyświetli.

18. Staraj się unikać „drop down” menu – wiem – dzisiejsze rozwiązania css/js umożliwiają nam tworzenie ładnych i bajerackich menu, ale … zwróć uwagę, że odwiedzający nie wie od pierwszego wejścia jakie ma dostępne opcje.

19. Upewnij się, że można nawigować po Twojej stronie tylko tekstem – innymi słowy – nie rób linków z obrazków. Po pierwsze – prędkość, a po drugie  - zdziwiłbyś się jak byś wiedział ile ludzi przegląda strony z wyłączonymi obrazkami.

20. Jak już linkujesz do PDF’ów to upewnij się, że one tam się znajdują. Miałeś nie raz coś takiego, że klikasz na link do pdf’a na stronie i masz wrażenia, że przeglądarka się zawiesiła ? To jest właśnie skutek tego, że dokument nie istnieje, a przeglądarka uruchamia program do przeglądania pdf’ów.

21. Nie mieszczaj w głowie odwiedzającemu wersjami stron … wersja flash, wersja html, wersja 56kbps … nic mnie to nie obchodzi – CHCĘ TREŚĆ!

22. Nie miksuj reklam z treścią. Rozumiem, każdy chce trochę zarobić, a źródło przychodu pasywnego to już w ogóle liga, ale pamiętaj, że jeżeli czytalnika zacznie to drażnić, to przestanie odwiedzać Twoją stronę – a to już strata często nie do odrobienia.

23. Nie komplikuj nawigacji – upewnij się, że jest jednolita i prosta  w odbiorze.

24. Wszelkim introm stanowcze NIE ! – chyba, że chodzi o jakiś powiedzmy artystyczny projekt. Przychodzisz do restauracji głodny to nie potrzebujesz wstępnych opowieści od szefa kuchni, tylko – menu, zamówienie … i smacznego.

25. Zapomnij o korzystaniu z czegoś takiego jak FrontPage i innych tanich / darmowych programów, które same robią strony. Najczęściej generują one tonę niepotrzebnych znaczników i zbędnych komentarzy.

26. Upewnij się, że strona jest kompatybilna z popularnymi przeglądarkami.  Nie wszystkie przeglądarki na podstawie tego samego HTMLu/CSS wygenerują tak samo wyglądająca stronę.

 

Continue reading...

Ultimate Hosting

czw, mar 15, 2012 2 163 razy czytany

2 komentarzy

Kolejna tempka naszego autorstwa została zaakceptowana przez ekipę z themeforest.

Tym razem zupełnie zmiana klimatu aczkolwiek w dalszym ciągu hosting. Możecie ją nabyć za jedyne 8 dolarów oszczędzając wiele godzin czasu pracy.

Continue reading...

Co tam w sieci piszczy …

nie, lut 5, 2012 1 726 razy czytany

nie komentowany

Rozpocznę serię wpisów w kategorii „internet”. Wszystko co uważam za ciekawe i przydatne dla web designerów / developerów znajdziecie tutaj. Tak więc zaczynamy:

  1. 50 darmowych szablonów wizytówek do photoshopa – tylko nie mówcie nikomu :-)  
  2. Na pewno widzieliście w różnych projektach fajne tło wyglądające jak stara farba odchodząca od powierzchni. Kto ma czas, żeby pomalować coś i czekać kilka lat, żeby pstryknąć fotkę – miłej zabawy. Ja znalazłem na tym samym blogu 20 tego typu tekstur do urzycia w Waszych projektach.
  3. Potrzebujesz ładnych ikonek do twittera ? Daleko szukać nie musisz - znajdziesz je tutaj – wysokiej jakości.
  4. Szukasz jakiś fajnych retro fontów  ? Dobrze się składa, ponieważ tripwiremagazine właśnie zebrał całkiem ładną kolekcję 40 darmowych fontów w takim właśnie retro stylu.
  5. Na tym samym blogu znajdziemy bardzo ciekawe zestawienie 40 tematów do wordpressa z naciskiem na rozwiązania businessowe.
  6. Jeszcze jedna gratka dla grafików, w szczególności tych, którzy korzystają z photoshopa, albo chcieli by poznać lepiej możliwości tego doskonałego narzędzia - 101 tuoriali i podkładów.

 

Continue reading...

Just Hosting – szablon

wt, lis 22, 2011 1 648 razy czytany

nie komentowany

Przed paroma miesiącami zamieściliśmy nowy szablon na themeforest – „Just Hosting” – jak nazwa wskazuje, był on wykonany z myślą o usługach hostingowych. Jest to szablon umieszczony w kategorii „landing pages”, a to dla tego, że nie było czasu opracować pełnej wersji, ale wierzymy, że dla tego typu usług nie trzeba się mocno rozpisywać. Szablon ten zrobiliśmy korzystając z PHP, HTML5 i CSS. W komplecie są pliki ze skryptami .js i .php dla działania formularzy oraz oczywiście instrukcja po angielsku.

Tak więc, jeżeli chcesz zaoszczędzić tonę czasu to poświęć te $8 – w cene wliczony support :-)

Continue reading...

Kolejny szablon naszego autorstwa – tym razem … Hosting.

nie, maj 1, 2011 1 713 razy czytany

nie komentowany

Jakiś czas temu chłopaki z themeforest wprowadzili nową kategorię do szablonów: marketing. Podzielona jest ona na dwie główne podkategorie – szablony maili i „landing pages”.

Ostatnio nasza produkcja została zaakceptowana w tej ostatniej i jest do kupienia za jedyne 8 dolców. Bardzo czytelny i przejżysty kod – łatwo zmodyfikować. Jeżeli zdecydujesz się nie ukraść tylko kupić to w „zestawie” znajdziesz pliki źródłowe do wszystkich elementów graficznych, co pozwoli na jeszcze dokładniejsze dostosowanie do własnych potrzeb.

Ok – nie ma co się rozpisywać – polecamy:

Continue reading...

Kilka ładnych darmowych fontów

pt, kwi 26, 2013 1 803 razy czytany

1 komentarz

Ostatnio zintensifikowałem (ale słowo) prace nad szablonem dla firmy hostingowej i w ramach inspiracji szukałem jakichś darmowych fontów. Poniższą listę stworzyłem w sumie dla siebie, ponieważ pewnie po pracy zapomnę o nich, a tak zawsze wiem, że je znajdę u siebie na blogu :-)

1. Ines

2. Henorias – te fonty w darmowej wersji nie mają dużych liter.

3. Daiichi

4. Designio

 

Continue reading...

Jeszcze więcej fontów

pt, cze 3, 2011 2 210 razy czytany

nie komentowany

Z lekkim opóźnieniem ale zawsze … pod koniec kwietnia google zwiększyło liczbę dostępnych fontów do 100! Teraz jest z czego wybierać:

http://www.google.com/webfonts

Dla przypomnienia – fonty te są stworzone z myślą o wykorzystaniu ich na naszych stronach zamiast systemowych – arial, times etc. Cały proces jest bardzo prosty – wystarczy dodać jedną linijkę w nagłówku, np:

<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Tangerine">

do tego w arkuszu styli zdefiniować font-family, np:

body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

Zrobione! Proste – no nie ?

Jedyna wada tego rozwiązania jest to, że nie działa we wszystkich przeglądarkach. Chociaż … czy Internet Explorer jest przeglądarką ?

Continue reading...

Kolejne przykazania … czego nie powinno się robić na stronach. Część 1′a.

wt, wrz 14, 2010 2 154 razy czytany

nie komentowany

Znalazłem ciekawy wpis na DailyBlogTips … http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/ – dla tych którzy nie mieli angielskiego i dla tych, którzy zajmują się stronami internetowymi – 43 pomyłki w przy projektowaniu stron.

  1. Odwiedzający musi wiedzieć OD PIERWSZEGO wejścia gdzie trafił – strona musi być tak zrobiona, żeby odwiedzający w ciągu kilku (nawet mniej) sekund wiedział o czym jest strona – inaczej – straciliśmy go na zawsze.
  2. Treść i elementy strony muszą być wyraźne i odróżniać się od siebie – pamiętajcie, żeby korzystać z nagłówków, list  i skróceń.  Strona to nie książka – zapomnijcie o dużych blokach tekstu.
  3. Nie korzystaj z dziwnych nieczytelnych czczionek – czy to nagłówki, czy już nie daj boże (… którykolwiek) w treści – oczywiście trudno się oprzeć pokusie wstawienia jakichś fikuśnych czcionek, ale pamiętajcie, że strona ma przekazywać informacje.
  4. … i z bardzo małych. Oczywiście moja przeglądarka ma opcję powiększania tekstu, ale to będzie ostatni raz kiedy ją odwiedziłem.
  5. Nie otwieraj nowych okien przeglądarek. Sam kiedyś tak robiłem bo chciałem, żeby odwiedzający zawsze miał moją otwartą. BŁĄD!. Niech sam zadecyduje. W każdej przeglądarce jest opcja „back”, najczęściej bardzo wielka, tak więc odwiedzający jak będzie chciał to wróci.
  6. … i nie zmieniaj ich rozmiarów. Wizytujący powinien kontrolować swoją przeglądarkę i tutaj nie ma dyskusji.  To jest tak jak by ktoś przyszedł do Ciebie do domu jak oglądasz telewizję i przestawiał Ci telewizor i ustawienia …
  7. Nie wymagaj rejestracji. Internet jest po to, żebym to ja szukał w nim informacji a nie odwrotnie.  Nie zmuszaj odwiedzających do zostawiania maila itp. dotąd dopuki jest to niezbędne.
  8. Nie wpisuj automatycznie na listy mailowe. Jeżeli wizytujący zarejestrował się to nie traktuj tego jako kolejny „klient”, którego można zasypać najnowszymi wiadomościami. Niezbyt dobra metoda na pozyskiwanie klientów.
  9. Nie nadużywaj Flash’a. Flash może być uciążliwy – szczególnie jak się jeszcze musi wczytywć tygodniami. Oczywiście, jeżeli jakaś usługa nie może być dostarczona czy zobrazowana statystycznymi stronami, to ok.
  10. Nie włączaj muzyki. Pamiętacie początki www ? Albo reklamy na polskich portalach ? Nie włącza się muzyki  i koniec. Kropka.
  11. … jak już musisz to niech odwiedzający ma kontrolę nad tym. Są takie sytuacje – oczywiście. Np. zapis przemówienia, ale w dalszym ciągu to odwiedzający ma zadecydować kiedy chce słuchać.
  12. Zapomnij o stronie startowej, która przniesie odwiedzającego na stronę … startową. Im mniej kliknięć do treści – tym lepiej.
  13. Upewnij się, że strona zawiera kontakt. Nie ma chyba nic gorszego jak brak takiej informacji. Możesz stracić okazję życia …
  14. Zapomnij o migającym tekście … no chyba, że masz odwiedzających z 1996′go roku (jak ? Nie wiem …)
  15. Unikaj dziwacznych URL’i. Raz, że pomaga to przy SEO, a dwa jak będe wpisiywał Twoją domenę to łatwiej mi będzie znaleźć treść, do której chciałem powrócić.

Oczywiście dla większości z was te wskazówki są oczywiste, aczkolwiek wiecie z własnego doświadczenia, że można natknąć się na takie różne kwiatki.

Póki co wracamy do pracy, a kolejna dawka przykazań już jutro.

Zapraszam.

Continue reading...

Hosting – szablon naszego autorstwa do kupienia

wt, wrz 14, 2010 2 182 razy czytany

nie komentowany

Jeżeli właśnie zabieracie się za stronę z usługami hostingowymi – możecie przestać. Mamy dla was doskonałe rozwiązanie – szblon do kupienia naszego autorstwa za pośrednictwem ThemeForest.

Hosting templateJak widać siła jest tutaj w prostocie. Dostosowanie do własntych potrzeb – baaardzo łatwe. Cena również nie powinna odstraszyć – szczególnie, jeżeli zarabiacie $14 na godzinę :-)

Szablon jest przygotowany pod skrypty PHP – wszystkie formularze działają i „zabierają” nas gdzieś za każdym razem, tak więc jeżeli pracujecie nad istniejącym serwisem to sprawa jest ułatwiona.

W „paczce” znajdziecie wszystkie projekty graficzne jako .psd i png – pierwotnie projekt powstał w fireworksie. Będziecie potrzebowali również zainstalować fonty – wszystko jest dokładnie opisane.

Jeżeli nie macie jeszcze konta w Envato – polecamy założyć.

Continue reading...

Jeżeli architekt miałby dostawać zlecenia tak jak web designer …

pt, sty 22, 2010 4 710 razy czytany

1 komentarz

Od jakiegoś czasu pracuję w troche większej firmie niż poprzednio i jest trochę więcej do zrobienia. Mój szef po ostatnim projekcie, który zamknąłem w 4 dni, zapytał czy nie mógł bym nad następnym bardziej się „sprężyć” – mimo, że wcześniej jak zlecał to samo freelancerom, to czekał po kilka tygodni na jakiekolwiek rezultaty. Co ciekawe podsunął mi taki tekst: link.

Fajny … i taki prawdziwy. Przetłmaczę go dla Was.

Drogi Architekcie.

Proszę zaprojektować i zbudować mi dom. Nie jestem do końca pewien czego dokładnie potrzebuję, tak więc zdaje się na pańską wyobraźnię. Dom powinien mieć od 2 do 45 sypialni. Proszę uwzględnić w projekcie to, żeby łatwo można było tą ilością manipulować. Zdecyduję, kiedy zostaną mi przedstawione plany. Proszę również przygotować kosztorys dla każdej konfiguracji.

Dom na który się zdecyduje powinien kosztować mniej niż ten w którym mieszkam obecnie. Proszę się upewnić, że nowy dom nie będzie miał tych wszystkich usterek, które są w obecnym (podłoga w kuchni skrzypi i ściany nie są wytarczające wypełnione izolacją).

Proszę pamiętać w trakcie projektowania o minimalnych rocznych kosztach utrzymania. Mam namyśli tutaj zastosowanie takich materiałów jak aluminium, polichlorek winylu oraz kompozyty. Jeżeli zdecyduje się Pan na nie wykorzystanie aluminium, proszę być przygotowanym na szczegółowe wyjaśnienie.

Chcę aby dom był nowoczesny i zbudowany z wykorzystaniem nanowszych materiałów konstrukcyjnych – miałem okazję zapoznać się z takowymi podczas targów budowlanych. Aczkolwiek kuchnia musi pasować do mojej lodówko – zamrażarki – Gibson z roku 1952.

Proszę również  skontaktować się z moimi dziećmi i dziećmi z poprzedniego związku mojej żony w celu ustalenia co jest ważne dla nich w tym projekcie. Mojej teściowej zdanie też powinno się liczyć, aczkolwiek zostawiam sobie ostatczne decyzje.

W trakcie wstępnych prac proszę o nie dopytywanie o detale  – proszę skoncentrować się na całokształcie. Dla przykładu, nie interesują mnie kolory wykładzin. Aczkolwiek proszę pamiętać, że moja żona lubi niebieski.

Również proszę się nie przejmować robotnikami – najważniejsze są szczegółowe plany i specyfikacje. Aczkolwiek chciałbym, żeby dom został wybudowany w 48 godzin.

W trakcie projektowania mojego domu, proszę pamiętać, że prędzej czy później będe chciał go sprzedać. Musi się podobać jak największej ilości potencjalnych nabywców. Projekt musi uwzględniać zapatrywania i potrzeby lokalnej społeczności. Zalecałbym przyjżeć się domowi mojego sąsiada, który był zbudowany w ciągu ostatniego roku. Ma dużo rzeczy, które nam się podobają, a najbardziej 20 metrowy basen. Wierzę, że jesteś w stanie uwzgędnić to w projekcie bez zwiększania kosztów.

Proszę przygotować szczegółowe plany konstrukcyjne – nie muszą zawierać elementów dezajnu, gdyż będą wykorzystane tylko przetargu. Musisz pamiętać, że  jeżeli koszty konsrtukcji wzrosną w wyniku zmian w dezajnie, będziesz obciążony kosztami.

Wierzę, że jesteś podekscytowany mając okazję pracować nad tak interesującym projektem! Nie codziennie jest możliwość pracowania nad projektem, który uwzględnia najnowsze technologie i materiały, a jednocześnie daje swobodę „twórczą”. Skontaktuj się ze mną możliwie jak najszybciej z gotowymi pomysłami i planami.

PS. Moja żona właśnie mi powiedziała, że nie zgadza się z większością moich instrukcji. Zostawiam Tobie (jako, że to Ty jesteś architektem) to zadanie – dostosowanie projektu do sugestii mojej żony. Zlecałem podobne prace w przeszłości, które kończyły się fiaskiem. Jeżeli nie jesteś w stanie tego zrobić, poszukam innego architekta.

PPS: Być może bardziej odpowiedni dla mnie była by przyczepa kampingowa … proszę daj znać jeżeli jest to jakiś większy problem.

Dobre – no nie ?

Jeżeli są literówki / orty / źle przetłumaczone fragmenty to nie miejcie pretensji – robię to „cichaczem”.

Continue reading...

Ponad 40 zastosowań jQuery …

czw, gru 3, 2009 19 319 razy czytany

nie komentowany

… dla poprawienia interface’u naszych stron. Link.

Trochę tego jest. W tym momencie kiedy znalazłem ten link jest trochę późno i nie mam czasu nawet na pokrótkie objaśnianie, aczkolwiek jak znajdziecie coś co wam się przyda to dajcie znać przetłumaczymy i oczywiście sprawdzimy jak to działa.

Continue reading...

Różnice pomiędzy designem a sztuką.

pon, wrz 21, 2009 4 741 razy czytany

4 komentarzy

Ostatnio pojawił się ciekawy wpis na webdesignerdepot pod takim właśnie tytułem. Aż mi się głupio zrobiło, że całej historii związanej z csselite.pl nie zacząłem od czegoś podobnego. Jest to zbiór pewnych fundamentalnych prawd dotyczących tego czym się tutaj zajmujemy … rzadko lub rzadziej.  Ale … wracamy do tematu.

Pytanie czym się różni sztuka od designu od jakiegoś czasu pozostaje bez odpowiedzi. Artyści i designerzy kreują wizualne kompozycje bazując na podobnych technikach i wiedzy ale powody, którymi się kierują są diametralnie różne. Niektórzy designerzy nazywają siebie artystami, ale tylko kilku artystów uważa się za designerów.  Tak więc: jaka jest różnica pomiędzy sztuką a designem ? W tym wpisie porównamy pewne podstawowe zasady tych rzemiósł. Na ten temat większość z was ma na pewno wyrobione zdanie tak więc zapraszam do dyskusji w komentarzach.

Dobra sztuka inspiruje, dobry design motywuje

Prawdopodobnie najważniejsza, fundamentalna różnica pomiędzy sztuką a designem – musicie się z tym zgodzić. Z reguły proces tworzenia sztuki zaczyna się od zera. Niczego. Czyste płótno, kartka. Nieobrobiony kawałek gliny … itd. Dzieło nabiera formy na podstawie uczuć artysty, którymi chce się podzielić, umożliwić odbiorcom odnieść się do tego, nauczyć się czegoś czy chociażby zainspirować. Najsłynniejsze dzieła sztuki to te, które wytwarzają najsilniejsze więzy emocjonalne pomiędzy artystą, a odbiorcami.

Dla kontrastu, kiedy designer zaczyna swoją pracę niemal zawsze ma jakiś punkt odniesienia, od którego zaczyna: wiadomość, obraz, pomysł czy akcja. Designerzy nie są po to żeby wnajdować coś nowego, tylko po to aby połączyć coś co już istnieje dla osiągnięcia zamierzonego celu. Tym celem najczęściej  jest motywowanie odbiorcy do działania: kupienia produktu, skorzystania z serwisu, odwiedzenia miejsca czy  przyswojenia pewnych informacji. Najlepszymi designerami są tacy, których prace najlepiej motywują odbiorców do działania.

Dobrą sztukę się interpetuje, dobry design po prostu rozumie.

Kolejną różnicą pomiędzy sztuką a designem jest to jak przekaz jest odbierany przez poszczególnych odbiorców,  aczkolwiek przekaz artysty ma na celu wywołanie różnych odczuć. Artysta łączy się z odbiorcami różnymi drogami, ponieważ sztuka zawsze interpretowana jest różnie. Mona Lisa Leonarda Da Vinci’ego była i jest interpretowana od wielu lat. Czemu się uśmiecha ? Naukowcy mówią, że to peryferyczna iluzja. Romantycy twierzą, że jest zakochana. Sceptycy zaś, że bez powodu. Żadna z tych grup nie jest w błedzie.

Design natomiast dokładnie odwrotnie. Wielu twierdzi, że jeżeli design może być interpretowany, to znaczy, że mija się z celem. Zasadniczym celem designu jest przekazanie konkretnej informacji i zmotywowanie odbiorcy do określonego działania.

Jeżeli design przekazuje inną informację niż tą, którą założyłeś i odbiorca kieruje swoje działania w tą inną stronę, to znaczy, że design nie spełnia swojej funkcji. Dobry design musi być dokładnie zrozumiany przez odbiorcę.

Dobra sztuka wynika z talentu, dobry desing z umiejętności.

A co na temat umiejętności kreatora ?

Bardzo często artystą trzeba się urodzić. Oczywiście umiejętności będą się rozwijały, kiedy od młodości będzie rysował, malował, rzeźbił itd. Jednak prawdziwa wartość artysty zależy od talentu z jakim się urodził. Jest jeden mały haczyk: dobry artysta z pewnością posiądzie umiejętności pozwolające tworzyć, ale artysta z dobrymi umiejętnościami lecz bez talentu często jest do niczego.

Design  jest  umiejętnością wyuczoną. Nie musisz być artystą, żeby być dobrym designerem. Musisz tylko być w stanie osiągnąć zamierzony cel.

Jenymi z najlepszych designerów są ci, którzy są znani z minimalistycznego stylu. Nie korzystają z dużej ilości kolorów czy tekstur, ale skupiają uwagę na rozmiarach, pozycji, przestrzeni – tego wszystkiego można się nauczyć. Bez talentu.

Dobra sztuka przekazuje różne informacje do wszystkich, dobry desing przekazuje tą samą informację do wszystkich.

Wielu designerów myśli, że są artystami bo tworzą coś co jest wizualnie atrakcyjne. Coś z czego byli by dumni, jak ktoś powiesiłby jego „dzieło” na ścianie. Jednak zamierzona, wizualna kompozycja, która służy do zakomunikowania czegoś, nie ważne jak piękna, nie jest sztuką. Jest to forma komunikacji – takie „okno”, przez które „widzimy” przekaz.

Tylko niewielu artystów nazywa siebie designerami, a to przez to, że rozumieją zasadniczą różnicę. Artyści nie tworzą, żeby sprzedać za pośrednictwem sztuki produktu, albo promować usługi. Tworzą tylko i wyłącznie dla sztuki. Wyrażenia siebie, tak aby inni to docenili. Przekaz jaki otrzymujemy nie jest sam w sobie faktem – ma wzbudzać odczucia i pozwolić nam na interpretację.

I jak ? Co myślisz teraz ?

Continue reading...

Darmowy szablon – Virtual Business Card.

śr, lip 22, 2009 8 978 razy czytany

1 komentarz

Virtual Business Card - darmowy szablon

Mogę się założyć o przysłowiową stówę, źe nie raz spotkaliście się z sytuacją gdzie mała firma nie ma wcale strony albo albo jak już, to jest to jakiś „potworek”. Na ratunek przychodzi wirtualna wizytówka. Prosta i czytelna. Z dodatkowym „bajerem” w postaci przewijanej zawartości.Ponadto jest działający formularz kontakotwy oparty o PHP – na hostingu musi działać funkcja mail() – 99% hostów to obsługuję. Sprawdzałem czy wyświetla się tak samo pod: IE6, IE7, FF, Opera, Chrome na PC i na Mac’u pod FF, Safari. Wygląda na to, źe tak.

Co tu dużo pisać … zobaczie zresztą sami: demo

W „paczce” jest instrukcja co i gdzie trzeba zrobić, źeby dostosować do własnych potrzeb. Instrukcja jest w języku angielskim ale poradzicie sobie  nawet i bez tej instrukcji – wszystko jest przejźyste.W razie potrzeb można ten szablon łatwo rozciągnąć. W sekcji <header> w pliku index.php jest skrypt w którym jest zefiniowana wysokość tej części przewijanej plus jedna korekta w css/screen.css i zrobione. Dodatkowo znajdziecie projekt jako .png dla Fireworksa – w tym powstał ten szablon. Dla „photoshoperów” przekonwertowałem to również na taki format.

Jedna prośba – było by miło jeżeli zostawilibyście link zwrotny.

Jakieś pytania / problemy – śmiało pytajcie.

Continue reading...

Za darmo ? Użyteczne ? Online ? Coś dla nas …

nie, maj 31, 2009 4 190 razy czytany

1 komentarz

Chłopaki ze smashingapps znaleźli i zebrali w jednym miejscu całkiem niezły zbiór stron, które bardzo mogą się nam przydać. W sumie są to strony, które zawierają w sobie aplikacje. Jaki jest sens wydawać monstrualne pieniądze na Photoshopa, żeby skorygować i przyciąć zdjęcia ? Ok – są przecież Gimpy i inne darmowe narzędzia powiecie. Mnie się podoba w tych przytaczanych w tym wpisie to, że nie trzeba ich instalować i w zasadzie nie ma konieczności nauki co gdzie i jak – z tąd też pewnie nigdy nie instalowałem tych darmowych, a jak już to nigdy nie było czasu, żeby się „wkminiać” w ten soft.

Ale – wracając do tematu. Pierwsza strona, o której warto pamiętać to Pixlr.com:

pixlr

Filozofią obsługi bardzo przypomina wspomnianego wcześniej Photoshopa – mamy warstwy, niemal taki sam układ opcji w przyborniku, filtry itd. Po kilku minutach zabawy już wiemy co gdzie i jak. Klika drobnych usprawnień zwiększyło by jeszcze bardziej użyteczność tego serwisu. Jak dla mnie brakuje większej kontroli nad tekstem – nie można zmienić odległości między znakami. Przydała by się większa kontrola nad filtrami. No i brak możliwości stworznia dla warstwy maski. Jakkolwiek – sprawdźcie – warto.

Jeżeli potrzebujesz pasków, to wcale nie musisz popełniać przestępstawa i czekać 2 lata na więzienie, gdzie dostałbyś taką pidżamę. Wogóle nie sprawdzi się takie podejście w przypadku kiedy potrzebujemy paski jako motyw graficzy. Z pomocą przychodzi Stripemania:

stripemania

Kiedyś gdzieś coś podobnego obiło mi się o przeglądarkę, ale stripemania ma chyba więcej możliwości jeżeli chodzi o kolory, natomiast nie można zmienić kąta pod jakim one przebiegają. Ale nie martwcie się – 45 stopni jest ciągle popularne.

Teraz trochę więcej o kolorach.

Jak istotną sprawą są kolory przy projektowaniu … w sumie czegokolwiek, to chyba nie trzeba nikogo przekonywać. Wiem z doświadczenia, że czasami samo zestawienie kolorów może być inspiracją do całego projektu. Z kąd je wziąć ? Jak je dobrać i zestawić razem, żeby projekt miał ręce, nogi … no i ubranie jakieś ? Można zastosować się do pewnych zasad. Oczywiście nie będziemy teraz wdawali się w całą teorię ale skorzystamy z gotowych rozwiązań.

Z pomocą przychodzi firma Adobe, która udostępnia online narzędzie Kuler:

kulerMoim skromnym zdaniem najlepsze tego typu narzędzie jak do tej pory. Nawet nie muszę się rozpisywać z czym to się „je” – wejdź i sam zobacz. Kliknij w „Create” i się pobaw. Warto.

Kolejnym bardzo podobnym narzędziem w działaniu jest ColorSchemer:

colorschemer-colorpixW przypadku tej strony nie do końca wszystko co jest z nią związane jest za darmo. Najważniejsza rzecz w tym interesie, czyli program do generowania palet kolorów, jest płatna -$50. Można przez miesiąc sprawdzić tą aplikację, aczkolwiek biblioteka palet nim stworzonych jest dostępna za darmo w galerii palet – tysiące – jest na prawdę z czego wybierać.

Wracając na chwilę do rozwiązanai zaproponwanego przez firmę Adobe, warto wspomnieć również o ColorWizard:color-wizard

Jeżeli język angielski nie jest dla Ciebie barierą komunikacyjną to znajdziesz również kilka ciekawych artykułów na tej stronie dotyczących teorii kolorów.

Nie chesz pasków i kolorów ? Może zainteresują Cię paterny. Zapoznaj się z BgPatterns:

bgpatternsNa chwilę obecną w serwisie tym nie zostaniemy oszołomieni ilością paternów ale z pewnością prostotą manipulacji ustawieniami.

Kilka więcej ciekawych narzędzi online przydatnych webdesignerom możecie znaleźć na SmashingApps. Z racji tego, że internet jest wielki i z każdą chwilą większy być może Wy znacie jakieś ciekawe narzędzia online, które mogą się przydać nam – projektantom i wykonwacom stron internetowych. Ładnych. Zapraszam do komentarzy oraz do dodawania linków w odpowiedniej sekcji po prawej stronie.

Continue reading...

Jak NIE POWINNO się robić stron.

śr, maj 13, 2009 7 221 razy czytany

5 komentarzy

W internecie można znaleźć bardzo dużo inspirujących galerii stron. Pomagają one zorientować się w najnowszych trendach i z pewnością przyczyniają się do powstawania kolejnych, coraz lepszych, ładniejszych i bardziej przyjaznych stron w internecie. Pomimo tego w dalszym ciągu trafają się strony, które zaprzeczają wszelkim zasadom – tym pisanym i nie pisanym. Jednym z takich „kwiatków” na jaki trafiłem dzisiaj jest strona zespołu weselnego – IDOL. Zobaczcie sami - link.

idol

Zastanawiam się czy nie jest to strona – dowcip. Kiedyś była taka z teńczowym migającym backgroundem i animowanymi gif’ami jako linkami do opcji. To było mistrzostwo, ale ta zespołu Idol jest całkiem poważnym pretendentem na pierwsze miejsce w kategorii najgorzej wykonanej strony.

Jak znajdziecie takie kwiatki to dajcie link w komentarzach – dokleimy. Ku przestrodze …

Update

Dzisiaj ktoś na wykopie dał link do tej strony: http://www.protofolio.w8w.pl/ – wypas – no nie ?

Continue reading...

Garść jeszcze cieplutkich czcionek …

wt, maj 12, 2009 5 918 razy czytany

1 komentarz

… i co najważniejsze – darmowych !

Jak widać, wszyscy mocno zajęci i nikt nie ma czasu wrzucić w linkach od czytelników czegoś ciekawego.  W takim układzie pomogę wam trochę i zaoszczędze trochę waszego cennego czasu – nie musicie szukać nowych fontów. Są tutaj.

Zaczynamy od Junction (do pobrania tutaj – .zip-package )autorstwa Caroline Hadilaksono. Bardzo ładne, eleganckie i stonowane sans-serif’y. junc3Kolejną pozycją na naszej liście jest font Nadia Serif. Do pobrania za darmo, aczkolwiek autorzy proszą o przysłanie do nich PDF’a bądź innego formatu pliku zawierającego pracę, do której font był wykorzystany. Wersja na PC i na mac’a.nadia

Manfred Klein zaprojektował bardzo ładną czcionkę Nilland. W zestawie znajdziemy 6 różnych krojów – normlane, pogrubione, bardzo pogrubione, black – cokolwiek to znaczy, małe kapitaliki i małe kapitaliki pogrubione.

nilland

Następne na liście znajdziemy bardzo czytelne sans-serify CarthoGothic – dostępne są cztery kroje. Zanim jednak z nich skorzystacie zapoznajcie się z licencją.

cartoNa tej liście nie mogło zabraknąć klasycznej szeryfowej czcionki Bergamo Std. Dostępna w czterch różnych krojach: regular, italic, bold i bold italic. Podobnie jak w poprzednim przypadku warto zapoznać się z licencją.

bergamos

Z pewnością, jak większość designerów, nie lubicie (a wręcz nienawidzicie) słynnej czcionki Comic Sans. Wszyscy wiedzą, że ludzie, którzy nie mają bladego pojęcia o designie nadużywają tej czcionki przy każdej nadarzającej się okazji. Na nasze szczęście kilka ładnych lat temu niejaki Hannes von Döhren stworzył alternatywę dla niesławnego Comic Sans’a – HVD Comic Serif. Różnicę widać od razu – jest to czcionka szeryfowa … no i w ogóle fajnie wygląda.

comic

Elegancka, aczkolwiek w trochę starym stylu, zaprojektowana przez Darden Studio: Birra Stout.

birra

Listę tą stwtorzyłem na podstawie wpisu w smashingmagazine.com – chłopaki jak zwykle odstawili kawał dobrej roboty. Mam nadzieję, że dzięki tym kilku czcionkom naszym młodym „designerom” uda się stworzyć wspaniałe projekty.

Jeżeli znacie i moglibyście polecić jakieś inne fajne darmowe fonty zapraszam do dodawania linków w sekcji po prawej stronie.

Continue reading...

Odrobinka PHP – tak dla własnej pamięci.

pt, lis 18, 2011 1 129 razy czytany

nie komentowany

Tak – wiem – minęły wieki od czasu kiedy coś skrobnąłem tutaj, ale naprawdę nie mam czasu. Tzn. nie potrafię gospodarwoać moim czasem i nawet ten wpis jest popełniany w pracy.

Jakiś czas temu w pracy musiałem pracować nad projektem, który jest napisany przez kogoś z użyciem „smarty”. Ciekawa sprawa, ale gościu który podaje się u nas w firmie za „senior web developera” bał się rozszerzać funkcjonalność klas dla tego systemu i koniec końców mogłem tylko odtworzyć funkcjonalność innej strony podmieniając CSSy i obrazki.

Teraz piszę od zera projekt, który opiera się na już istniejącej bazie danych – z racji tego, że objektowe programowanie u mnie jest … nawet nie jest – piszę to z wykorzystaniem procedur. W sumie nic strasznego – gdzieś kiedyś przeczytałem, że biedny serwer za każym razem musi załadować całą klasę, żeby wykonać tylko jedną funkcję, czyli odbija się to na prędkości. Może się mylę – poprawcie mnie.

Do rzeczy – nauczymy się podmieniać znaki w zmiennych tekstowych. Do tego potrzebne są dwie rzeczy: ciąg znaków albo zmienna zawierająca ciąg znaków no i funkcja:\

str_replace(czego_szukamy, zamieniamy_na, w_czym);

Funkcja ta potrzebuje min. trzech parametrów jak widać.

czego_szukamy – jest to coś czego szukamy.

zamieniamy_na – to jest to na co zmienimy to czego szukamy.

w_czym – tekst albo zmienn zawierająca tekst, w którym dokonujem zmian. Np.:

$text = 'mama';
echo str_replace('m','b',$text);

Wynik jaki otrzymamy to oczywiście:

baba

Bardzo proste i uwierzcie mi często przydatne, jeżeli pracujemy na nie swoich bazach danych.

Continue reading...
See more articles in the archive