• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Strona do oceny!

VPS Starter Arubacloud
–3 głosów
513 wizyt
pytanie zadane 28 kwietnia 2016 w Nasze projekty przez Hubert Rzepinski Początkujący (380 p.)

Witam!

Chciałbym oddać w wasze ręce mój pierwszy większy projekt. :)

Liczę na doszukanie się wielu błędów ( aby uniknąć ich w przyszłości ) i konstruktywną opinie.

Link: http://zadaniedomowetest.me.pn/  

( adres przeznaczony do eksperymentów )

 

H.RZ.

5 odpowiedzi

+3 głosów
odpowiedź 28 kwietnia 2016 przez Comandeer Guru (599,730 p.)
  • Menu nie ma linków, przez co nie istnieje dla czytników ekranowych i nie jest dostępne z klawiatury. Tym samym strona jest dla mnie praktycznie nieużywalna (najczęściej używam klawiatury).
  • Na menu nawet kursor nie zmienia się na łapkę…
  • Rozwinięte menu się nie zwija po kliku poza jego obszarem.
  • Przewijanie jest wykonane źle, bo a) szybka próba przewinięcia po przewinięciu buguje stronę b) nie zmienia się adres strony (może dlatego, że linki nie są linkami?).
  • Treść w formie nieestetycznego popupa? To cholernie nieużyteczne. No i znów: BRAK JAKICHKOLWIEK LINKÓW I ZMIAN ADRESU.
  • Galeria z całkowicie innej bajki.
  • Jak na tak małą stronę, zdecydowanie za dużo JS, które i tak powinno być wczytywane na końcu body.
  • Divitis
  • Style inline
  • Bezsensowny [onclick] → https://kornel.ski/onclick
  • A już:
    <a onclick="ShowServices(1);">Papowe pokrycia dachowe</a>

    po prostu boli…

  • <div id="PopupBack">
    	<div id="PopupFrame">
            <div id="contactExit" onclick="ExitContact();"><i class="icon-cancel"></i></div>
    		<image id="contactLoading" src="./Images/loader.gif" />
    	</div>
    </div>

    Po raz do porzygu n-ty napiszę na tym forum: PUSTE ELEMENTY TO NIEDOSTĘPNE ELEMENTY. Obrazek MUSI MIEĆ atrybut [alt]. Ikonka MUSI MIEĆ tekst.

  • Gdzie są akapity?

  • Pusty div od linii można zastąpić przez border-bottom albo ::after.

Tak w sumie to to jest do przepisania…

komentarz 28 kwietnia 2016 przez Eimens Maniak (69,240 p.)
I na co się tyle produkować :/
0 głosów
odpowiedź 28 kwietnia 2016 przez BerdPL Obywatel (1,190 p.)
  • Logo Firmy powinno być w nagłówku H1
  • img z logiem firmy nie ma atrybutu alt
    OK wszystkie obrazki nie mają alt. To źle!
  • <image id="contactLoading" src="./Images/loader.gif" />
    nie ma image jest za to img
  • nawigacja: nie lepiej użyć HTML5 i użyć tagu nav? albo przynajmniej nazwać to id=nav;
    Uzywasz tagu <footer> to nawigacje tez daj w tag html5 <nav>
  • w nawigacji powinny byc użyte linki a nie przyciski. uzyj tagu <a>.
    Dodatkowo linki powinny być wypisane w liście <ul>
  • Po kliknięciu o nas, strona jest przewijana w dół, następnie gdy chcemy przewinąc strone do góry to pojawiają się jakieś przycieńcia (strona dalej chce zjechać w dół).
  • Gdzie jest nawigacja w wersji mobilnej strony ?! 
  • Nie określiłeś w jakim htmlu pisana jest strona
    Dodaj  <!DOCTYPE html> na samym początku
  • Jak już masz to: html lang="pl". To tego nie trzeba dodawać tego:
    <meta http-equiv="Content-Language" content="pl,">
  • Opis firmy to powinien być w elemencie p
  • Outline strony zły

    To tak na szybko
–1 głos
odpowiedź 28 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)
  • Brak DOCTYPE html
  • Nie image tylko img
  • Złącz pliki CSS w jeden, dwa
–2 głosów
odpowiedź 28 kwietnia 2016 przez Dzemtenjem Bywalec (2,660 p.)

Brakuje cursor: pointer dla menu i elementów klikalnych jak 'x' przy usługach czy "powrót" w realizacjach. Jest przez to trochę mniej intuicyjne.

Druga rzecz odnośnie użytkowania, sprawdź czy u Ciebie też tak jest, ale po kliknięciu "o nas" gdy chce szybko wrócić na górę strony to scroll jest blokowany przez chwilę, nie wiem z czego to wynika.

–2 głosów
odpowiedź 28 kwietnia 2016 przez Hubert Rzepinski Początkujący (380 p.)
edycja 28 kwietnia 2016 przez Hubert Rzepinski

Dzemtenjem :

  • cursor: pointer dodany. Był wcześniej, ale szczerze, nie podobała mi się ta łapka. :v
  • Nie dodałem go w galerii, ponieważ "łapka" jest wszędzie na około diva

Maciek Gamrot :

  • Chowająca się lista dodana do TODO
  • Strona się bugguje, wiem. Wynika to z niewystarczającej wysokości diva z treścią.

