[Ocena] Portfolio

pytanie zadane 11 lutego 2016 w HTML i CSS przez rucin96 Użytkownik (500 p.)
edycja 11 lutego 2016 przez Patrycjerz

Witam Serdecznie :)
Chciałbym abyście ocenili moją stronę portfolio najlepiej ze szczególnym uwzględnieniem kodu.
Wszelkie poprawki mile widziane :)

Portfolio: www.vicoweb.eu

Pozdrawiam!

6 odpowiedzi

odpowiedź 11 lutego 2016 przez Comandeer Guru (601,110 p.)

Deklaracja kodowania powinna być pierwsza w head
Zamiast [rel="shortcut icon"] starczy samo [rel=icon]
Za dużo CSS – nie korzystacie z HTTP/2, więc powinniście zminifikować i złączyć arkusze
A o @import to najlepiej zapomnieć: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
```
<section class="navbar-brand"><img src="images/logo.png" alt="Logo VicoWeb.eu" id="logo" class="img-responsive" /></section>
```
A co to za potwór? To powinien być główny, klikalny nagłówek → http://www.webkrytyk.pl/krytyka/lexy.com.pl/#naglowki
No i obrazki w linkach wskazują na swoją rolę, nie to, czym są, zatem: "VicoWeb.eu", nie "Logo VIcoWeb.eu" (tutaj [alt] robi za tekst nagłówka!).

<span class="sr-only">Toggle navigation</span>

Czemu to nie po polsku?

Nie krzyczcie w menu – jest text-transform: uppercase
```
<br class="celar" />
```
Clearfix → http://nicolasgallagher.com/micro-clearfix-hack/
Wgl section.container nie ma sensu, bo to element tylko do stylowania, więc powinien to być div.
```
<p class="heading">Dzień <b>dobry!</b></p>
```
Coś, co ma taką klasę, wręcz musi być nagłówkiem. No i zamiast b powinien być zastosowany span.
```
<h3 class="author">Marcin <span class="blue">Ruciński</span></h3>
```
A jak nagle będzie miało być czerwone? Dlatego klasy powinny mieć abstrakcyjne nazwy.
Zachwiana jest hierarchia nagłówków (gdzie h1 czy h2?).
section.about nie mają sensu z nagłówkami ponad nimi – te nagłówki powinny być w środku. A sekcja otaczające te sekcje również powinna mieć nagłówek. No i czemu tekst nie jest w akapitach?
section NIE SŁUŻY DO STYLOWANIA! Polecam sobie spojrzeć → http://tutorials.comandeer.pl/html5-blog.html
[placeholder] NIE ZASTĘPUJE label. Jak nie wierzycie, to polecam sprawdzić w specyfikacji HTML5 ;)

<h2 class="cite">“Kreatywność polega na zapominaniu zasad.”</h2>

Przecież to jest cytat. A cytaty oznacza się przez blockqoute.

Ogólnie ¾ sekcji na stronie to powinny być div, bo nie mają żadnej semantyki.

Strona polska, adresy po angielsku – nieładnie to wygląda i szkodzi UX.

Czemu w portfolio obrazków nie da się powiększyć? I może ważniejsze pytanie: czemu mają puste [alt]?

komentarz 11 lutego 2016 przez rucin96 Użytkownik (500 p.)

Dziękuje za kreatywną opinię, postaram się to poprawić jak tylko znajdę czas.
Co do krzyczenia w menu, użyłem tego ponieważ na początku nie wiedzieliśmy czy będą same duże litery czy nie, a potem zapomniało się to zmienić.

Jeśli chodzi o portfolio to wczoraj napisałem w PHP skrypt, dodający obrazki do niego i dlatego jeszcze nie jest dopracowane bo nie skończyłem pisać tego (alt oraz linki zostaną niebawem dodane).

Jeszcze raz dzięki za opinię, jak widać człowiek cały czas się uczy :)

komentarz 11 lutego 2016 przez rucin96 Użytkownik (500 p.)

No i zapomniałem dodać, że chciałem użyć inaczej trochę znaczników h1, h2 oraz np.

<p class="heading">Dzień <b>dobry!</b></p>

<h3 class="author">Marcin <span class="blue">Ruciński</span></h3>

Ale byłem wtedy na praktykach w agencji reklamowej i doradzili mi to tak rozwiązać.

komentarz 11 lutego 2016 przez Comandeer Guru (601,110 p.)

Eh, bo w agencji reklamowej patrzą pod kątem SEO, a ja patrzę pod kątem semantyki. Niestety, te 2 gałęzie w Polsce się mocno rozchodzą, a nie powinny → https://cksource.com/blog/Accessibility-usability-and-SEO-go-hand-in-hand-a-talk-with-David-Carralon

komentarz 11 lutego 2016 przez rucin96 Użytkownik (500 p.)

"VicoWeb.eu", nie "Logo VIcoWeb.eu" (tutaj [alt] robi za tekst nagłówka!).

Co do tego to również chciałem na początku tak zrobić, jednak funkcja ta nie tylko odpowiada za wyświetlanie tekstu w przypadku nie załadowania loga, ale jednocześnie czyta tekst dla niewidomych więc tu wydaje mi się, że takie rozwiązanie jest lepsze :)

komentarz 11 lutego 2016 przez Comandeer Guru (601,110 p.)

No właśnie dlatego nie jest ;) Polecam wziąć sobie Firefoksa i JAWS i posłuchać, co zostanie przeczytane. A przeczytane zostanie coś typu "Link logo VicoWeb.eu", co sugeruje, że to link do logo.

komentarz 11 lutego 2016 przez rucin96 Użytkownik (500 p.)

Tego nie wiedziałem, dzięki za radę :)

komentarz 28 lutego 2016 przez HaKIM Szeryf (87,590 p.)

O.o Pierwszy raz w moim życiu widzę, aby ktoś stylował br'a. : D

1	komentarz 28 lutego 2016 przez Comandeer Guru (601,110 p.) Toś mało widział ;) br często jest używany do clearowania. Inna rzecz, że to dziwna i bezsensowna praktyka.