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

Ocena strony i kodu po poprawkach

VPS Starter Arubacloud
0 głosów
691 wizyt
pytanie zadane 16 lipca 2017 w Nasze projekty przez Artek Stary wyjadacz (11,800 p.)
Witam wszystkich. Tak jak w temacie, proszę o ocenę zarówno wyglądu, funkcjonalności strony jak i samego kodu : hrtml, css i js. Tworzę stronę dla właściciela firmy zajmującej się kotłami grzewczymi, jacuzzi, baseny itp. Zgłaszając swe uwagi proszę o szczegółowe uzasadnienie wątpliwości, zastrzeżeń.

Póki co jest prawie cały front-end  + backend dla wysyłania wiadomości. Nie ma jeszcze treści bo to zadanie dla właścicieli, ja wstawiłem tylko wypełniacz, żeby zobaczyć jak będzie wyglądać. Już wcześniej pokazywałem stronę na forum teraz rozbudowałem i wprowadziłem poprawki. Mam nadzieję, że jest lepiej :)

Będę wdzięczny za każdą konstruktywną krytykę.

 http://sh194765.website.pl/
komentarz 16 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
Zdjęcia w aktualnościach i nagłówki w zakładce "Serwis" to trochę przesada, nie sądzisz? :>
komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
Ha ha ha, no tak. Wiadomo, że tego nie będzie w wersji finalnej, zrobiłem to dla jaj tylko.
1
komentarz 16 lipca 2017 przez Benek Szeryf (90,690 p.)
Dla jaj to się z kurą hajtnij :)

4 odpowiedzi

+4 głosów
odpowiedź 16 lipca 2017 przez Comandeer Guru (599,730 p.)
wybrane 17 lipca 2017 przez Artek
 
Najlepsza
  • Czemu formularz kontaktowy nie daje żadnego feedbacku jeśli userowi nie doczytał się JS?
  • Walidacja formularza zostawia wiele do życzenia – spację w większości pól oszukują system.
  • Logo w menu ma tradycyjnie zły [alt] (obrazki w linkach powinny wskazywać, dokąd te linki prowadzą.
  • [http-equiv=X-UA-Compatible] musi być w pierwszych iluś tam bajtach w head, stąd powinien być bezpośredni po meta[charset].
  • Kontakt u góry nie jest listą uporządkowaną, a listą klucz-wartość.
  • Po co rozbijasz style na tyle plików?
  • Po co Ci style dla mniejszych rozdzielczości skoro w kodzie nie ma meta[name=viewport]?
  • Czemu hamburgerowe menu nie jest już listą?
  • Czemu nagłówek strony ("O nas") nie jest nagłówkiem i jest zduplikowany?
  • Skoro obrazek jest integralną częścią treści, warto zadbać o lepszy [alt].
  • Czemu Twoja implementacja .visually-hidden odbiega od de facto standardu?
  • div.header aż krzyczy
  • Nawigacja klawiaturą jest mocno zepsuta.

PS

Kontrola antyspamowa. Odpowiedz na następujące pytanie : Czy Ziemia jest płaska (tak lub nie)?

Obyś się nie zdziwił, jak zaczną przychodzić gorzkie żale na maila :D 

komentarz 24 lipca 2017 przez Comandeer Guru (599,730 p.)

Brzmi tak jakby to była jakby to była mechanika kwantowa :D 

No bo w kontekście webdevu tak właśnie jest.

 Ale czy powinniśmy się tym przejmować? W końcu kto i po co miałby wyłączać obsługę JS? Jeżeli ktoś taki się pojawia to zakładam, że chce oszukać walidację danych przed wysłaniem i spamować. Innego powodu aby wyłączyć obsługę JS-a nie widzę.

To jest jeden z najbardziej szkodliwych mitów w webdevie: jeśli JS nie działa, to na pewno ktoś go wyłączył. A to nieprawda. JS zawsze może po prostu nie zadziałać i jest bardzo dużo różnych powodów. Nie widzę też powodu, dla którego skrypt server-side miałby być uzależniony od skryptu client-side.

h1 dać jako tekst w dekoracyjnym tle("Aktualności") a dla reszty wydarzeń poniżej zastosować kilka nagłówków h2?

Nom, mniej więcej tak.

 Gdzie kontakt u góry zawiera jakiekolwiek pary wartość klucz?

A zajrzałeś przynajmniej raz do zalinkowanego przykładu…? Bo wydaje mi się, że jest na tyle prosty, że bez problemu byś zauważył, co taką parę stanowi. Kluczem jest metoda kontaktu, a wartością – dana kontaktowa powiązana z tą metodą (np. kontakt telefoniczny – numer telefonu). 

komentarz 24 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)

