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.

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.

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

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:

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:

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

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

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:

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

Dodatkowym usprawnieniem jest możliwość zamieszczania linków przez was do czegoś ciekawego co znajdziecie w internecie. Oczywiście dotyczącego web designu.

1. Nie będziesz ignorował kompatybilności między przeglądarkami.

To jest z pewnością problem numer jeden w trakcie tworzenia stron internetowych – muszą wyglądać wszędzie tak samo. Pamiętaj o tym, że są pewne fundamentalne różnice w sposobie interpretacji CSS’ów przez Internet Explorer a inne przeglądarki. Na chwilę obecną może nie jest aż tak źle jak kilka lat (czytaj: kolejnych numerów) wcześniej, aczkolwiek w dalszym ciągu potrafi być to ból w … Fajnie jest tworzyć stronę pod jedną przeglądarkę zapominając o sprawdzaniu działania (wyglądu) pod innymi. Mało tego – jeżeli już sprawdzamy, to mamy skłonność do świadomego lekceważenia problemu. Z doświadczenia wiem, że na naprawienie czegoś w dalszym etapie prac przysparza więcej problemów. Jak już przebrnąłeś przez sprawdzenie czy Twoja nowa strona wygląda tak samo na każdej przeglądarce na Twoim komputerze, to warto też sprawdzić jak będzie wyglądała na innych. Jest takie fajne miejsce w internecie: http://browsershots.org/ – wystarczy podać link, wybrać które przeglądarki nas interesują i poczekać kilka minut. Prawda czasami bywa bolesna …

2. Nie będziesz zapominał o niższych rozdzielczościach.

Kiedy większość web designerów / developerów jest dumna ze swoich dwudziesto i większych calowcych panoramicznych monitorów (nie doszukiwać się analogii w rozmiarach samochodów), to jednak większość normalnych ludzi nie dysponuje takim sprzętem – mało tego – zdarzają się jeszcze przypadki, że ktoś przegląda stronę w 800 x 600 (pewnie telefon – ale to zawsze …). Sprawdź w statystykach odwiedzin swojej strony – taka informacja zawsze gdzieś jest. Google Analytics też ma taką opcję.

3. Korzystajcie z “framework’ów”.

Jak zaczynasz jakiś projekt poraz kolejny od zera, to zadaj sobie pytanie: dlaczego ? Wszystko już zostało raz zrobione – po co wykonywać jakąś pracę dwa razy ? Tyczy się to również naszych CSS’ów. W sieci można znaleźć gotowe dosyć ciekawe rozwiązania – np: blueprintcss czy tez 960 Grid System. ……

4. Będziesz korzystał z ogólnie zdefioniowanych klas.

