www.jankraus.pl

www.thecssgallerylist.com

www.ikreativ.com

www.moziweb.com

www.crvf.com

www.rhxo.com

www.designmind.frogdesign.com

www.madebyon.com

www.elitebydesign.com

www.esdev.net

www.kre8iveminds.com

www.thelightboxdesigns.com

www.okami.fr

www.adworks.ro

www.kadysz.com

www.infarts.net

www.shopplugin.net

www.xhtml.pixelcrayons.com

www.designlots.com

Pierwszym i dosyć istotnym elementem jaki należy wykonać jest zaprojektowanie szaty graficznej naszego szablonu. Należy przemyśleć oraz zaplanować układ strony, ustalić kolorystykę wszelkich elementów występujących na stronie (tło, kolor tekstu, linków itd…). Warto w tym miejscu zaznaczyć, że system Gelato jest bardzo prostym silnikiem zarządzania treścią, jego szablony można nazwać mianem minimalistycznych gdyż prostota systemu nie pozwala na bardziej rozbudowane formy prezentacji.

Kiedy grafika już jest precyzyjnie dopracowana i przemyślana przechodzimy do cięcia oraz kodowania szablonu (xhtml/css). Opierając się o własne doświadczenie mogę polecić zakodowanie strony głównej w jednym pliku na sam początek, bo później i tak będziemy dokonywali na podstawie tego pliku kilka operacji.

Więcej o kodowaniu stron www dowiecie się czytając tutorial temu poświęcony.

Żeby zobrazować jak powinien wyglądać przykładowy szablon z charakterystycznym dla Gelato układem do zapoznania się z tym stworzonym przez vivee:

Kodowanie

a oto kod owego szablonu:

oraz plik css:

Ważne aby stworzona przez nas strona wyświetlała się poprawnie w popularnych przeglądarkach, oraz spełniała normy i standardy obowiązujące podczas tworzenia stron www

Wdrążanie

Po stworzeniu szablonu html możemy zacząć wdrążać go w nasz system Gelato. Najprostszym sposobem na dokonanie tego jest przystosowanie naszego szablonu do wymogów galeto posługując się defaultowym szablonem który znajduje się w archiwum po pobraniu systemu cms.

Zabieramy się do tego kolejno edytując wszystkie pliki szablonu o nazwie tumblr. Znajduje się on w katalogu: \gelato\themes\tumblr.

Dla przykładu zobrazuję proces edycji pliku: template_regular_post.htm, a więc pliku odpowiadającego za wyświetlanie postów.

Znajduje się w nim kilka zmiennych są to:

• {Date_Added} – data dodania wpisu
• {Permalink} – adres pojedynczego wpisu
• {Title} - tytuł
• {Body} –treść

Aby w naszym szablonie funkcjonowały powyższe zmienne należy je wkomponować we fragment kodu odpowiadający za wyświetlanie wpisów i całość zapisać pod nazwą: template_regular_post.htm

Analogicznie postępujemy z kolejnym plikiem np.: template_comments.htm odpowiedzialny za wyświetlanie wpisu z komenarzami.
Znajdujemy kolejne fragmenty kodu:

• {Comments_Number} –numer komentarza
• {Post_Title} – tytuł wpisu
• [bloque: comments] –rozpoczęcie bloku komenatrzy
• {Comment_Author} – autor komentarza
• {Date} – data dodania
• [/bloque: comments] –zakończenie bloku komentarzy

Powyższych zmiennych używamy w naszym szablonie po czym zapisujemy go pod nazwą template_comments.htm w katalogu z naszym themem.

W późniejszej fazie administrowania stroną system komentarzy należy włączyć w panelu administratora (Options > Allow readers comments: Active)

Tak należy postąpić ze wszystkimi plikami znajdującymi się w katalogu skórki defaultowej.

Aby elementy na stronie były właściwie ostylowane musimy wcześniej przygotowany plik css naszego szablonu zapisać w folderze z edytowaną skórą. Pod nazwą style.css

Gdy już wszystko przygotujemy nasz gotowy katalog z themem wysyłamy na serwer do katalogu \themes\nazwa_naszej_skory\.

