[www] Portfolio Tonic'a Opcje

[Tonic]

Hej, chciałbym abyście zajrzeli do kodu HTML i CSS i powiedzieli, czy można coś poprawić lub/i uprościć. Póki co, wyświetla mi dobrze na Operze i Firefoksie, za IE6 jeszcze się nie zabrałem - najpierw chcę mieć pewność, że kod jest napisany poprawnie i jest napisany najprościej jak można. Im prostszy kod, tym łatwiej poprawić błędy na IE6 Sugestie i uwagi odnośnie wyglądu mile widziane.

http://tonic-art.com
Login i hasło: t

Plik CSS: http://tonic-art.com/style.css

EDIT: Uprzedzając, sprawdziłem w walidatorze - twierdzi, że plik spełnia standardy CSS 3.0

EDIT2: Jakby kogoś raziło, że w galerii jest jeden wąski pasek, to mówię, że będzie więcej kategorii - przewiduję dodać 2 lub 3, ale to dopiero później.

Ten post edytował Tonic 8.11.2008, 15:36:02

[kavka]

Ok... wypowiem się co do design'u. Ogólnie idea przypadła mi do gustu. Mam natomiast następujące uwagi, które powinieneś przemyśleć:

- strona nie jest wyśrodkowana (a przynajmniej sprawia takie wrażenie) - czuję się dziwnie oglądając ją. Zauważyłam nawet, że wchodząc pierwszy raz przechyliłam się na krześle w prawo (bo strona jest przesunięta lekko w prawo) ;

- galeria: wypadałoby zrobić jakąś przeglądarkę Twoich prac (nawigację) a nie same miniatury a po kliknięciu wyświetlanie tylko zdjęcia;

- nawigacja po stronie jest nieintuicyjna, przykład: wchodzę w galerię, potem w ilustracje klikając "więcej..." (to też do poprawki, cała ta kolumna powinna być odnośnikiem do "więcej") i pokazuje mi się jakaś galeria a nad nią mam napis "kontakt", który się gryzie z tym co aktualnie widzę. Wiem, że to menu ale jednak umieszczanie takich napisów nad czymś bez wyraźnego oddzielenia treści sugeruje coś innego.

[ayeo]

Witam!

Po Twoich pracach widzę, że nie dorastam Ci do pięt, głupio więc oceniać. Jednak sama stronka jest kiepska. Jest ładna, ale strona www ma też inne zadania poza byciem ładną. Jest nieintuicyjna i strasznie niewygodna w użyciu. Nie jest trudno zrobić fajną, łatwą w obsłudze galerię. Mam na myśli jakieś gotowe pluginy jak na fancybox lub lightbox. W google znajdziesz bez problemu. BTW świetne prace!

Pozdrawiam!

[Speedy]

Podobają mi się pracę w portfolio .

[Tonic]

Dzięki za sugestie i cieszę się, że Wam prace się podobają Pracuję nad stroną, ale w tej chwili mam największy problem z galerią i chciałbym najpierw go rozwiązać.

Od kilku godzin szukam odpowiedniego skryptu do galerii, ale nie mogę znaleźć odpowiedniego. Chodzi o to, że chcę mieć jak najprostszy skrypt, który zrobi tylko to, czego potrzebuję, a mianowicie :

- mamy div, który zawiera listę z miniaturkami
- po kliknięciu na miniaturkę pojawia się powiększona wersja w tym *samym* div'ie. Dodatkowo, pojawia się tytuł pracy (opcjonalnie) oraz kontrolki nawigacyjne (powrót do listy z miniaturkami, następna oraz poprzednia praca. Te dwie ostatnie kontrolki są opcjonalne).
- miniaturki oraz pełne zdjęcia ja robię, nie skrypt

Naprawdę chciałbym, żeby to było prościutkie. Podejrzewam, że kilkanaście linijek kodu PHP wystarczy, aby uzyskać ww. funkcje.

To w sumie wszystko. Idea działania podobna do ładowania podstron za pomocą PHP, tj. każda strona ma swój identyfikator, a PHP go sprawdza, czy jest odpowiedni plik i go wyświetla i przypisuje mu informacje (np. tytuł podstrony). Próbowałem taki kod "skonwertować" dla zdjęć, ale moja ignorancja w PHP robi swoje. Czy ktoś zna taki kod, czy lepiej poprosić kogoś na tutejszym forum?

