Ocena strony

pytanie zadane 1 czerwca 2017 w Nasze projekty przez Totek Użytkownik (860 p.)

Witam formułowiczów,

chciałbym byście ocenili moją pierwszą stronę. Czekam na liczne komentarze z uwagami co mógłbym zrobić lepiej.

Link do strony: https://totek98.github.io/

Pozdrawiam.

5 odpowiedzi

odpowiedź 2 czerwca 2017 przez OfftheCode Gaduła (4,050 p.)

Nie traktowałbym opinii samego siebie jako jakiegoś znawcy gdyż sam wiele jeszcze nie zwojowałem, aczkolwiek moje subiektywne odczucia:
- Zbyt duży header, jeśli ktoś trafia na tą stronę z zamysłem "wynajęcia" Cię, a przynajmniej ja mam takie odczucie, że taki jest zamiar. To powinien jak najszybciej trafić na to czego chce, a ten nagłówek jest nieintuicyjny i nie każdy może się nawet domyślić, że trzeba scrollować.

- Wielojęzykowość to fajna opcja, ale w lewym górnym rogu zbyt mocno kontrastują według mnie, potrzeba dla nich znaleźć lepsze miejsce

-Żeby kogoś nie zadręczać masą informacji naraz zamiast pokazywać w 4 małych fragmentach różne informacje o swoim życiu, zamieniłbym go na jeden większy w którym informacje się przewijają

-Formualrz kontaktowy (narazie go nie ma z tego co widzę) powinien być widoczny bez klikniecia od początku gotowa wizytówka do łatwego kontaktu bez, żadnego otwierania nowej karty czy coś. Chcesz ze mną pogadać - masz tutaj wszystko co jest Ci potrzebne

Nie traktuj tego jako jakąś chłostę czy coś staram się jedynie odzwierciedlić swoją opinie jaka się utworzyła po przybyciu na stronę, a chyba chodzi o jak najlepsze pierwsze wrażenie, tak by klient już u nas pozostał.

odpowiedź 2 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Tippy('#zdj', {
  html: '#opis',
  arrow: true,
  animation: 'fade'
})
Tippy('#zdj2', {
  html: '#opis2',
  arrow: true,
  animation: 'fade'
})
Tippy('#zdj3', {
  html: '#opis3',
  arrow: true,
  animation: 'fade'
})
Tippy('#zdj4', {
  html: '#opis4',
  arrow: true,
  animation: 'fade'
})

Jeśli to etap nauki, to proponuję zrezygnować z jQuery i pobawić się czystym JS. Nie znam tego pluginu Tippy, ale z tego co się na szybko zorientowałem to te animacje bez problemu możesz sam zrobić w CSS z użyciem @keyframes przez co nauczysz się co nie co o animation CSS.

Niezależnie już czy używasz czystego JS czy dodatkowych skryptów to zastanów się na małą refaktoryzacją kodu i wrzuceniem powtarzalnych rzeczy np. w pętlę, jak chociażby powyższe wywołania Tippy (nie podam Ci tu rozwiązania, spróbuj sam, najwyżej pomożemy poprawić gdyby były błędy :)

Uwagi o nie stosowaniu jQuery czy Tippy nie traktuj jako jakiś błąd. Biblioteki są bardzo dobre i sam z niektórych korzystam, w tym nawet z jQuery ale myślę, że na początku nauki warto poznać "bebechy" czyli JS, żebyś później mógł świadomie używać bibliotek i w razie czego móc je poprawić, uzupełnić itp.

Przykładem może być chociażby jQuerowe $,fn gdzie z rozmów z niektórymi osobami widać, że nie rozumieją podstawowych zagadnień JS jak chociażby dziedziczenie prototypowe.

Generalnie stronka spoko jak na początki nauki, co do grafiki to się nie wypowiadam bo to nie moja mocna strona, zresztą tutaj dostałeś już jakieś opinie.