Ostatnim krokiem który sprawi, że nasz szablon ujrzy światło dzienne jest ustawienie go jako szablon główny w panelu administratora systemu Gelato

Po zalogowaniu się na naszej stronie przechodzimy do sekcji: settings i tam z rozwijanej listy szablonów wybieramy naszą nową skórę.

Ważne

Uwaga! Jeżeli w naszym nowopowstałym szablonie używaliśmy elementów innych szablonów to w świetle prawa oraz ogólnej estetyki właściwym posunięciem jest pozostawienie w stopce strony informacji na temat autora oryginalnej skóry oraz dodanie informacji na temat modyfikacji. Dokonamy tego edytując plik template_footer.htm

Jedną z pierwszych czynności jakie robimy rejestrując się na wszelakiego typu serwisach jest, o ile to możliwe, wgranie avatara. Po co? Bo ładnie wygląda, bo łatwiej się rozpoznaje użytkownika, bo (tu wstaw swoje powody). Jednak wkurzające jest, że zawsze go trzeba wgrywać (za którymś razem to nudne już jest) czy jak nam się gust zmieni to poprawiać wszędzie te obrazki. A przecież można prościej.

Czym jest gravatar

Gravatar to skrót od globally recognized avatar. Idea polega na tym, że wgrywasz sobie za pomocą serwisu gravatar.com swojego avatarka, a potem po prostu pojawia się on przy Twoim nicku na różnych blogach czy forach obsługujących tą usługę. Prawda, ze fajne?

Od zera do pierwszego gravatara

Wchodzimy sobie na stronę gravatar.com, a następnie z rozwijanego menu na górze wybieramy Sign Up.

Pierwszy etap rejestracji ogranicza się do podania e-maila, na który zostanie wysłany mail aktywujący konto. Email ten w trakcie korzystania z gravatar będzie naszym identyfikatorem, dzięki któremu będzie zamieszczany nasz obrazek.

Następnie podajemy jaki chcemy login i hasło.

Teraz przyszła kolej na wgranie obrazka, który będzie naszym gravatarem. Robimy to klikając na Add one by clicking here.

Teraz możemy wybrać czy chcemy obrazek pobrać z naszego dysku, z sieci czy może skorzystamy z naszego wordpressowego avatara. Gdy już się zdecydujemy i wgramy obrazek musimy go jeszcze przyciąć. Od naszej ostatecznej radości dzieli nas tylko wybranie czy nasz obrazek nadaje się do pokazywania wszędzie czy może jednak posiada “hardcore sexual imagery or extremely disturbing violence”.

Jak używać?

No właśnie skąd strona będzie wiedziała, żeby akurat obok naszego nicka pokazać gravatara? Ano będzie wiedziała po naszym mailu. Bo to właśnie po nim jesteśmy rozpoznawani.

Fajne to, też chcę na swojej stronie

Implementacja tego jest bardzo prosta. Automattic (właściciel Gravatars.com, a jednocześnie twórca Wordpressa) dołozyło wszelakich starań, żeby stworzyć do tego porządną dokumentację. Dodatkowo do najpopularniejszych CMS’ów powstały wtyczki. W przypadku Wordpressa jest to jeszcze prostsze, bo obsługa gravatarów została wbudowana w sam skrypt. Wystarczy w odpowiednim miejscu w kodzie comments.php dodać <?php echo get_avatar( $comment, 70 ); ?> by wyświetlić gravatary o rozmiarze 70px na 70px.

W razie jakichkolwiek wątpliwości zapraszam na http://en.gravatar.com/site/implement/.

Podsumowanie

Musicie przyznać, ze gravatary są dość wygodnym rozwiązaniem. Wystarczy tylko pamiętać swojego maila. Dla administratorów serwisów też jest to pożyteczne bo nie muszą marnować miejsca na avatary użytkowników.

Przy okazji gravatary można użyć nie tylko w komentarach. Obrazkiem możemy okrasić któż jest autorem danego wpisu (bardzo fajne w przypadku bloga prowadzongo przez kilka osób). Ostanio nawet pojawiły się wtyczki do programów pocztowych (chociażby Thunderbird). Mi pozostaje czekać na wersję do Evolution lub Opery.