Mateusz11 :

  •  :o ... !DOCTYPE dodane.
  • Image zmienione na img ( chyba o to chodziło )
  • Złączenie css jest w planach. Na razie zostawie jak jest w związku z niejasną przyszłością ( rozszerzalność ) strony.

BerdPL :

  • Logo firmy w H1 ( w kontaktach)
  • Już wiem o co chodziło koledze wyżej z tym "image" :) Wytwór pisania po północy.
  • Menu zmienione na NAV
  • Linki w menu dodane do TODO
  • Bugowanie się strony tłumaczyłem wyżej
  • <meta http-equiv="Content-Language" content="pl,">  - to z przyzwyczajenia :). Usunięte.
  • Opis jest do zmiany, więc na niego uwagi nie zwracam.

 Comandeer :

  • @UP
  • @UP
  • @UP
  • Zmieniający się adres strony do TODO
  • Tak, jak wyżej
  • Dobry pomysł z border-bottom. TODO.

Fiu, trochę się tego nazbierało, I bardzo dobrze. :) Dziękuje za cenne uwagi i zabieram się do pracy.

komentarz 28 kwietnia 2016 przez BerdPL Obywatel (1,190 p.)
Outline jest zły bo:
https://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fzadaniedomowetest.me.pn%2F
Tak wygląda outline twojej strony

Aby dobrze wszystko wyglądało musisz dowiedzieć się jak stosować nagłowki h1-h6 oraz tag <section>

Na twojej stronie głównej powinno to wyglądać mniej więcej w taki sposób
1.NazwaFirmy
     1.1 Nawigacja
     1.2 O Nas

Tu inny przykład
https://gsnedders.html5.org/outliner/process.py?url=https%3A%2F%2Fbroja.pl%2F
komentarz 28 kwietnia 2016 przez Hubert Rzepinski Początkujący (380 p.)
Nigdy nie słyszałem o takim czymś :/. Tak jest dobrze? U góry ktoś zasugerował, abym umieścił logo firmy w <h1> ( nie wiedziałem o co mu chodziło :v ), więc teraz to zrobiłem.
komentarz 28 kwietnia 2016 przez BerdPL Obywatel (1,190 p.)
xD źle.
Jak popatrzyłem tylko na outline to pomyślałem że wszystko dobrze będzie ale jak spojrzałem na kod too... łooo xD źle to zrozumiałeś

1. nie możesz do obrazka z logiem dodać atrybutu alt z "nawigacja". alt to jest skrócony opis tego co znajduje się na obrazku, albo nazwa tego. Czyli jak masz obrazek z logiem firmy to najlepiej napisać nazwę firmy. Czyli
<img id="TopLogo" src="Images/Full_Logo.png" alt="DANPRO"/>
Inny przykład:
- obrazek z napisem galeria alt="galeria"
- obrazek z dziewczyną która wyprowadza psa w parku alt="dziewczyna w parku z psem"
Tak przy okazji w SEO także nazewnictwo plików się liczy zmienił bym nazwe z Full_Logo.png na np. logo-DANPRO.png

2. to usuń to nie będzie potrzebne
<h1 class="outlineHidden">DANPRO</h1>

3. w nawigacji nie może znajdować h1.
H1 wskazuje na główny temat tego co znajduje się na stronie.
Jeśli wpiszesz h1 w nawigacji to nadasz tytuł tej właśnie nawigacji a nie stronie.
Nawigacji nalepiej nadać tytuł nawigacja ale nie poprzez h1 tylko h2
dodatkowo przecież nie potrzebujesz na stronie wyświetlenia tego że nawigacja to nawigacja ... więc ukrywasz ten tytuł przez odpowiedni CSS

4. z pkt 2 wychodzi na to że logo z alt="DANPRO" które jest również nagłówkiem h1 nie może znajdować się w nav. Racja. to gdzie to dać ? Po za navigacją. Albo najlepiej w tagu <header>
tag header ma to do siebie że wpisany w nim nagłówek <h1> będzie odziałowywał na całą strone a nie tylko na element header. w końcu tag header to nagłówek strony więc dziwnie by było gdyby h1 w nim wpisany nie opisywał głównego tytułu strony.

Podsumowójąc
logo które jest nagłówkiem strony dajesz do tagu <header> a jego alt to DANPRO
nagłówek nawigacji ma być ukrytu przez CSS ma nim być <h2>nawigacja</h2>

Będzie sporo zmian jeśli chodzi o CSS ale da się to zrobić tak jak to teraz tam wygląda
komentarz 28 kwietnia 2016 przez Hubert Rzepinski Początkujący (380 p.)
Dzięki wielkie za pomoc. Nigdy wcześniej nie spotkałem się z określeniem "outline" i nie miałem pojęcia jak to ugryźć, ale chyba w końcu to ogarnąłem. ;)

Podobne pytania

+26 głosów
8 odpowiedzi 1,202 wizyt
pytanie zadane 22 lutego 2018 w Nasze projekty przez gremlin Dyskutant (7,600 p.)
0 głosów
2 odpowiedzi 201 wizyt
pytanie zadane 15 stycznia 2020 w Nasze projekty przez Andrzej Czarny Użytkownik (720 p.)
+1 głos
1 odpowiedź 241 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...