No bo w kontekście webdevu tak właśnie jest.

Nie spodziewałem się, że optymalizacja przesyłu plików jest tak skomplikowanym zadaniem. Ciekawe zagadnienie postaram się bardziej zgłębić ten temat. 

To jest jeden z najbardziej szkodliwych mitów w webdevie: jeśli JS nie działa, to na pewno ktoś go wyłączył. A to nieprawda. JS zawsze może po prostu nie zadziałać i jest bardzo dużo różnych powodów. Nie widzę też powodu, dla którego skrypt server-side miałby być uzależniony od skryptu client-side.

To ciekawe, przekonałeś mnie. 

A zajrzałeś przynajmniej raz do zalinkowanego przykładu…? Bo wydaje mi się, że jest na tyle prosty, że bez problemu byś zauważył, co taką parę stanowi. Kluczem jest metoda kontaktu, a wartością – dana kontaktowa powiązana z tą metodą (np. kontakt telefoniczny – numer telefonu). 

Nie wiem czy tak to można interpretować. W końcu "metoda kontaktu" jest jedynie ikonką, ozdobą a nie wyrażeniem czy opisem. Użytkownik i bez tego wiedziałby, że to numer telefonu. 

komentarz 24 lipca 2017 przez Comandeer Guru (599,730 p.)

Nie wiem czy tak to można interpretować. W końcu "metoda kontaktu" jest jedynie ikonką, ozdobą a nie wyrażeniem czy opisem. Użytkownik i bez tego wiedziałby, że to numer telefonu. 

Ikonka, która niesie informacje, do czego służy link/tekst obok. Ikonka, której nie widać np. na czytniku ekranowym. Jak myślisz: czy użytkownik, który usłyszy: "plus czterdzieści osiem siedemset dziewięćdziesiąt osiem myślnik sześćset sześćdziesiąt sześć myślnik osiemset osiemdziesiąt osiem" od razu zda sobie sprawę, że to numer telefonu? Nie myśl wyglądem!

komentarz 24 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
Myślę, że sporo ludzi zorientowałoby się, że to numer telefonu po samym +48. No a nawet jeśli to czy nie lepiej jeżeli już to dodać jakąś etykietę? No bo obrazka i tak przecież nie przeczyta.
komentarz 24 lipca 2017 przez Comandeer Guru (599,730 p.)

Myślę, że sporo ludzi zorientowałoby się, że to numer telefonu po samym +48

A jakbyś nie podał +48 (i dalej byłby to poprawny numer telefonu)? A jakby to był numer GG, nick ze Skype'a, nazwa profilu na Facebooku, numer buta Twojego wujka z Ameryki…?

 No bo obrazka i tak przecież nie przeczyta.

Przeczyta

0 głosów
odpowiedź 16 lipca 2017 przez MMM4CI3J Użytkownik (500 p.)
Pierwsze pytanie dlaczego w pliku sklep.php. Navbar ma inny wygląd, nagle pojawia się zakładka konto i wyszukiwarka?

Strona główna mogła by być pozbawiona scroll bara króry nie pełni zbyt dużej funkcji, a samo zdjęcie można np. zmniejszyć.

Niespodzianka w sekcji ,,aktualności "...
komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
Ma inny wygląd bo musi pomieścić dodatkowe funkcjonalności.
0 głosów
odpowiedź 16 lipca 2017 przez imklau Nałogowiec (42,090 p.)

ogólnie fajnie, bo duuużo poprawiłeś od tamtego czasu ;)
ja bym się tylko doczepiła tekstu w menu, bo coś mi się wydaje, że nie powinno się "krzyczeć" w HTML (ze względu na czytniki) i wypadałoby napisać to normalnie, a w CSS dać:

.navigation-item {
   text-transform: uppercase;
}

no i jeszcze brakuje labeli dla inputów (o czym było wspomniane przy poprzedniej ocenie)

 

komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
Jest jakaś różnica pomiędzy napisanie w html'u dużymi literami a napisaniem małymi literami z kodem css, który podałaś? Jedyny input gdzie nie ma label'a to pole dla wyszukiwarki, ale tam chyba nie jest konieczne..
komentarz 16 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
Raczej jest konieczne.
komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
Dlaczego?
komentarz 16 lipca 2017 przez imklau Nałogowiec (42,090 p.)
<form class="newsletter-form" method="POST">
	  <input class="user-email-newsletter" placeholder="e-mail" type="email" name="user-email"> 
          <input class="submit-newsletter" type="submit" value="Zapisz się">
</form>

dla maila też jakoś nie widać etykiety ;)
O ile dobrze kiedyś zrozumiałam to jest to związane z czytnikami ekranowymi i mimo, że Ty widzisz placeholder i wiesz, że ten input jest dla maila lub czegoś innego to osoba korzystająca z czytnika nie będzie tego wiedziała, bo taki czytnik placeholdera nie odczyta...(no chyba, że coś się pozmieniało)

jeszcze tu czegoś Ci brakuje ;)
 

<img class="small-logo" src="/img/logo.jpg"/>

 

komentarz 16 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Każdy input musi posiadać etykiete i już. Nie wiem, czy to dobra praktyka, ale widziałem, że zamiast dodawania znacznika label dodaje się aria-label do inputa - może i jest to jakieś rozwiązanie.

komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
Sprawdziłem i np. na facebook'u zamiast labela dają właśnie aria-label. Tak chyba zrobię.
komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
No tak brakuje atrybutu alt i title.
komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
Co do etykiety dla adresu e-mail w stopce. Czy czytnik ekranu nie ogarnia tego, że jest "type=email" ? Czy tekst umieszczony obok nie jest wystarczający aby zrozumieć o co chodzi?
komentarz 16 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Każde pole w formularzu musi posiadać etykietę. Zawsze można ją ukryć(visuallyhidden).

komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
No, ale jak to uzasadnić.
komentarz 16 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
podanie typu e-mail nie załatwia sprawę, tak jak placeholder, który nie jest zastępstwem dla label.

Etykiety pomagają użytkownikom(zazwyczaj tym, którzy korzystają z czytników ekranowych) zrozumieć przeznaczenie danego inputa.
komentarz 16 lipca 2017 przez Artek Stary wyjadacz (11,800 p.)
1. Słabe te czytniki ekranu skoro "type=email" nie załatwia sprawy.

2. Chyba lepiej zrobić tak jak np. na facebook'u zamiast label podać atrybut aria-label
komentarz 16 lipca 2017 przez imklau Nałogowiec (42,090 p.)
1. może zrozumie, że to email ale zrozumie do czego ten email? Użytkownik ma go podać do czego?

obejrzyj sobie np to: https://www.youtube.com/watch?v=8dCUzOiMRy4
albo napisz do Comandeera, on Ci pewnie podsunie aż za dużo źródeł :D
komentarz 16 lipca 2017 przez Comandeer Guru (599,730 p.)

2. Chyba lepiej zrobić tak jak np. na facebook'u zamiast label podać atrybut aria-label

Niekoniecznie. Poza tym [aria-label] pokrywa tylko czytniki ekranowe, reszty przypadków – nie.

1. Słabe te czytniki ekranu skoro "type=email" nie załatwia sprawy.

Polecam zapoznać się z podstawami działania czytników. W skrócie: jeśli przeglądarka nie przekaże czytnikowi odpowiednich informacji, czytnik ich sam nie zdobędzie. A przeglądarki nie mają obowiązku identyfikować pól po [type] – niestety. Poza tym e-maili jest mnóstwo i niekonieczne to pole musi służyć do wpisania Twojego e-maila.

–1 głos
odpowiedź 16 lipca 2017 przez kosaa Stary wyjadacz (14,130 p.)
pierwsze co rzucilo mi sie na oczy to chodzac po menu przyciski sa na roznych wysokosciach na kazdej stronie, trudno sie chodzi po witrynie

Podobne pytania

0 głosów
4 odpowiedzi 395 wizyt
pytanie zadane 24 sierpnia 2017 w HTML i CSS przez michalos Nowicjusz (180 p.)
+2 głosów
1 odpowiedź 299 wizyt
pytanie zadane 25 lipca 2017 w Nasze projekty przez niko404 Użytkownik (910 p.)
+2 głosów
4 odpowiedzi 318 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...