Oto prosty i szybki sposób na efekt “wychodzącego” menu zza strony. Sprawia wrażenie jakby “naciaganego na stronę”. Efekt ostatnio bardzo modny i estetycznie wyglądający na stronach www.

Krok 1.

Tworzymy nowy dokument, oczywiście w dalszych krokach tworzymy swoją podstawę, na której będziemy chcieli umieścić nasz wychodzący zza “podkładu” element (można tego użyć jako belki, menu, panelu logowania czy czego tylko będziecie chcieli).

Krok 2.

Wklejamy nasz kształt. W tej chwili interesuje nas tylko lewa strona, gdyż na niej będę prezentować efekt, stąd nierównomierne ułożenie brzegów po obu stronach (jak widać prawa część niebieskiego kształtu wystaje nieco bardziej).

Krok 3.

Zaznaczamy fragment, na którym będziemy pracować, wycinamy go, wklejamy i umieszczamy w pozycji wyjściowej - jednak nie zcalamy go z pozostałymi warstwami!

Krok 4.

Wybieramy nasz odcięty fragment i idziemy do Edit -> Transform -> Skew, po czym przekształcamy go mniej więcej do takiej postaci. Przekształcenie akceptujemy.

Krok 5.

Duplikujemy go, przesuwamy lekko w dół, a następnie scalamy dwie warstwy (fragment i jego kopię).

Krok 6.

Klikając na nasz fragment w okienku warstw z wciśniętym klawiszem CTRL zaznaczymy go.

Następnie zaznaczenie przesuwamy w dół, by jego górna część stykała się z dolną krawędzią kształtu, który początkowo pozostał nam po wycięciu…

(należy pamiętać, by podczas przesuwania zaznaczenia wybrane zostało narzędzie “marquee tool” - w przeciwnym razie nici ze zmiany miejsca jego położenia). Następnie wciskamy przycisk DELETE (bądź też wycinamy ten fragment, jak kto woli) i pozbywamy się niepotrzebnej części. Powinniśmy uzyskać taki efekt:

Krok 7.

Kolejnym krokiem jest stworzenie ciemniejszego kształtu i przeniesienie go poniżej wszystkich warstw oraz umieszczenie zaraz pod naszym wyciętym fragmentem.

Ostatecznym krokiem jest jego transformacja - tu postępujemy podobnie jak wcześniej, przy pomocy Edit -> Transform -> Skew przekształcamy nasz ciemny kształt tak, by po prostu pasował i sprawiał efekt menu wychodzącego spod białej podstawy. Powinniśmy dążyć do uzyskania efektu widocznego na poniższym obrazku.

Krok 8.

Jeśli chcemy ten wychodzący element jeszcze zmniejszyć, droga jest już niezwykle prosta. Wybieramy warstwę z naszym fragmentem, na którym od początku operujemy oraz warstwę z ciemnym kształtem, idziemy do Edit -> Transform i oba kształty po prostu “ściskamy”.

Efekt końcowy

Na prośbę Arkadiusza i Raviciousa od dziś o nowości na vivee można dowiadywać się także z Blipa.

Póki co Twitter i Blip pozostaną czysto informacyjnymi kanałami, ale z czasem pomyślimy o jakimś dodatkowym przeznaczeniu. Może tutki tylko dla Twitterowców i Blipiarzy?

Jeżeli korzystacie z Twittera, od dziś możecie śledzić co nowego się pojawiło na vivee. Nasz adres to http://twitter.com/viveeinfo.

Dla osób które wolą bardziej tradycyjne metody informowania o nowościach przypominam o RSS oraz via e-mail.

Expression Engine jest dość ciekawym CMSem tworzonym przez EllisLab. Mimo wielu zalet posiada, niestety, jedną ogromną wadę - jest płatny (tzn. jest wersja core, która jest, delikatnie ujmując, uboższa w możliwości). Na szczęście firma EllisLab zrobila nam drobny prezent i dostaliśmy pełną wersję.

