Ocena drugiej strony

pytanie zadane 31 października 2016 w HTML i CSS przez Pesio Użytkownik (760 p.)

Stworzyłem kolejną stronę, to mój 2 projekt. Starałem się skupić skupić na semantyczności html5 i odrobinie responsywności css. Kod JSa wzięty z kursu MZ. Wiem, że powinno się go podpiąć jako osobny plik, ale miałem tutaj z tym problem i zrobię to później. Wiem, że w przypadku JSa mam jeszcze dużo do nauki.

Za to mam nadzieje, że kod html i css wygląda lepiej niż ostatnio: ostatnio

Adres strony: http://pesio.ayz.pl/Trawienie/Index.html

4 odpowiedzi

odpowiedź 31 października 2016 przez radek024 Szeryf (77,160 p.)
wybrane 31 października 2016 przez Pesio

Najlepsza

W sumie strona jest całkiem OK pod względem kodu, aczkolwiek:

<span class="bold">izomaltaza</span>

Tutaj powinieneś zastosować znacznik <b> - nie jest on niezalecany czy coś, to zwykły znacznik formatujący.

zdecydowanie za mało klas - stosuj ich więcej, aby w razie potrzeby móc odpowiednio wystylizować dany element(nie każdy z nich musi posiadać klasę, ale stylizowanie po znacznikach jest złe)
kolory na stronie trochę leża, tekst jest lekko nieczytelny.
trochę nie rozumiem zastosowania jednego znacznika article, a później section, a w nim article - w sumie bardziej skłaniałbym się ku opcji article, a w nim section.

Poza tym, jest całkiem ok, warto jednak poprawić jeszcze outline([KLIK]) i nazywać pliki z małej litery - Index.html wygląda źle :P

komentarz 31 października 2016 przez niezalogowany

Zamiast <b> nie będzie jeszcze lepiej jeśli użyje <strong> ?
<strong> oprócz tego że pogrubia ma wartość semantyczną.

komentarz 31 października 2016 przez radek024 Szeryf (77,160 p.)

Tutaj rób jak uważasz - pamiętaj, że semantyka musi się zgadać z zawartością. Tutaj zaproponowałem znacznik <b>, bo ewidetnie(do tej pory) zależało Ci na podkreśleniu wyglądu, a nie znaczenia wyrazu.

komentarz 31 października 2016 przez Pesio Użytkownik (760 p.)

Ok, używać semenatycznych znaczników jak <strong> czy <em> id. zamiast spanów i potem je ostylizować w cssie.

Czyli mam rozumieć, że należałoby nadać wszystkim znacznikom h1-h3 klasy i:

/*zamiast zapisu:*/

.klasa dziecko(znacznik) dziecko(znacznik) {
 ...
}

/*nadać każdemu dziecku odpowiednią klasę i zapisywać od razu:*/

.dziecko {
...
}

Mi tekst wydaje się czytelny. Istnieją jakieś narzędzia wskazujące kiedy kontrast jest za mały, czy to zawsze kwestia subiektywna?
W przypadku jaki wskazujesz nie sugerowałoby to, że te trzy <section> są sekcją w ramach pierwszego <article> "O stronie"? Chciałem rozdzielić te elementy.
Ze structural outline mam właśnie problem. Pokazuje mi, że <nav> nie ma nagłówka, a czytałem, że mieć nie musi. W każdej sekcji brakuje nagłówka dla jednego elementu <article>, nie za bardzo wiem o który chodzi...

komentarz 31 października 2016 przez xmentor Nałogowiec (49,520 p.)

Istnieją jakieś narzędzia wskazujące kiedy kontrast jest za mały, czy to zawsze kwestia subiektywna?

http://wave.webaim.org/

<section>
  <header>
    <h2 id="Białka">Białka</h2>
  </header>
  [...]
</section>

Wystarczy samo h2, nie musisz dodatkowo wsadzać nagłówka do znacznika header.

komentarz 31 października 2016 przez radek024 Szeryf (77,160 p.)

Czyli mam rozumieć, że należałoby nadać wszystkim znacznikom h1-h3 klasy

Ja to robię w taki sposób:

<header class="entry-header">
  <h1 class="page-title">Strona</h1>
  <p class="page-desc">Opis strony</p>
</header>

