[www] moje portfolio Opcje

[Bartek91]

Właśnie skończyłem (chyba) moją nową wersję portfolio. Jak Wam się podoba?

www.bartek.adiconet.pl

[!*!]

- kolory są za blade
- tabela do wyświetlania obrazków? pokolorowałbym wiersze, żeby to się tak nie zlewało, dopiero po jakimś czasie zaskoczyłem że są 3 screeny tego samego projektu.
- jak klikam w menu, przewijanie mogłoby być płynne.
- a jak kliknę na "wyślij" zostaję przekierowany do góry, a błąd jest na samym dole.
- obrazki nieklikalne, brak powiększenia, linku?

[fortowiec225]

Całość dobra ale mam drobne zastrzeżenia, oczywiście według mnie.

- Niepasująca czcionka przy "Moje umiejętności", "O mnie", "Web Design".
- Poprawienie kolorów poszczególnych elementów np. po przez najechanie na te okrągłe emplematy pod "Moje umiejętności" - są zbyt blade.
- Dodaj możliwość powiększenia ew. zbliżenia obrazków w portfolio.

Zaglądałem w źródło strony i składnia (X)HTML jak najbardziej poprawna.

Ten post edytował fortowiec225 16.07.2012, 16:42:47

[Bartek91]

Myślałem, żeby po najechaniu na pracę zamiast niej pojawiła się krótka informacja i ewentualnie link do zrealizowanego projektu. Coś w takim stylu jak jest na stronie http://dribbble.com/ Tylko, że nie wiem jak to zrobić w jakiej to technologii. Domyślam się, że jquery ale tego jeszcze za bardzo nie ogarniam.

U mnie po wysłaniu wyślij z błędnym emailem nie kieruje do góry strony, tylko zostaje na dole i wyświetla błąd, ale możliwe, że zależy to od przeglądarki - nie pomyślałem o tym i nie sprawdziłem.

Płynne menu także trzeba zrobić chyba z wykorzystaniem jquery?

Może tło pod tymi 3 obrazki z jednego projektu pokolorować lekko na szaro, żeby się jakoś odznaczało, albo dać <hr>. Jak nie w tabeli to jak je rozmieścić?

A te kolory to też zależne od ustawień monitora - też nie pomyślałem, bo u mnie wydają się być w porządku (IMG:style_emoticons/default/smile.gif)

Postaram się poprawić co nieco i wrzucić niebawem poprawioną stronę (IMG:style_emoticons/default/wink.gif)

[toffiak]

Na operze 12 Ubuntu 12 rozjeżdża się górne menu, dodanie margin-top: 0 dla diva.container, poprawiło menu.

Efekt z przesłanianiem po najechaniu można osiągnąć w css-ie, wystarczy odpowiednio użyć position: relative i position: absolute.

[Bartek91]

Zmieniłem sporo.
Kolory dałem troszkę inne. Wyraźna zielona belka menu.
W ogóle to zakodowałem stronę od nowa, tym razem w html5. Przechodzi pozytywne validację, bez błędów.
Zrobiłem płynne przejście pomiędzy sekcjami "o mnie", "portfolio" i "kontakt" po kliknięciu w link w menu.
Odróżniłem trzy obrazki z tego samego menu dając lekko ciemniejsze tło pod nimi.
I po najechaniu na pierwszy obrazek z projektu wyświetlają nam się szczegóły i ewentualnie link do kliknięcia aby powiększyć pracę.
Pobawiłem się także trochę formularzem i dodałem parę bajerów z html5.

Chyba teraz już jest w miarę spoko i nie trzeba nic poprawiać. Jeszcze tylko angielska wersja mi została.

www.bartek.adiconet.pl

[!*!]

Na operze 12 Ubuntu 12 rozjeżdża się górne menu, dodanie margin-top: 0 dla diva.container, poprawiło menu.

Ten problem nadal występuje. Tak samo jak ten z formularzem.

[Damonsson]

Opera 12 menu zjeżdża na dół. - ok poprawione...

Po wysłaniu pustego formularza znika stopka.

Ten post edytował Damonsson 17.07.2012, 15:47:21

[toffiak]

Taka sugestia mi się nasunęła, przy zasłanianiu obrazków można wykorzystać css transition albo javascript jeśli ma być kompatybilne ze starszymi przeglądarkami.

Ie < 8 bardzo źle sobie radzi nowymi tagami proponuje http://code.google.com/p/html5shiv/.
Co do html5 warto sprawdzić stronę jednym z dostępnych "outlinerów" i zastanowić się nad użytymi nowymi tagami http://html5doctor.com/.

W przypadku portfolio aż się prosi o użycie microformatów np.: microdata

[piotrex41]

1. Strasznie dużo ciężkiej grafiki - długo się wczytuje na wolniejszym łączu.
2. & nbsp; (IMG:style_emoticons/default/questionmark.gif) A nie można w CSS nadać margines na linki, zamiast dawać takie coś:

Kod

<div class="menu"><a href="header">O MNIE</a>      <a href="#portfolio">PORTFOLIO</a>      <a href="#kontakt">KONTAKT</a></div>

3. Fajnie że stosujesz tagi HTML5, ale skoro używasz nowości to zamiast <b> stosuj <strong>, bo ten 1-szy jest uznany za przestarzały, i pamiętaj dorzucić FIX dla IE<8

Kod

<!--[if (gte IE 6)&(lte IE 9)]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

4. Umieszczanie <br /> zamiast marginów, paddingów (głównie przy pierwszym zdaniu w DIVie)

Kod

<div class="second"><br />Layout graficzny robiony w ramach treningu....

czy też

Kod

<section id="formularzkontaktowy"><br /><br /><h1>SKONTAKTUJ SIĘ ZE MNĄ</h1>...

5. Puste atrybuty ALT przy obrazkach. Uzupełnij je, zadziała to pozytywnie na pozycjonowanie twojej strony.
6. Teksty dłuższe powinno dawać się w <p> żeby semantyka strony była zachowana.

7. Dlaczego w CSS dajesz:

Kod

    margin-top:0px;
    margin-left:0px;
    margin-right:0px;

Zamiast po prostu

Kod

margin:0;

Nie potrzebne 2 linijki no i ten dopisek PX przy zerze jest zbędny (IMG:style_emoticons/default/smile.gif)
8. Znowu piszesz kilka linijek zamiast 1:

Kod

    margin-top:50px;
    margin-left: auto;
    margin-right: auto;

a powinno być:

Kod

margin:50px auto 0 auto;

9. W kilku miejscach powielasz kod css, np. rodzaj czcionki określasz kilka razy ten sam, zamiast do BODY przypisać standardowy i ew. zmieniać rozmiar gdzie potrzeba.
10. Raz stosujesz background: raz background-color: a raz background-image: zamiast to ujednolicić.

Ode mnie tyle (IMG:style_emoticons/default/smile.gif)
Ogólnie portfolio przyjemne dla oka, ale te kilka błędów bym jednak poprawił (IMG:style_emoticons/default/smile.gif)

Ten post edytował piotrex41 18.07.2012, 08:32:57

[kristaps]

Kurde, aż prosi się o jakiegoś hovera, tym bardziej przy nieco stonowanych barwach. Jak dla mnie ok, ale trochę mało światła i kolory mdłe.