Podziękowania

Artykuł ten chciałbym zacząć od podziekowań dla EllisLab i dla pani Lisy Wess, dzięki którym jesteśmy w stanie zrealizować całą serię artykułów o Expression Engine.

O Expression Engine słów kilka

Pierwszą rzeczą o jakiej trzeba wspomnieć w przypadku tego systemu są licencje. EE można zdobyć w 3 wersjach:

• core - darmowa, tylko dla jednego użytkownika, tylko do zastosowań niekomercyjnych
• personal - $99,95, tylko do użytku niekomercyjnego
• commercial - $249.95, do użytku wszelakiego

Z ciekawszych ficzerów:

• możliwość prowadzenia wielu stron na bazie jednej instalacji EE
• wtyczki
• bardzo przyjemny system pól użytkownika (wygodniejszy niż w WP)
• zabezpieczenia antyspamowe
• łatwy system skórek

Pełna lista do znalezienia na http://expressionengine.com/overview/features/.

Wymagania

• Conajmniej 10 MB wolnej przestrzeni dyskowej
• PHP 4.1+
• MySQL 3.23.32+
• PHP musi posiadać wsparcie XML

Instalujemy

Za pomocą naszej ulubionej przeglądarki idziemy na http://nasz_adres_z_ee/install..php. Przywita nas wtedy instalator. Klikamy oczywiście Click here to begin.

Następnym krokiem jest przeczytanie i zgodzenie się (lub nie) z licencją.

Kiedy już formalności mamy za sobą, skrypt pyta się nas jak się ma nazywać główny katalog. Defaultowo zwie się on system, jednak ze względów bezpieczeństwa warto zmienić jego nazwę. Ja zmieniłem na strony

Uprawnienia serwera niezbyt się spodobały EE i poprosił o prawo zapisu do paru plików i katalogów. Nie ma wyjścia trzeba zastosować chmod 666 na pliki i chmod 777 na katalogi.

Teraz czas na dużo wypełniania. Trzeba podać ścieżki dostępowe (na 99% będą poprawne, ale lepiej zwrócić na to uwagę), system na którym działa serwer, podać dane dostępowe do bazy danych, prefix, rodzaj kodowania oraz dane konta admina.

Pozostaje nam już tylko usunąć plik install.php i przejść do strony lub panelu administracyjnego.

Expression Engine po polsku

Nauczymy teraz EE mówić po polsku. Żeby to zrobić wchodzimy na http://expressionengine.com/language/. Wybieramy stamtąd polish.

Rozpakowywujemy archiwum i wrzucamy katalog polski do system/languages (zamiast system może być oczywiście inna nazwa, jeśli w czasie instalacji zmieniliście nazwę katalogu głównego, np. w moim przypadku będzie to strony/languages).

Następnie w panelu wchodzimy do Admin > System Preferences > General Configuration i ustawiamy Default Language na polski. Od tej chwili każdy nowy user będzie widział panel po polsku. Musimy jeszcze zadbać o siebie. My Account > Personal Settings > Localization Settings i w Select Language ustawiamy polski.

Pierwszy wpis

W PA wybieramy Publikuj > Default Site Blog (gdy będziemy mieli kilka strony na bazie jednej instalacji, wtedy będziemy mogli wybrać na której stronie chcemy opublikować tekst).

Wypełniamy tytuł i treść. Jeżeli chcemy przypisać do odpowiednich kategorii wybieramy zakładkę kategorie. A na końcu wybieramy wyślij.

Co dalej?

Plany wobec Expression Engine mamy dość ambitne. W następnej części mam zamiar dokładnie oprowadzić Was przez panel sterowania (który jak dla mnie jest mniej intuicyjny niż ten z WP i sam musiałem się kilku rzeczy naszukać). Trzeci artykuł chciałbym poświęcić na moduły (zrobimy sobie wikipedię oraz galerię zdjęć opartą o EE). Na końcu zrobimy sobie skórkę.

Liczę też na Was, że podpowiecie o czym jeszcze chcecie przeczytać.