Pobaw się też formularzem, np. z walidacją danych w JS, walidacją w PHP, może Ajax itp. Wbrew pozorom taka teoretycznie "typowa wizytówka juniora" to dobre miejsce do przećwiczenia wielu zagadnień zarówno frontu jak i backendu, także powodzenia :), a w razie czego pytaj o poszczególne problemy to pomożemy.

Pozdrawiam

odpowiedź 2 czerwca 2017 przez manjaro Nałogowiec (37,390 p.)

Design wg mnie jest OK.

Natomiast co mnie od razu odstrasza i zniechęca to ogrom technologii które niby "znasz". Jak widzę kogoś kto nie zrobił jeszcze żadnego projektu a niby zna więcej technologii niż senior zarabiający 10k to po prostu wiem że tak naprawdę nie znasz nic dobrze. Co najwyżej podstawy podstaw. Lepiej napisać znam dobrze html oraz css, a do tego stosuję w razie potrzeby js itp... Bo znać to znaczy znać.

komentarz 2 czerwca 2017 przez Totek Użytkownik (860 p.)

Te zdjęcia są tylko na tyle by coś tam było

odpowiedź 2 czerwca 2017 przez xmentor Nałogowiec (49,520 p.)
edycja 2 czerwca 2017 przez xmentor

<html>

Brakuje atrybutu lang.

Ładujesz całe Font Awesome a używasz jedynie dwóch ikon, proponuje fontello czy czegoś podobnego.

Czcionki z googla można pociągnąć jednym żądaniem.

<div class="loader" id="cos">
  <div class="sk-folding-cube" id="cos2">
    <div class="sk-cube1 sk-cube"></div>
    <div class="sk-cube2 sk-cube"></div>
    <div class="sk-cube4 sk-cube"></div>
    <div class="sk-cube3 sk-cube"></div>
  </div>
</div>

Chyba jeszcze nigdy nie widziałem loadaera, który byłby dostępny. Puste elementy, które nie niosą za sobą treści. Wystarczy nadać rolę progressbar wraz z innymi potrzebnymi atrybutami aria-/wykorzystać znacznik progress, dorzucić trochę JS i gotowe.

<a class="up"><i class="fa fa-2x fa-chevron-up" aria-hidden="true"></i></a>

Kolejny pusty, niedostępny element.

Obrazki bez atrybutu alt - https://www.webkrytyk.pl/2017/05/31/wpadki-i-wypadki-9/

<div class="header">

Czemu to nie jest znacznikiem header?

<h2 class="heading header--heading">Web<span class="header__slash"></span>developer</h2>

To powinno być H1.

<div class="main">

Myślę, że znacznik main tutaj powinien być.

<div class="nazwa">
  <span class="ele1"></span>
</div>
<div class="nazwa2">
  <span class="ele2"></span>
</div>
<div class="nazwa3">
  <span class="ele3"></span>
</div>
<div class="nazwa4">
					
</div>

Kolejne puste elementy uzupełnianie jedynie treścią przez JS-a.

<div class="portfolio"><i class="fa fa-code" aria-hidden="true"></i> Informacje</div>

H2 tutaj idealnie pasuje.

<section class="pods">
  <header class="hed">Życie</header>
  Lorem ipsum dolor sit amet[...]
</section>

W tym wypadku, zamiast header(jest on tu zbędny) dałbym H3, a tekst powinien być w akapitach. Masz kilka takich podonych sekcji, więc w każdej to zastosuj.

<main class="zdjjez">
    <img id="zdj" src="img/angular.png">
    <div id="opis" style="display: none">
        Tutaj będzie krótki opis!
    </div>
    [...]
</main>
<main class="zdjjez">
    <img id="zdj7" src="img/js.png">
    <div id="opis7" style="display: none">
        Tutaj będzie krótki opis!
    </div>
    [...]
</main>

Znacznik main powinien być jeden na stronie, wskazałem Ci gdzie. No i oczywiście brak altów.

<main class="zdjjez">
</img>

Tutaj nie wiem, co się stało - otwierasz main, zamykasz img.

<section class="third">
    <div class="nazwa8">
    <header class="napis">
      Chcesz się ze mną skontaktować?
    </header>
    <main class="guzik">
      <a id="kontakt" class="button">Kliknij tutaj!</a>
    </main>
  </div>
  [...]