A w CSS:

.entry-header{}

.entry-header .page-title{}

Możesz poczytać o BEM - to taki standard nazewnictwa(bardzo uproszczone wytłumaczenie).

Mi tekst wydaje się czytelny. Istnieją jakieś narzędzia wskazujące kiedy kontrast jest za mały, czy to zawsze kwestia subiektywna?

No cóż - narzędziem wskazującym jest zawsze klient. Jak chce, taki musi być. Naszym zadaniem jest jednak pokazać wady i zalety danego rozwiązania, na dodatek fajnie by było mieć później coś ładnego w CV, no nie?

komentarz 31 października 2016 przez Pesio Użytkownik (760 p.)

Dzięki, poczytam o BEM.

Co do kontrastu to http://wave.webaim.org/ wydaje mi się tym czego szukałem. Myślałem, że to wina jedynie mojego monitora, ale wychodzi na to, że nie.

odpowiedź 31 października 2016 przez lasak503 Nowicjusz (230 p.)

Według mnie strona czytelna, jednak zbyt ciemno, wszystko dzieje się na jednej stronie a nie przeskakuje na podstrony.

Odwołanie do tematyki strony.

komentarz 31 października 2016 przez Pesio Użytkownik (760 p.)

Moim założeniem było, że wszystko ma być na jednej stronie. Stronę może lekko rozjaśnię przy poprawie stylistyki.

odpowiedź 31 października 2016 przez Adux Obywatel (1,740 p.)

odpowiedź 31 października 2016 przez wanderer Gaduła (3,710 p.)

Z racji ze robiles sam to props, ale dla mnie jako odbiorcy nie podchodzi mi kolorystyka no i strona zrobiona w dosc oldschoolowym stylu :) ale ogolnie i tak na plus

komentarz 31 października 2016 przez Pesio Użytkownik (760 p.)

Postaram się dodać jakieś gradienty, może transition. Tę bordową stylistykę chciałbym zachować, pozmieniam może odcienie na lekko jaśniejsze.

komentarz 31 października 2016 przez wanderer Gaduła (3,710 p.)

osobiscie nie bralbym w ogole pod uwage gradientow

komentarz 31 października 2016 przez Pesio Użytkownik (760 p.)

Masz jakieś inne propozycje? Jestem ciekaw co według ciebie mogłoby pomóc stronie.

komentarz 31 października 2016 przez wanderer Gaduła (3,710 p.)

O kolorach już wspominałem, fajnie jakby ogólnie były jaśniejsze, ale od początku..
Moim zdaniem i pewnie nie tylko ja tak uważam należałoby nieco zmienić wygląd paska Menu, żeby był bardziej widoczny i wyglądał jak pasek menu, bo teraz jest to nieco mylące.

*dodałbym do menu jednak "o nas" i zastanowiłbym się nad "strona główna"
a same menu bym zrobił węższe i zbliżył do prawej bądź lewej strony,

rozważyłbym też jakieś zdjęcie/baner/slider pod lub nad menu :)

Ogólnie bym nieco poszerzył kontener z treścią, być może nawet na pełny ekran i prawdopodobnie zrezygnował z tego zapętlonego tła.

Z racji że jest to strona "onepage" i menu odsyła do danej sekcji to zadbałbym o oddzielenie tych sekcji "O stronie" , "Białka", "Tłuszcze", "Węglowodany" bo teraz to idzie ciągiem i jest nieco mało czytelne, w momencie kiedy porozdzielasz to jakimiś "pasami" na full ekran o dobrze dobranym kolorze przejrzystość przyjdzie sama.

Może to dość oklepane ale wybrałbym 2-3 kolory wokół których bym się obracał i na pewno jednym z nich byłby biały

Zrezygnowałbym z ramek do zdjęć i bardziej poprzeplatał zdjęcia z tekstem bo teraz są bardzo oddzielone od siebie na zasadzie -> fotka i kilogram tekstu (wiem że lorem impsum ale jednak)

tak się złożyło , że pracuje z wyglądem stron i to taka moja mała koncepcja i spostrzeżenia, ale to Twoja strona i zrobisz wedle swojego uznania :)

p.s fajny byłby odsyłacz/przycisk w prawym dolnym rogu strony który z dołu strony zabierałby nas na samą górę.