[ayeo]

Ty nawet nie potrzebujesz skryptu PHP. Do galerii wytarczy, jak już wspominałem, Lightbox lub Fancybox. Są to pluginy do jQuery czyli JS.

Pozdrawiam!

[Tonic]

Te skrypty widziałem i mi nie odpowiadają, bo nie spełniają założenia, że powiększony obraz ma znajdować się w tym samym div'ie, co miniaturki. Wyskakują jakieś bajeranckie animowane okienka. Ble Ich dokumentacje nie mówiły o możliwości otwierania obrazka w tym samym miejscu, jakby co.

Pozdrawiam

[ayeo]

Witam!

Nie rozumiem. Mam powiedzmy 16 obrazków (miniaturek) 4 kolumny i 4 wiersze. Klikam w jakiś obrazek i co? na jego miejsce ma się pojawić w pełnym rozmiarze? Przecież wszystko się rozjedzie... Wydaje mi się (ale to moja prywatna opinia), że galerie z wyskakującym okienkiem są najwygodniejsze dla użytkownika. BTW animację można wyłączyć, ale "w tym samym divie" to nie rozumiem

Pozdrawiam!

[Tonic]

Mógłbym dopasować prace do szerokości strony. Z "w tym samym divie" chodziło mi o to, że po kliknięciu na którąś miniaturkę, lista miniaturek ma zniknąć a na jej miejscu pojawiłaby się powiększona praca. Osoba przeglądająca pracę mogłaby najwyżej przewijać w pionie. Podobnie jak tutaj: http://hydropix.com/Gallery/thumbnails.php?album=13 z tym, że byłoby bardziej minimalistycznie. Z tą wygodą to coś w tym jest, nie trzeba byłoby przewijać. Hm, popatrzę sobie jak skrypt będzie działać na mojej stronie

[bim2]

Bardzo fajne portfolio. Nie pasuje mi jedynie te wystający obrazek na głównej, a reszta w porządku.

[punkomuzykant]

Strona do d.. ale.
Tonic jeżeli te obrazki są Twoje to już dawno powinieneś poszukać kodera do współpracy i robić layouty. Jest sporo osób które programują ale mają słabe wyczucie estetyki i takie osoby szukają takich jak Ty

[Tonic]

Hm, czy ktoś mógłby zobaczyć, czy Java działa na IE6/7? Wgrałem Fancyboxa, który poprawnie działa na Firefoksie i Operze. Na IE6 i 7 też pracował, na początku, ale teraz z jakiegoś powodu przestał i nie wiem co tu jest winowajcą. Najprościej jest zobaczyć, czy działa przeźroczystość obrazków PNG. Z góry dziękuję!

punkomuzykancie, a może zechcesz powiedzieć konkretnie, co jest do dupy?

Ten post edytował Tonic 11.11.2008, 19:26:24

[punkomuzykant]

punkomuzykancie, a może zechcesz powiedzieć konkretnie, co jest do dupy?

hmm po prostu stronka jest prosta. Tak prosta że aż za bardzo Zero życia

[jaQQu]

Ubogo i to bardzo. Rysunki niesamowite, design- no niestety zęby bolą jak się na niego patrzy. Parę tekstów na krzyż, za menu robi prostokąt z cieniem... i tyle. Do kosza i od nowa. Co do kodu nie wypowiadam się bo sam niewiele z tego wiem (jakoś brak mi motywacji do nauki języków programowania, zawsze jak się próbuję za to brać to... psss po paru minutach jakoś odechciewa się).

[MWL]

Ubogo? Tutaj zawsze znajdą się krytycy kodu nie znający sie na grafice. Nie mówię o wszystkich oczywiście. Layout wygląda świetnie, i jedyne co mogę zrobić to być pełen podziwu dla Ciebie.

Ten post edytował MWL 13.11.2008, 19:15:28

[bim2]

Własnie tego nie rozumiem. Dla mnie liczy się prostota i funkcjonalność a nie bajery graficzne, które na Opera Mini włażą dłuższą chwilę ;/

[jaQQu]

Prostota i funkcjonalność to jedno, jednak panowie, bez przesady.

[Kildyt]