Jak daje się zauważyć niewielu początkujących webdesignerów zabiera się za projektowanie sklepów www. I nic dziwnego gdyż nie jest takie proste, jakby się wydawało. W tym artykule dowiecie się na co zwracać uwagę i co jest priorytetem w szablonie sklepowym.

Bardzo ważna jest grafika, wizualizacja tematyki sklepu na tyle dobra, aby przyciągnęla uwagę potencjalnego klienta sklepu. Jednak nie jest to w przypadku tego typu serwisu najważniejsze w wyglądzie witryny. Poza przykuwającą uwagę szatą graficzną ważny też jest układ (czyli rozmieszczenie poszczególnych elementów sklepu na stronie), a także maksymalna czytelność. Trzeba pamiętać, że sklep www może mieć szerszą publikę niż np. serwis o grach komputerowych i należy brać pod uwagę fakt, że klient może należeć do każdej grupy wekowej. Przedstawię Wam kilka ważnych elementów w budowie sklepów www oparte na przykładach z sieci (funkcjonujące sklepy www oraz projekty graficzne).

1. Układ

Rozmieszczając poszczególne fragmenty sklepu na szablonie powinno brać się przede wszystkim pod uwagę ważność każdego z nich.

Nie trudno jest sobie wyobrazić, że takim jednym z bardziej priorytetowych elementów jest “katalog produktów“.Najlepiej umiejscowić go dość wysoko, tak aby klient wchodząc do sklepu mógł go od razu dostrzec i powinien widzieć wyraźnie z jakich kategorii złożona jest oferta. W zależności od zaawansowania sklepu, może taki katalog być ułożony w poziomie lub w pionie - to jest już rzecz gustu, należy jednak pamiętać o jak najprostszej nawigacji i przemieszczaniu się na stronie. Ułatwiony dostęp do wyszukiwanego produktu ułatwi także wielopoziomowość katalogu, a także wyszukiwarka produktów. Powinniśmy zadbać o to, aby na stronie głównej znalazła się przynajmniej podstawowa wyszukiwarka po słowach kluczowych z możliwością dalszego szukania zaawansowanego, gdzie klient mógłby dobrać wybrane przez siebie parametry szukanego przedmiotu.

Przykładem na dobrze rozmieszczony katalog są następujące projekty:

www.agito.pl

www.pumba45.deviantart.com

www.sklep.cristobal.pl

www.sklep-presto.pl

Przykładowe wyszukiwarki:

www.promobile.pl

www.twojepiora.pl

2. Produkty

W sklepie www kolejnym bardzo ważnym elementem są sprzedawane produkty.
Dlatego też powinniśmy je odpowiednio wyeksponować na stronie, sprawić, żeby nie sklejały się z sobą. Zwrócić uwagę też należy na cenę i parametry produktu (lub opis), cenę należy obrać nieco innym kolorem niż inną treść przy produkcie, tak aby była ona dobrze widoczna. Na widoku ogólnym wszystkich produktów z danej grupy można umieścić krótki opis produktu - najlepiej nie za długi, aby nie obciążać tej podstrony sklepu zbyt dużą ilością tekstu a jedynie konkretami. Nazwa produktu może być napisana innym krojem czcionki (pasującym do ogólnego stylu strony) lub wyróżniona może być innym kolorem tła lub tez kolorem własnym.
Nie zapominajcie, że we właściwie każdym, płatnym czy nie, skrypcie sklepowym można oznaczyć produkty jako “nowość”, “promocja” i / lub “wyprzedaż” - bez wątpienia trzeba je jakoś oznaczyć i wyróżnić na stronie. W tym celu można stworzyć na stronie kolumny w których innym kolorem tła lub nagłówka można zaznaczyć takie istotne sprawy dla sklepu. Często wykorzystuje się też “metki” - różnego rodzaju graficzne elementy, indywidualne dla każdego rodzaju produktów, bardzo modne szczególnie w erze web 2.0.

www.kuchniasklep.pl

www.yerbamatestore.pl

www.promobile.pl

3. Widok produktu