Łatwo jest zapomnieć o tym, że w przyszłości dany projekt będzie musiałbyć zmieniony (oczywiście nie poprawiony, bo zakładamy, że to co tworzymy jest właściwie doskonałe . Złapaliście się na tym, że do każdego obiektu / elementu tworzycie osobną klasę ? ….

5. Będziecie sprawdzali poprawność HTML/XHTML.

Mogę sobie dać obciąć … palec, że nawet nie pomyślałeś o tym jaki wpływ poprawnie zwalidowany HTML ma na CSS. Tak więc – sprawdź najpierw czy HTML jest poprawny. Czasami może być tak, że jakiś mały błąd – literówka czy nie zamknięty DIV – przejdzie i przeglądarka jakoś wyświetli stronę (błędy przeglądarek) a po dodaniu CSS wszystko zaczyna się krzaczyć. Tak więc – zacznim zaczniesz obwiniać CSS, upewnij się np. tu, że HTML jest cacy.

6.  Będziecie sprawdzali wadlidowanie CSS.

Często prześladowałem znajomych (tych, którzy się zajmują web designem) coby mi pomogli znaleźć rozwiązanie problemu w CSS’ie. Też tak robicie … Jakkolwiek – jeden z nich, za każdym razem odsyłał mnie do walidatora kodu CSS. I chwała mu w sumie za to bo przynajmniej 90% problemów wynikało właśnie z błędów w kodzie.

Dodatkową korzyścią jest to, że szanse na poprawne działanie kodu w różnych przeglądarkach wzrastają.

7. Nie będziecie korzystali z wieeeeelkich obrazków jako tło.

Często się zdarza, że początkujący web designerzy korzystają z wielkich obrazków jako tło do strony. Mało tego, żeby mieć pewność, źe będzie to dobrze wyglądało i działało na KAŻDEJ rozdzielczości, potrafią zaserwować coś jak 3000 x 2000. Spróbujcie zamiast tego korztstać z obrazków, które mogą się powtarzać albo w pionie albo w poziomie (paterny) – zamiast 200kB mamy 2kB. Zwróćcie uwagę jaka oszczędność na paśmie plus goście na naszej stronie nie muszą czekać na wgrywanie takiego wielkiego tła.

8. Nie będziecie na siłę robili wszystkiego w CSS’ach.

Zwróćcie uwagę, że jak pojawi się tylko coś nowego (jakieś rozwiązanie itp.) wszyscy na siłę chcą z tego skorzystać. Nie zawsze trzeba. Przykład – tabele. Po to one są, żeby przedstawiać w nich dane tabelaryczne, a nie walczyć z problemem posługując się DIV’ami i CSS’ami. Style CSS są po to, żeby proces tworzenia przyspieszyć, a nie spowalniać.

9. Nie będziecie ustawiali styli elemntów w kodzie HTML.

To jest jak zaraza ale występuje częściej niż byś się spodziewał. Robiąc stronę ZAWSZE trzymaj w osobnych plikach (X)HTML i CSS. Jak się nie będziesz do tego stosował, to kiedy będziesz chciał coś zmienić w stronie będziesz musiał się przekopywać przez kody (X)HTML. Co przy większch projektach jest naprawdę czasochłonne. Np. zamiast:

<a style=”float: right; color: #333333;” href=”somewhere.html”>link</a>

lepiej zrobić to tak:

<a href=“somewhere.html” class=“link_style”>link</a>

i oczywiście w arkuszy styli zdefiniować klasę “link_style” i nadać mu odpowiednie atrybuty. Proste – no nie ? A ile może zaosczędzić czasu w przyszłości.

10.  Nie będziecie korzystali z wielu plików CSS.

Zetknęliście się kiedyś ze stronami, do których style były rozbite na np. 12 plików ? Niektóre templatki do wordpressa na przykład są tak zrobione. A  teraz wyobraź sobie, że jak chcesz coś w tym zmienić to musisz przeszukać 12 plików … prcochłonne, a na pewno marnotrastwo czasu. Najlepiej trzymać wszystkie style w jednym, najwyżej dwu plikach. W zupełnośći wystarczy.

To tyle na razie. Mam nadzieję, że skorzystacie z tych rad i ułatwią wam waszą pracę.

Amen.

Tekst powstał w oparciu o http://nettuts.com/articles/web-roundups/are-you-making-these-10-css-mistakes/

Dla operujących słabiej językiem angielskim streszczę główne zagadnienia:

Na początku dowiadujemy się czego NIE robić – pułapki:

1. Ściemnianie
2. Zapychanie informacjami
3. Przesycanie
4. Udziwniona nawigacja
5. Bałagan wizualny

No i oczywiście co powinno się robić kreując własne portfolio:

1. Zdefiniować na wstępie cel
2. Rozważyć stworzenie kilku portfolii
3. Ukierunkować się na konkretny rynek/pracodawcę
4. Portfolio musi być przystosowane do wielokrotnego użycia
5. Wybierz właściwą technologię
6. Zaprojektuj je tak jak zlecenie dla klienta
7. Skoncentruj się na najlepszych pracach
8. Nie zapomnij o danych kontaktowych
9. ….

Jeżeli ten post spotka się z jakimś odzewem w postaci komentarzy to obiecuję, że przetłumaczę cały artykuł. link.

Ogólnie nie wiem dlaczego na csselite.com nazwali je “sweet”, ale niech im będzie. Jest naprawdę z czego wybierać i znaleźć inspiracje. Oczywiście nie znalazłem tam ani jednej propozycji z Polski. No nic … poczekamy – może ktoś się zdecyduje zrobić coś dla idei, a nie dla pieniędzy … tak jak my – prowadząc csselite.pl. Link.

Jakkolwiek – trzeba zajżeć i warto gdzieś trzymać ten link w zakładkach.

Nie miałem czasu przglądnąć i wypróbować- aczkolwiek lista wygląda imponująco. Link.