Zgadzam się z kavka i ayeo. Masz talent do rysunków, ale co do stron to brakuje Ci chociaż kilku miesięcy doświadczenia. Strona jest nieintuicyjna. Podoba mi się nastrój panujący na stronie i pomysł, ale wykonanie już nie jest takie dobre.
Ja bym to zrobił tak:
- pod sloganem daj pasek z menu,
- dodaj przeglądanie kolejnych zdjęć na podglądznie.

Jak dodasz od siebie jeszcze dużo poprawek do wyglądu (radzę zacząć od nowa) to portfolio będzie bardzo fajne. Pamiętaj o tym, że to jest twoja wizytówka na świat. Strona musi przedstawiać to czym się interesujesz, ale za razem musi być intuicyjna i estetyczna.


Co do kodu:
- dodałbym nagłówek h1,
- poprawiłbym tabulację,
- "Przejd�",
- nie zostawiałbym linków bez zawartości (osobiście dałbym pliki graficzne do kodu html i na nich zastosował style),
-

[HTML] pobierz, plaintext 
<ul class="thumbnails_list">
			<li></li>
		</ul>
[HTML] pobierz, plaintext 

-

[HTML] pobierz, plaintext 
<meta http-equiv="content-type" content="text/html; charset=ISO8859-2" />
[HTML] pobierz, plaintext 

zmieniłbym kodowanie na UTF-8.


Pozdrawiam i życzę powodzenia przy rysowaniu. Na prawdę bardzo dobrze Ci w tym idzie!

[netvalue]

W jakim celu umieściłeś w stopce link STATYSTYKI GOOGLE ?

[Tonic]

Nie wiem jakim cudem, ale u mnie strona wygląda tak samo na Firefoksie, Operze, IE6 oraz IE7. Sporo było szarpaniny z IE6! Niestety, według statystyk mojej innej strony, 20% odwiedzających miało IE6, więc nie mogłem jej wykluczyć

W każdym razie, skorzystałem z większości Waszych sugestii i wprowadziłem takie zmiany:

- poprawiono wyśrodkowanie strony
- wgrano plugin FancyBox do przeglądania prac, a także go trochę spersonalizowałem, dodałem możliwość nawigacji na podglądzie pracy
- przeniosłem pozycje menu na prawo od "wizytówki"
- poprawiono tabulację kodu
- zmieniono kodowanie z ISO8859-2 na UTF-8, choć głównym argumentem jest planowana dwujęzyczność strony
- wyrzuciłem napis "STATYSTYKI GOOGLE" - to miała być wygoda dla mnie, żebym po wejściu na stronę mógł zajrzeć od razu do statystyk, ale po namyśleniu uznałem, że jest to niepraktyczne dla odwiedzających. Zamiast tego dałem powiewający grozą napis o zakazie kopiowania prac
- skompresowałem pliki z pracami - mają średnią szerokość 600-800px, niektóre 900 i 1000px i mocniejszą kompresję, dzięki czemu mają po 130-180KB (wcześniej były dużo większe i miały po kilkaset KB). Nie chciałem, żeby odwiedzający długo czekał, aż się załaduje obrazek (FancyBox wyświetla dopiero wtedy, gdy plik jest całkowicie załadowany - swoją drogą, zauważyłem w jego kodzie, że ma fajną funkcję preloadingu, tj. wczytania kolejnej i poprzedniej pracy w tle). Dodatkowo niewielkie rozmiary pozwolą odwiedzającemu skupić się na całości zamiast na detalach.
- wywaliłem szary pasek, bo było z tym więcej kłopotów niż pożytków

Kildyt, tu mam do Ciebie pytanie - h1 jest stosowany jako nagłówek tytułowy. U góry z lewej jest tytuł, ale to jest obrazek, nie tekst, więc chyba nie byłoby pożytku pod kątem SEO. Mógłbym wstawić tekst i go ukryć, ale tego wyszukiwarki nie lubię i nie chciałbym ryzykować. Jak to sobie wyobrażałeś?

Zdaję sobie sprawę z ubogiej szaty graficznej, ale kiedyś zrobię grafikę do wypełnienia pustych przestrzeni. W tej chwili priorytetem jest, żeby strona była dobrze napisana, napisanie tekstu o mnie i przetłumaczenie tego wszystkiego na język angielski. Niestety, w Polsce popyt na ilustratorów jest słaby i mało który zleceniodawca daje godziwe wynagrodzenie - zamiast tego szuka tańszych i gorszych ilustracji