Nie wiem jak inni ale ja lobię kiedy widok ogólny pojedynczego produktu nie jest specjalnie obładowany treścią. Powinny znaleźć się tutaj takie informacje o produkcie jak:
- nazwa produktu
- cena (detaliczna lub hurtowa z zaznaczonym podziałem w razie co)
- opis (jego opis zależy od producenta)
- parametry typu waga, ilość, materiał, wymiary etc.
- kwestia gwarancji
- dostępność
- koszt przesyłki
- akcesoria, które można zakupić do danego produktu

Parametry najlepiej ustawić jeden po drugim, zachowując zdrowy odstęp, aby wszystko było czytelne i nie sprawiało problemu przy wyborze innego rodzaju produktu: o innej kolorystyce, rozmiarze itp.
Wygospodarować należałoby też miejsce na dodatkowe zdjęcia prezentowanego produktu, aby zapewnić klientowi największą możliwość zapoznania się z ofertą. Do powiększania zdjęć można użyć przeróżnych skryptów, np. lightbox, thickbox, jquery lightbox i in. To z pewnością uatrakcyjni sklep.
Możliwość dodania produktu do koszyka czy też schowka powinno być dobrze widoczne, w tym celu projektując grafikę dobrze jest posłużyć się ikonami. Wtedy user wie i intuicyjnie porusza się po sklepie nie czytając koniecznie wszystkich instrukcji, ale pamiętając co oznacza konkretna ikona.

Dobrymi przykładami na prawidłowy i wygodny obraz widoku pojedynczego produktu są:

www.go2prezent.pl

www.galante.pl

www.narzedzia-pm.pl

3. Panel klienta

Administratorzy sklepów czasami narzucają konieczność wcześniejszej rejestracji nowego klienta przed dokonaniem zakupu, a niektórzy nie. Umiejscowienie panelu logowania jest dość istotne w takiej sytuacji. Nie powinniśmy pozwolić na to, aby user zaczął błądzić po stronie tylko dlatego, że nie ma oficjalnej informacji o braku konieczności rejestracji szczególnie w chwili gdy chcemy dokonać jednorazowego zakupu (swoje dane teleadresowe podajemy podczas realizowania zamówienia). Oczywiście jeżeli user się zarejestruje mimo, ze nie musi to pozostanie po nim ślad, a mają dobrze przyrządzony regulamin możemy pozwolić sobie na wysyłanie do wszystkich klientów wiadomości o najnowszych produktach, itp., oczywiście nie zapominając aby useromi pozwolić na rezygnację z otrzymywania takich wiadomości.

www.juka.pl

www.centrumsportu.eu

4. Koszyk

Z doświadczenia w przygotowywaniu szablonów pod sklepy oraz z dokonywanych zakupów w sklepach internetowych najróżniejszych, mogę powiedzieć, że pozytywna sprawą są dwa koszyki. Konkretnie mam tutaj na myśli jeden “skrócony” umieszczony na każdej podstronie, abyśmy wiedzieli ile produktów już mamy w koszyku oraz jakie są to produkty i jaki jest aktualny koszt zakupów. W takim koszyku warto umieścić link do “pełnego” koszyka, za pomocą którego będziemy mogli usunąć wcześniej wrzucony produkt, zmienić ilość zamówionych przedmiotów oraz wybrać formę płatności za zakupy oraz formę przesyłki.
Jeżeli zleceniodawca nie wymarzy sobie innych dodatków to są to podstawowe fragmenty składające się na sklepowy wirtualny koszyk.

www.agito.pl

www.merlin.pl

5. Dodatkowe “ficzery”

Od jakiegoś czasu weszło w życie sklepowe wiele dodatkowych opcji. Są to oczywiscie kwestie funkcjonalności ale projektując grafikę należy mieć je na uwadze.
Zaliczamy do nich:

a) Opinie o produkcie
Coraz więcej sklepów wprowadza tą opcję w działalność sklepu. Pozwala ona na stworzenie swojego rodzaju społeczności na stronie. A przy okazji nowy user, czy też klient, który zamierza “coś” kupić, może dowiedzieć czy warto i jak sprawdza się to “coś” w życiu codziennym. Nie da się ukryć - bardzo przydatna rzecz.

