Ocena strony

pytanie zadane 6 października 2016 w Nasze projekty przez Sebastian Westfal Obywatel (1,020 p.)

Witam, zakodowałem stronę (html, css, jquery, bootstrap-wiem dużo tego wszędzie) i proszę o ocenę, oczywiście z konstruktywną krytyką :) Szablon tej strony pobrałem w psd ze strony, którą podałem w stopce. Zaznaczam że jest to moja pierwsza strona zakodowana od początku. Pozdrawiam.

Link do strony: http://sebastian-it.16mb.com/web-1/

3 odpowiedzi

odpowiedź 6 października 2016 przez Comandeer Guru (607,980 p.)
wybrane 6 października 2016 przez Sebastian Westfal

Najlepsza

Za dużo arkuszy stylów.
JS powinno się dołączać na końcu body.
X-UA-Compatible warto słać jako nagłówek a nie w kodzie. A Chrome Frame umarło kilka lat temu, nie ma sensu go wspierać.
.line_up wygląda jak zwykły border. Tak samo jak inne linie robione w analogiczny sposób! Zawsze można do tego wykorzystać pseudoelementy.
Wgl rozwaliła się przez to konwencja nazewnicza.
Ikonki są źle wstawione.
Zamiast krzyczeć w kodzie, warto zastosować text-transform: uppercase.
Każde pole formularza MUSI mieć label!!!
Menu i socjalki to lista.
Socjalki nie mają treści!
Tekst należy opatulić akapitami.
Ogólnie jest totalny divitis – warto o to zadbać i dodać nieco semantyki z HTML5.

komentarz 6 października 2016 przez Sebastian Westfal Obywatel (1,020 p.)

Dzięki za wszystkie uwagi. Ale nie za bardzo wiem co z ikonkami, wstawiałem je wg w3schools.com, w identyczny sposób.

A Chrome Frame umarło kilka lat temu, nie ma sensu go wspierać.

Słyszałem, że warto wstawiać to po prostu na wszelki wypadek, na pewno nie zaszkodzi.

komentarz 6 października 2016 przez Comandeer Guru (607,980 p.)

No i właśnie dlatego są źle → http://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy?show=34559#q34559

<span class="glyphicon glyphicon-signal logo-icon" aria-hidden="true"></span>

Brakuje [aria-hidden=true].

komentarz 6 października 2016 przez Sebastian Westfal Obywatel (1,020 p.)

No dobrze, nie mam na tyle wiedzy żeby cokolwiek mówić o takim serwisie. Ale fajny artykuł i na pewno wezmę z teko lekcję. Jednak w3schools jest dosyć dużym serwisem, jak sam napisałeś dużo osób myśli że jest to "oficjalna" strona przez tą chwytliwą nazwę "w3". Pozdrawaim, dzięki za poświęcony czas.

komentarz 6 października 2016 przez Comandeer Guru (607,980 p.)

Słyszałem, że warto wstawiać to po prostu na wszelki wypadek, na pewno nie zaszkodzi.

Nie, zaszkodzi. Stosowanie technologii porzuconej 2 lata temu, która nie ma oficjalnego wsparcia producenta (nawet w zakresie bezpieczeństwa), jest zawsze szkodliwe.

odpowiedź 6 października 2016 przez IBB Gaduła (3,020 p.)

tak jak napisał Comandeer, stosujesz bardzo mało semantycznych znaczników. Przejdź przez swój kod HTML, element po elemencie, i zastanów się, jaką rolę każdy z nich pełni na stronie, i, co za tym idzie, przy pomocy jakiego elementu HTML powinien zostać oznaczony. Np. obecnie Twoje menu główne wygląda następująco:

<a href="#">
   <div class="col-sm-2 menu-left" id="menu-1"> HOME PAGE </div>
 </a> 
<a href="#"> 
    <div class="col-sm-2 menu-left" id="menu-2"> Style Demo </div> 
</a>
<a href="#"> 
    <div class="col-sm-2 menu-left" id="menu-3"> Full Width </div>
</a> 
<a href="#"> 
    <div class="col-sm-2 menu-left" id="menu-4"> Portfolio </div>
</a> 
<a href="#"> 
    <div class="col-sm-2 menu-left" id="menu-5"> Gallery </div> 
</a> 
<a href="#"> 
    <div class="col-sm-2" id="menu-6"> Dropdown </div>
</a>

Tymczasem powinno być oznaczone przy pomocy elementu nav i listy:

<nav>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        [...]
   </ul>
</nav>

określiłeś język strony jako polski, chociaż strona jest po angielsku:

<html lang="pl">

dlaczego placeholder w polu wyszukiwania jest po polsku, choć cała reszta strony po angielsku?
bardzo słaby kontrast pomiędzy niektórymi elementami a tłem (np. czerwony tekst wyświetlony na czerwonym tle, placeholdery)
niektóre elementy interaktywne nie mają widocznego wskaźnika fokusa (np. linki w głównym menu)
responsywność strony wymaga dopracowania, szczególnie góra strony i sekcja "Link block" (.footer-center). Linki w menu głównym są zbyt małe i umieszczone za blisko siebie, by można było wygodnie korzystać z nich na ekranie dotykowym - trudno będzie użytkownikom wybrać konkretny link bez przypadkowego naciśnięcia linku obok. Linki do mediów społecznościowych powinny być raczej wyświetlone w jednym rzędzie, a nie w jednej kolumnie (podobnie menu główne na mniejszych tabletach)

komentarz 6 października 2016 przez Sebastian Westfal Obywatel (1,020 p.)

Jeżeli chodzi do design i dobranie kolorów to jakby nie moja rola, ponieważ szablon jest z internetu, ja go tylko zakodowałem. W responsywność jeszcze sie nie bawiłe, wiem że jest do dopracowania, wszystko robiłem na col-sm-xx, więc nie mogło to dobrze działać. Dzięki za uwagi, na pewno przemyślę to. Jak zaznaczyłem dopiero zaczynam się bawić w kodowanie i wiem że dużo przede mną. Pozdrawiam.