Ta sekcja na tym powinna się skończyć. Znacznik header zastąpić H2, na temat main już wspomniałem. Link powinien mieć atrybut href(w tym przypadku przynajmniej testowo uzupełnione np. mailto:adres@host.pl).

<div class="nazwa9">
  <header class="napis">
    Moje projekty
  </header>
  <main class="projekty">
    <div class="unknown">
      <div class="opisek">Tu kiedyś coś będzie</div>
    </div>
    [...]
  </main>
  [...]
</div>

To powinno być już w oddzielnej sekcji a na temat header i main już pisałem.

odpowiedź 2 czerwca 2017 przez Lu Kiss Dyskutant (7,600 p.)

Nie justuj tekstu to nie gazeta

komentarz 2 czerwca 2017 przez manjaro Nałogowiec (37,390 p.)

A mi się na przykład bardziej podobają wyjustowane strony. To chyba kwestia gustu.

komentarz 2 czerwca 2017 przez Lu Kiss Dyskutant (7,600 p.)

https://designforhackers.com/blog/justify-text-html-css/

To nie jest kwestia gustu tylko slepota i niewiedza

komentarz 2 czerwca 2017 przez manjaro Nałogowiec (37,390 p.)

A ja wolę mieć wyjustowane bo ładnie wygląda niż brzydko poszarpaną prawą stronę. Z tego co się naczytałem to zdania są podzielone i jedni justują inni nie.

1	komentarz 2 czerwca 2017 przez Lu Kiss Dyskutant (7,600 p.) Zdania sa podzielone bo jedni sa zieloni w temaci typografii i mysla ze to kwesta gustu a drudzy znaja sie na rzeczy przy skladzie tekstu

komentarz 2 czerwca 2017 przez manjaro Nałogowiec (37,390 p.)

Przyznam Ci częściowo rację. Przy wąskich kolumnach tekstu rzeczywiście justowanie nie sprawdza się i tekst może być nieczytelny. Ale przy tekście szerokości powiedzmy tak jak tu na forum gdzie w jednym wierszu jest około 10 wyrazów to chyba żaden problem aby justować. Wygląda to schludnie i elegancko.

komentarz 2 czerwca 2017 przez Comandeer Guru (600,810 p.)

A ja wolę mieć wyjustowane bo ładnie wygląda

A ja wolę, jak ktoś zapoznaje się z podstawowymi zasadami dostępności i UX, które od wieków jak mantrę powtarzają, że tekst na ekranie nie powinien być wyjustowany. I gust "bo ładnie wygląda" ma się nijak do faktu, że dzięki takiemu podejściu część użytkowników NIE PRZECZYTA treści.

Cytując za Heydonem Pickeringiem (Inclusive Design Patterns, s. 53-54):

Justification, possible by setting text-align: justify; in your CSS, is generally considered bad practice for web content. Justification means making each line the same length, which makes paragraphs look neater but can severely impair readability.

[…]

In text justification, to make each line of equal length, words need to be redistributed within their lines, creating distractingly uneven word spacing.

[…]

For good readability without JavaScript dependencies and their attendant performance issues, the default text-align value of left is preferable.

Justowanie tekstu można ROZWAŻYĆ w chwili, gdy jest sensowny sposób na redystrybuowanie słów w taki sposób, żeby nie powstawały nieregularne przerwy. Owszem, jest moduł CSS Hyphenation, ale bardziej nie działa niż działa, a i tworzenie treści przy udziale tego komponentu nie jest specjalnie proste i przyjemne.

Reasumując: na stronach internetowych justowania NALEŻY unikać i gust autora strony nie powinien mieć nic do tego. A książkę Pickeringa polecam, bo otwiera oczy.

komentarz 2 czerwca 2017 przez manjaro Nałogowiec (37,390 p.)

Szefie przyjąłem do wiadomości że należy unikać ;) Ale osobiście w swoich projektach wolę mieć ładnie wystylizowany tekst ;) Dziękuję i nie drążę już.