• 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

0 głosów
289 wizyt
pytanie zadane 6 dni temu w Nasze projekty przez Artek Obywatel (1,240 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 6 dni temu przez xmentor Nałogowiec (36,700 p.)
Zdjęcia w aktualnościach i nagłówki w zakładce "Serwis" to trochę przesada, nie sądzisz? :>
komentarz 5 dni temu przez Artek Obywatel (1,240 p.)
Ha ha ha, no tak. Wiadomo, że tego nie będzie w wersji finalnej, zrobiłem to dla jaj tylko.
1
komentarz 5 dni temu przez Benek Nałogowiec (32,440 p.)
Dla jaj to się z kurą hajtnij :)

4 odpowiedzi

+5 głosów
odpowiedź 5 dni temu przez Comandeer Mentor (354,540 p.)
wybrane 4 dni temu 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 3 dni temu przez Artek Obywatel (1,240 p.)

Powinien być nagłówkiem.

 

Hmm....No tak, nie wiem skąd mi przyszło do głowy takie rozwiązanie. 

Wypada… zmienić kod?

Ha ha ha, ale żeś się rozpisał. Zgaduję, że chodzi o semantykę...?

Praktycznie wgl nie opisuje, co jest na obrazku. "Facet przy pracy" – fajnie, ale co robi?

 

No cóż tego to ja akurat nie wiem. 

Ten tekst wygląda jak nagłówek i pełni taką wizualną funkcję – ergo powinien być nagłówkiem. I tak, o takiej duplikacji mówię.

Nie, nagłowkiem jest "Nord Team Service a nie "o nas".  A co do zduplikowania to rzeczywiście wypadałoby raz napisać : "O nas".

A użytkownikowi jest trudniej używać strony, bo się dłużej wczytuje. Dużo plików wypada odpowiednio serwować. Albo mieć dużo plików jedynie w środowisku developerskim.

To dlaczego np. na facebook'u również mają po około 10 plików ze stylami?(przynajmniej u mnie) Ponadto, jeżeli wczytuje się wolniej to o ile? Jeżeli mniej niż 1 sekunda to czy warto zawracać sobie tym głowę? I jeszcze jedno, jeżeli kilka podstron korzysta z tych samych stylów(np. w stopce) to czy nie jest tak, że raz wczytane style dla stopki nie będą musiały ładować się przy odpaleniu innej podstrony?

Wejdź na stronę i naciskaj Tab. Czy widzisz, gdzie się znajduje focus? Czemu menu mobilne jest dostępne z klawiatury? Itp. itd. 

W moim chromie nie widzę focus'u przy szerokim menu jedynie gdy focus skacze po linkach listy hamburgerowej, albo inaczej nie widać focusu gdy lista hamburgerowa jest niewidoczna to fakt. W pozostałych przypadkach widzę focus - chyba, że coś przeoczyłem. Pisząc, że menu mobilne jest dostępne z klawiatury chodzi Ci o to, że wciskając tab powinien ignorować menu hamburgerowe? 

W przeszłości co najmniej jeden czytnik ekranowy nie czytał elementów o zerowych wymiarach. 

Jest to jakiś argument. Postaram się poprawić. 

Uzasadnienie jest proste: element, który jest wyliczeniem elementów, semantycznie jest listą i jako taka powinien być prezentowany. A skodzenie jest proste: w 99% przypadków wystarczy zamienić div na li.

Obczaję to i dam znać wkrótce co i jak. 

Nie, chodzi mi o to, czemu skrypt PHP wówczas inaczej działa?

 

 

Skrypt php działa inaczej gdy jest wyłączona obsługa js'a? Czy walidacja danych działa inaczej w JS niż w php, czy jak..? 

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

Ha ha ha, że co? Że niby ludzie tego nie ogarną? :D 

komentarz 3 dni temu przez Comandeer Mentor (354,540 p.)

Ha ha ha, ale żeś się rozpisał. Zgaduję, że chodzi o semantykę...?

No ale co więcej miałem napisać :D Podałem dokładny przykład, o co chodzi. I tak, w HTML-u de facto zawsze chodzi o semantykę ;)

Nie, nagłowkiem jest "Nord Team Service a nie "o nas".  A co do zduplikowania to rzeczywiście wypadałoby raz napisać : "O nas".

 Tylko że to "O nas" wygląda jak nagłówek strony, a "Nord Team Service" jak nagłówek sekcji. Zobacz sobie to wizualnie, porównaj z innymi stronami (np. artykułami na Medium).

To dlaczego np. na facebook'u również mają po około 10 plików ze stylami?(przynajmniej u mnie) Ponadto, jeżeli wczytuje się wolniej to o ile? Jeżeli mniej niż 1 sekunda to czy warto zawracać sobie tym głowę? I jeszcze jedno, jeżeli kilka podstron korzysta z tych samych stylów(np. w stopce) to czy nie jest tak, że raz wczytane style dla stopki nie będą musiały ładować się przy odpaleniu innej podstrony?