www.komputronik.pl

b) Tagi
Pojawiają się już na wielu serwisach, Pomagają w pozycjonowaniu strony, a także przy wyszukiwaniu bardziej sprecyzowanych artykułów, a w sklepach produktów. Dobrze jest przewidzieć miejsce na stronie głównej gdzie wyświetlane byłyby te słowa / frazy. Z czasem funkcjonowania sklepu zrobiłoby ich się bardzo dużo, dlatego też można ograniczyć ich wyświetlanie np. do 10 najpopularniejszych.

b) Lista życzeń (Wishlist)
Amazon.com wprowadził już jakiś czas temu coś co nazwa się Lista życzeń. Chodzi tutaj o to, że mają swoją stronę www i posiadając na niej tzw. dotację PayPalową, można ją zamienić na widok produktu, który bardzo by się chciało mieć. Jeżeli posiada się dość szeroką i wdzięczną widownię, można liczyć na to, że po jakimś czasie może ktoś nam sprezentuje to co byśmy chcieli. Pomysł jest bardzo fajny, ale trudno mi powiedzieć czy ma on przyszłość w Polsce. Czas pokaże. Jednak projektując sklep można przy widoku pojedynczego produktu wygospodarować miejsce na wygenerowanie linka do tego produktu już na zasadzie fragmentu htmla, aby Ci co chcą coś takiego wrzucić do siebie na stronę mogli to zrobić bez problemu.

Edycja
Tak jak kolega nizej w komentarzach zauważyłam, na Merlin.pl istnieje coś takiego jak “lista życzeń”. Fukcjonuje ona jednak nieco inaczej niż ta wspomniana przeze mnie wyżej na Amazon.com.
Konkretnie gadżet ten na Merlinie działa niczym motorek napędzający nowych userów do rejestracji w systemie. Jedynym sposobem na poinformowania swoich znjomych o swojej liście życzeń jest wysłanie im maila z ta infomacją, ale… jeżeli dany znajomy nie ma konta na Merlin.pl wtedy nie zobaczy listy jaką mu przesłaliśmy. Biorąc pod uwagę, że sporo osób takimi listami może być zainteresowanych to na pewno zarejestrują się w sklepie i dokonają lub nie dokonają zakupu. Dlatego też nazywam to motorkiem…
Uważam, że amazon.com wprowadził zdrowsze zasady i pozwala userom na o wiele wygodniejsze korzystanie z wprowadzonej usługo.

Podsumowanie

Tak jak widzicie, łącząc wszystkie wyżej wymienione elementy w całość otrzymamy prawdopodobnie sklep idealny. Dla każdego grafika w przypadku sklepów jak i innych stron najważniejszy jest wygląd - żeby był super, wyglądał lepiej niż na innych stronach, etc etc. Ale należy pamiętać, że przepiękny layout nie zawsze idzie w parze z funkcjonalnością, gdzie jeżeli chodzi o sklepy to podstawa.
Jeżeli poszukujecie zbiorów sklepowych to polecam katalog: YourShops.pl - tutaj znajdziecie bardzo dużo sklepów internetowych z podziałem na kategorie tematyczne.

Życzymy przyjemnego projektowania sklepów internetowych!

W ostatnim czasie można zauważyć wzrost liczby grafików komputerowych w Polsce. Wiąże się z tym chęć młodych ludzi do wykreowania także własnej osoby w tym fachu. W poniższym artykule ukażę najczęściej popełniane błędy przez nowicjuszy w dziedzinie webdesignu.

Rozmiar projektu

Wiele z Was zapewne nie wie od czego zacząć. Według magazynu .PSD standardowe wymiary layoutu wynosić powinny 1008×768 px. W tym przypadku design dostosowany jest idealnie do rozdzielczości 1024×768. Problem się rodzi podczas gdy czytelnik naszej strony posiada monitor o rozdzielczości 800×600 czy 1280×1024. W pierwszym przypadku nasza strona wydaje się być zbyt duża, natomiast w drugim – za mała. Wszystkim dogodzić jednak nie można.

Kolorystyka