A skąd założenie, że Facebook jest dobrze zoptymalizowany? Poza tym Facebook ma HTTP/2, więc może ładnie optymalizować przesył plików (server push – FTW!). Co do wczytywania: każdy arkusz stylów blokuje renderowanie całej strony. Jak jest przestój w połączeniu, to user poczeka se dłużej niż sekunda czy nawet dwie. Do tego dochodzi limit konkurencyjnych połączeń i problemy z utrzymaniem połączenia dla serwerów z HTTP/1.x. Jak nie masz HTTP/2, to należy założyć z góry, że jeden arkusz będzie lepszy. I tak, zassie z cache, ale w tym momencie ucierpi tzw. first time load – co też wypada zoptymalizować, zwłaszcza, że to to robi 1. wrażenie. Pomijam fakt, że na różnych podstronach żądasz różnych plików, więc i tak jakieś arkusze będą dociągane. No i co z minifkacją stylów i kompresją? Jeden większy plik lepiej się kompresuje niż 5 naprawdę małych.

W moim chromie nie widzę focus'u przy szerokim menu jedynie gdy focus skacze po linkach listy hamburgerowej, albo inaczej nie widać focusu gdy lista hamburgerowa jest niewidoczna to fakt. W pozostałych przypadkach widzę focus - chyba, że coś przeoczyłem

Ale np. focus w menu jest odwrócony.

Pisząc, że menu mobilne jest dostępne z klawiatury chodzi Ci o to, że wciskając tab powinien ignorować menu hamburgerowe?

Skoro menu jest niewidoczne, nie powinno być focusowalne.

Skrypt php działa inaczej gdy jest wyłączona obsługa js'a? Czy walidacja danych działa inaczej w JS niż w php, czy jak..?  

Wyłącz JS i spróbuj wysłać formularz :P

 Ha ha ha, że co? Że niby ludzie tego nie ogarną? :D 

Głupio byłoby obrazić klienta, który wierzy w płaską Ziemię, a równocześnie jest nieprawdopodobnie bogaty, prawda? :> 

1
komentarz 3 dni temu przez HaKIM Maniak (70,660 p.)

Jeżeli mniej niż 1 sekunda to czy warto zawracać sobie tym głowę?

Ciekawostka:

1 sekunda opóźnienia kosztowała Amazon miliony. ^^ (Wystarczyło, aby kupujący się rozmyślił).

Tutaj trochę o tym napisali:

https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

komentarz 17 godziny temu przez Artek Obywatel (1,240 p.)

Tylko że to "O nas" wygląda jak nagłówek strony, a "Nord Team Service" jak nagłówek sekcji. Zobacz sobie to wizualnie, porównaj z innymi stronami (np. artykułami na Medium).

Hmmm...Czyli, że co sugerujesz? Oba elementy powinny być nagłówkami? 

A skąd założenie, że Facebook jest dobrze zoptymalizowany? Poza tym Facebook ma HTTP/2, więc może ładnie optymalizować przesył plików (server push – FTW!). Co do wczytywania: każdy arkusz stylów blokuje renderowanie całej strony. Jak jest przestój w połączeniu, to user poczeka se dłużej niż sekunda czy nawet dwie. Do tego dochodzi limit konkurencyjnych połączeń i problemy z utrzymaniem połączenia dla serwerów z HTTP/1.x. Jak nie masz HTTP/2, to należy założyć z góry, że jeden arkusz będzie lepszy. I tak, zassie z cache, ale w tym momencie ucierpi tzw. first time load – co też wypada zoptymalizować, zwłaszcza, że to to robi 1. wrażenie. Pomijam fakt, że na różnych podstronach żądasz różnych plików, więc i tak jakieś arkusze będą dociągane. No i co z minifkacją stylów i kompresją? Jeden większy plik lepiej się kompresuje niż 5 naprawdę małych.

Zakładam iż facebook jest dobrze zoptymalizowany bo to bardzo duży i znany portal, z całą pewnością zatrudniają najlepszych fachowców. 

Może i nawet przyznałbym Ci rację jednak podglądam sobie źródła innych witryn i póki co wszędzie widzę po kilka a nawet kilkanaście plików ze stylami, czyli co? Wszyscy mają http2? Jeżeli to takie powszechne to ja w takim razie też nie będę miał problemu z korzystaniem z tego. Na razie używam swojego hostingu do celów edukacyjno-demonstracyjnych, potem znajomy będzie musiał sam swój serwer ogarnąć.

Ale np. focus w menu jest odwrócony.

Chodzi o to, że zamiast focusować się od lewej focusuje się od prawej? 

Skoro menu jest niewidoczne, nie powinno być focusowalne.

Zgoda. 

Wyłącz JS i spróbuj wysłać formularz :P

Nie ma walidacji danych przez JS - wiadomo, no ale dane są walidowane również przez skrypt php - nie rozumiem na czym polega problem. 

Głupio byłoby obrazić klienta, który wierzy w płaską Ziemię, a równocześnie jest nieprawdopodobnie bogaty, prawda? :> 

Zgodziłbym się z takim argumentem gdybym tworzył stronę dla właściciela firmy w U.S.A  :) 

 

 

Wracając do tematu div .header.  Czy można/wypada stosować kilka elementów h1 na jednej stronie? Chodzi o to, że w sekcji aktualności ilość wydarzeń będzie większa niż jest teraz, a kolejne nagłówki są równorzędne. Zatem stosowanie h1, h2, h3 itd wydaje się niewłaściwe. Poza tym można stosować maximum h6. Więc jak?

 

Zamieniłem divy na listę w menu hamburgerowym - jest o.k

 

Nadal nie czaję po co kontakt u góry miałby być listą uporządkowaną, skoro nie stosuję tam żadnej numeracji?

komentarz 16 godziny temu przez Comandeer Mentor (354,540 p.)

Hmmm...Czyli, że co sugerujesz? Oba elementy powinny być nagłówkami? 

No można.

 Zakładam iż facebook jest dobrze zoptymalizowany bo to bardzo duży i znany portal, z całą pewnością zatrudniają najlepszych fachowców. 

I dlatego nie potrafią zrobić porządnej aplikacji mobilnej? Jak chcesz zobaczyć dobrze zoptymalizowaną stronę, to spójrz na Google.com. Wiesz ile tam jest zewnętrznych arkuszy? Zero. Ok, dynamicznie dodają jeden, który zasysa się asynchronicznie w tle. Inny przykład? Filament Group – 2 małe arkusze, obydwa pchane z Service Workera, czyli możliwe, że nawet żądanie nie poleciało do serwera. Nie, Facebook Service Workera nie ma, więc żądania zawsze idą na serwer. Strasznie słabiutko wypada strona, która ma "najlepszych fachowców".

Może i nawet przyznałbym Ci rację jednak podglądam sobie źródła innych witryn i póki co wszędzie widzę po kilka a nawet kilkanaście plików ze stylami, czyli co? Wszyscy mają http2?

Nie, prawda jest o wiele smutniejsza i bardziej trywialna: mało kto umie optymalizować przesył plików.

Chodzi o to, że zamiast focusować się od lewej focusuje się od prawej?  

Tak.

Nie ma walidacji danych przez JS - wiadomo, no ale dane są walidowane również przez skrypt php - nie rozumiem na czym polega problem. 

Ale serio nie widzisz, że wówczas walidacja po stronie PHP dziwnie działa i przekerowuje na stronę główną bez żadnej informacji? Zwłaszcza jak do pól wepchamy spacje.

Wracając do tematu div .header.  Czy można/wypada stosować kilka elementów h1 na jednej stronie?

Nie.

Chodzi o to, że w sekcji aktualności ilość wydarzeń będzie większa niż jest teraz, a kolejne nagłówki są równorzędne.

No i właśnie dobrze… Przecież wydarzenia są na tym samym poziomie, żadne nie jest podwydarzeniem drugiego. 

Nadal nie czaję po co kontakt u góry miałby być listą uporządkowaną, skoro nie stosuję tam żadnej numeracji?

Chodziło mi o to, że to nie jest lista ul (nieuporządkowana – źle się wyraziłem) tylko lista klucz-wartość (dl). Odesłałem nawet do przykładu live.

Co do przycisku otwierania hamburgera: nie jest to element listy. To po prostu przycisk wewnątrz nav – polecam świeży artykuł o przycisku otwierającym menu

+1 głos
odpowiedź 6 dni temu przez Noemi Pasjonat (23,110 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 5 dni temu przez Artek Obywatel (1,240 p.)
No, ale jak to uzasadnić.
komentarz 5 dni temu przez xmentor Nałogowiec (36,700 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 5 dni temu przez Artek Obywatel (1,240 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 5 dni temu przez Noemi Pasjonat (23,110 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 5 dni temu przez Comandeer Mentor (354,540 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.

0 głosów
odpowiedź 6 dni temu przez kosaa Mądrala (7,050 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
0 głosów
odpowiedź 6 dni temu przez MMM4CI3J Początkujący (420 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 6 dni temu przez Artek Obywatel (1,240 p.)
Ma inny wygląd bo musi pomieścić dodatkowe funkcjonalności.

Podobne pytania

+2 głosów
4 odpowiedzi 210 wizyt
0 głosów
2 odpowiedzi 274 wizyt
pytanie zadane 8 września 2015 w Nasze projekty przez iwan9449 Pasjonat (20,820 p.)
0 głosów
8 odpowiedzi 447 wizyt

36,094 zapytań

72,754 odpowiedzi

140,029 komentarzy

16,786 pasjonatów

Przeglądających: 191
Pasjonatów: 22 Gości: 169

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...