Jeden z ważniejszych elementów składowych strony. Należy pamiętać, że barwy witryny mają przyciągać, a nie odpychać. Zatem nie mogą być zbyt jaskrawe, odstraszające i męczące (jak na obrazku poniżej).

Stocki

Ważnym elementem każdej strony są zdjęcia. To one także przyciągają uwagę. Sprawiają, że strona jest ‘żywa’. Wywołują także u obserwatorów pozytywne emocje i przyjazne nastawienie do odbioru treści strony. Wszystko to działa jeśli jest oczywiście odpowiednio dobrane.

Patterny, Textury

Krótko mówiąc tło strony. Podobnie jak w kolorystyce nie mogą być one zbyt krzykliwe i odwracać uwagi od treści witryny. Na ogół funkcjonują 4 typy backgroundu:

Kolor

Gradient

Pattern

Textura

5.Czcionki
W Internecie jest multum czcionek, które kuszą młodych webdesignerów. Jednak ‘ładna’ czcionka nie zawsze oznacza najlepszą.
Do ukazania przykładowego tekstu na stronie można użyć : Arial, Tahoma, Verdana, Georgia.

Nie powinny być one większe niż 20 px, ponieważ ulegają wówczas zjawisku tzw. „pixelowania”. Termin ten nie oznacza nic innego jak zauważalne gołym okiem pixele.

WAŻNE! Jeśli ustawimy naszą czcionkę np. na 12 px należy pamiętać, aby wygładzenie ustawione było na ‘None’ (w Adobe Photoshop). W innym przypadku czcionki nie odzwierciedlają późniejszej jej wizji na stronie.

Tyczy się to jednak tylko czcionek małych rozmiarów. Te powyżej 20 px powinny być już ustawione na ‘Sharp’, ‘Smooth’ czy ‘Crisp’.
Wniosek?
Mniejsze czcionki – ‘none’
Duże czcionki – ‘sharp’, ‘smooth’, ‘crisp’

Marginesy

Nawet zamieszczając tekst przykładowy pamiętajmy o tym, żeby wyglądał on estetycznie. Jeżeli chcemy wstawić więcej tekstu po prostu zwiększmy tabelkę a nie zmniejszajmy pola marginesu. Wtedy strona wygląda jakby była na siłę ‘przepełniona’.

Ikony

Ikony na stronie to niby nic takiego. Kilka obrazków. Nie zdajemy sobie jednak sprawy jak bardzo sprawiają, że witryna wygląda bardziej profesjonalnie.

Estetyka

Tworząc design strony WWW używajmy rozumu. Nie może być na niej za dużo elementów, bo wtedy staje się ona ‘ciężka’ i męcząca. Trzeba znaleźć złoty środek, aby zrównoważyć byt elementów składowych strony.

Prawa autorskie

Wykorzystując ikony, patterny czy stocki na naszej stronie pamiętaj o prawach autorskich. Aby uniknąć jakichkolwiek nieprzyjemności z tej strony związanych warto korzystać z serwisów, które zajmują się gromadzeniem darmowych komponentów.
Każda strona powinna być podpisana przez autora. Do tego najczęściej na dole projektu należy stworzyć stopkę.

2008, Sylwia Bartyzel
sylwus.none.pl
shush@interia.pl

Zaczynamy od prac opublikowanych w październiku tego roku.

www.ownsign.deviantart.com

www.iamdesign.deviantart.com

www.goodghost1980.deviantart.com

www.plantanium.deviantart.com

www.klosinski.deviantart.com

www.ejsing.deviantart.com

www.enstudio.deviantart.com

www.siostranocy.deviantart.com

www.webgraphix.deviantart.com

www.riyaz7cp.deviantart.com

www.webgraphix.deviantart.com

www.swayze05.deviantart.com

www.ilbane.deviantart.com

www.webgraphix.deviantart.com

www.f2eelancer.deviantart.com

www.neu7ral.deviantart.com

www.nas-wd.deviantart.com

www.djsupes.deviantart.com

www.shakis.deviantart.com

www.bishanr.deviantart.com

PS. Jest to 100 publikacja na Vivee.info