Proszę o ocenę jakości kodu oraz strony internetowej.

pytanie zadane 17 marca 2017 w Rozwój zawodowy, nauka, praca przez Artek Stary wyjadacz (11,800 p.)

Witam wszystkich. Jestem w trakcie tworzenia strony dla kolegi, który pracuje w firmie sprzedającej/serwisującej kotły grzewcze jacuzzi itd.

Strona jeszcze nie jest gotowa, póki co dostępne są zakładki "firma" i kontakt. Chciałbym się za wczasu dowiedzieć czy popełniłem jakieś błędy aby poprawić się w przyszłości.

Proszę o szczegółowe uzasadnienie zgłaszanych wątpliwości.

http://sh194765.website.pl/

komentarz 18 marca 2017 przez Arkadiusz Waluk Ekspert (287,950 p.)

@Artek gdy chcesz się odnieść do czyjejś odpowiedzi to rób to proszę w komentarzu do niej, a nie kolejnej odpowiedzi, jak robiłeś dotychczas. Odpowiedzi, jak sama nazwa mówi, to mają być odpowiedzi innych na pytanie. Poza tym robi się w dyskusji straszny bałagan - przed chwilą coś połączyłem, ale do tej pory nie wiem czy dobrze to zrobiłem. A tak mamy pod każdą odpowiedzią komentarze, które jej dotyczą.

komentarz 19 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Usunąłeś parę wypowiedzi. Możesz je przywrócić? Były przydatne...

komentarz 19 marca 2017 przez Arkadiusz Waluk Ekspert (287,950 p.)

Niczego nie usunąłem. Wszystkie Twoje odpowiedzi (i komentarze pod nimi) zamieniłem na komentarze pod najlepszą odpowiedzią - jak zrozumiałem to co w nich było, dotyczyło właśnie tej odpowiedzi. Jeśli zrozumiałem źle to sorki, ale jak pisałem, przez dodanie przez Ciebie kilku odpowiedzi zrobił się taki bałagan, że ciężko było się w tym połapać.

komentarz 19 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Mój bład, Część komentarzy się schowała i trzeba rozwinąć.

5 odpowiedzi

odpowiedź 17 marca 2017 przez xmentor Nałogowiec (49,520 p.)
wybrane 18 marca 2017 przez Artek

Najlepsza

<link href='http://fonts.googleapis.com/css?family=Athiti&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Czcionki można pociągnąć jednym linkiem: family=czcionka1|czcionka2

Atrybut type zbędny.

Skrypty(jQuery itp.) możesz przenieś na koniec ciała, tuż przed </body>.

<title>Nord Team Service</title>
<meta charset="utf-8">

Wydaje się, że meta z kodowaniem powinna być pierwsza.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

chrome=1, jest zbędne - Chorme Frame umarł.

Do ikon lepiej używać znacznika span niż i - https://comandeer.github.io/blog/a11y/html-css/2017/02/28/o-ikonkach-slow-kilka.html

Sposoby kontaktu(mowa o divie z numerami telefonu i e-mailem) można by wrzucić do jakiejś listy np. dl - sam e-mail powinien być linkiem z href-em zawierającym mailto:twój@mail.pl.

Menu powinno być oparte na liście ol/ul - zamiast na mniejszych ekranach wyświetlać menu oparte na select, możesz ukryć menu zbudowane na liście ol/ul i dodać jakiegoś hamburgera, który będzie kontrolował pokazywanie tego menu.

Brakuje atrybutu alt w większości obrazków, jeżeli nawet są to elementy dekorujące, powinny mieć pusty alt.

Brakuje mi paragrafów.

Odwiedź nas na  <a target="_blank" href="https://www.facebook.com/NORD-TEAM-238591496164650/?fref=ts"><i class="fa fa-facebook-square"></i></a>

Pusty znacznik a, żadnej treści nie niesie ze sobą - dodatkowo brak aria-hidden.

<div id="pipes-image" class="fading-images"></div>
<div id="jacuzzi-image" class="fading-images"></div>

Tutaj tez pusto.

<input id="user-email-newsletter" placeholder="e-mail" type="text" name="user-email">

type można zmienić na email.

Mało widoczny fokus np. na inputach w formularzu.

Podstrona Kontakt:

Duża ta czcionka.

Zrób z tych numerów i e-maila(e-mail powinien być linkiem), listę - jak już wyżej wspomniałem.

Inputy powinny mieć etykiety(label).

Warto również oznaczyć, które pola są obowiązkowe do wypełnienia.

Sposób weryfikacji(przepisywanie kodu z obrazka) jest niedostępny.

3	komentarz 17 marca 2017 przez imklau Nałogowiec (42,090 p.) no i jeszcze to stylizowanie po id nie pasuje

komentarz 17 marca 2017 przez xmentor Nałogowiec (49,520 p.)

O to to. Rownież po samych znacznikach:

footer a

komentarz 17 marca 2017 przez Artek Stary wyjadacz (11,800 p.)
przeniesione 18 marca 2017 przez Arkadiusz Waluk

Czcionki można pociągnąć jednym linkiem: family=czcionka1|czcionka2

Dobra, poprawię.

Skrypty(jQuery itp.) możesz przenieś na koniec ciała, tuż przed </body>.

Dlaczego? Co to da?

Wydaje się, że meta z kodowaniem powinna być pierwsza.

Dlaczego?

chrome=1, jest zbędne - Chorme Frame umarł.

O.K zaraz poprawię.

Do ikon lepiej używać znacznika span niż i

O.K

Sposoby kontaktu(mowa o divie z numerami telefonu i e-mailem) można by wrzucić do jakiejś listy np. dl

Dlaczego tak? Co to da? A nawet jeśli to czemu definition list? To chyba jest przeznaczone jak nazwa wskazuje do definicji.

sam e-mail powinien być linkiem z href-em zawierającym mailto:twój@mail.pl.

Nie jestem przekonany czy to ma sens. To spowoduje uruchomienie domyślnego programu pocztowego np. outlook express. Osobiście już dawno nie spotkałem nikogo kto korzystałby z takich programów.

Menu powinno być oparte na liście ol/ul

Dlaczego? Chodzi o semantykę?

zamiast na mniejszych ekranach wyświetlać menu oparte na select, możesz ukryć menu zbudowane na liście ol/ul i dodać jakiegoś hamburgera, który będzie kontrolował pokazywanie tego menu.

Hmmm.....Chodzi Ci o to, że użytkownik nie będzie musiał klikać o 1 raz więcej? 1 raz aby rozwinąć selecta a potem aby wybrać odpowiednią opcję? Jeżeli tak to jest to jakiś argument, ale z kolei minusem takiego rozwiązania będzie to, że hamburger będzie zabierał więcej miejsca.

Brakuje atrybutu alt w większości obrazków, jeżeli nawet są to elementy dekorujące, powinny mieć pusty alt.

W sumie masz rację. Poprawię.

Brakuje mi paragrafów.

Dlaczego uważasz, że są niezbędne?

Pusty znacznik a, żadnej treści nie niesie ze sobą - dodatkowo brak aria-hidden.

Jak zatem stworzyłbyś klikalną ikonkę facebook'a przenoszącą do facebook'owego profilu?

Tutaj tez pusto.

Teraz pomyślałem sobie, że "O nas" mogłoby być wewnątrz divów ze zmieniającym się tłem. Spróbuję to zmienić.

type można zmienić na email.

Niby tak. Jednak walidacja e-maila poprzez ten element html według mnie jest niewystarczająca. Z tego co pamiętam sprawdzana jest tylko obecność znaku @. No to trochę mało, dlatego napisałem swój skrypt do sprawdzania.

Mało widoczny fokus np. na inputach w formularzu.

Żółte tło nie wystarcza?

no i jeszcze to stylizowanie po id nie pasuje

Co jest nie tak ze stylizowaniem po id?

komentarz 17 marca 2017 przez Artek Stary wyjadacz (11,800 p.)
przeniesione 18 marca 2017 przez Arkadiusz Waluk

Inputy powinny mieć etykiety(label).

A co jest nie tak z placeholder'em?

Warto również oznaczyć, które pola są obowiązkowe do wypełnienia.

W sumie tak.

Sposób weryfikacji(przepisywanie kodu z obrazka) jest niedostępny.

?? Czyli, że co? Obrazka nie widać? Nie można wpisać? U mnie wszystko działa...hmmm..

O to to. Rownież po samych znacznikach: footer a

A czemu jest to złe?

komentarz 17 marca 2017 przez imklau Nałogowiec (42,090 p.)

przeczytaj sobie dokumentację to dostaniesz odpowiedź na większość pytań ;)
podpowiem Ci tylko co do skryptów, że wstawienie ich na sam koniec body, da tyle że przeglądarka najpierw wczyta style i kod html, a później dopiero skrypt, dzięki czemu wczyta style i html wcześniej :P

komentarz 17 marca 2017 przez Pietrak Pasjonat (18,850 p.)

Odpowiedź na 99% tych pytań jest tutaj: http://tutorials.comandeer.pl/html5-blog.html

komentarz 17 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Przecież skrypty są wewnątrz

$(document).ready(function()
{

});

Co daje efekt który opisałaś.

Jaką dokumentację masz na myśli. Czytałem różne tutoriale i nadal zastanawiają mnie te uwagi.

komentarz 17 marca 2017 przez imklau Nałogowiec (42,090 p.)

na mdn jest sporo opisane, a i jak masz chęć to w3 możesz sobie czytać :P
ogólnie tam już wcześniej masz podany link do strony comandeera - sporo jest opisane, co i jak;)

komentarz 17 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Wygląda na spoko tutorial zaraz obczaję. Dzięki. :)

komentarz 17 marca 2017 przez xmentor Nałogowiec (49,520 p.)
edycja 17 marca 2017 przez xmentor

Skrypty(jQuery itp.) możesz przenieś na koniec ciała, tuż przed </body>.

Dlaczego? Co to da?

Ładowanie DOM-u nie będzie blokowane, skrypty zostaną wczytane na samym końcu.

Wydaje się, że meta z kodowaniem powinna być pierwsza.

Dlaczego?

A co jeśli zapragniesz do znacznika title dodać np. Strona główna? Wtedy chyba polskie znaki nie zostaną prawidłowo zinterpretowane.

Sposoby kontaktu(mowa o divie z numerami telefonu i e-mailem) można by wrzucić do jakiejś listy np. dl

Dlaczego tak? Co to da? A nawet jeśli to czemu definition list? To chyba jest przeznaczone jak nazwa wskazuje do definicji.

A da to, że będzie ładnie w kodzie i poprawnie semantycznie, dl jest listą opisową. Więc, na spokojnie możemy użyć do zdefiniowania listy kontaktów.

Telefon
  000 000 000
  111 111 1111
E-mail
  e@mail.pl

sam e-mail powinien być linkiem z href-em zawierającym mailto:twój@mail.pl.

Nie jestem przekonany czy to ma sens. To spowoduje uruchomienie domyślnego programu pocztowego np. outlook express. Osobiście już dawno nie spotkałem nikogo kto korzystałby z takich programów.

A ja używam, na telefonie. Szybkie i wygodne.

Menu powinno być oparte na liście ol/ul

Dlaczego? Chodzi o semantykę?

Tak.

zamiast na mniejszych ekranach wyświetlać menu oparte na select, możesz ukryć menu zbudowane na liście ol/ul i dodać jakiegoś hamburgera, który będzie kontrolował pokazywanie tego menu.

Hmmm.....Chodzi Ci o to, że użytkownik nie będzie musiał klikać o 1 raz więcej? 1 raz aby rozwinąć selecta a potem aby wybrać odpowiednią opcję? Jeżeli tak to jest to jakiś argument, ale z kolei minusem takiego rozwiązania będzie to, że hamburger będzie zabierał więcej miejsca.

Chodzi o to, że nie buduje się menu opartego na elemencie select(nie wiem w jaki sposób miałbyś przechodzić pomiędzy podstronami). Hamburger nie będzie wcale zabierał dużo miejsca, o ile nie będzie rozmiarów największego palca u stopy.

Brakuje mi paragrafów.

Dlaczego uważasz, że są niezbędne?

Tak już się przyjęło, że tekst powinno umieszczać się w paragrafach.

Pusty znacznik a, żadnej treści nie niesie ze sobą - dodatkowo brak aria-hidden.

Jak zatem stworzyłbyś klikalną ikonkę facebook'a przenoszącą do facebook'owego profilu?

Odwiedź nas na
<a href="link-do-fb">
  <span class="fa fa-facebook-square" aria-hidden="true"></span>
  <span class="visuallyhidden">Facebook-u</span>
</a>

Klasa visuallyhidden: https://github.com/h5bp/html5-boilerplate/blob/4ded8b5ce09d2b665e5893945b29d8d626691086/dist/css/main.css#L135-L145

Mało widoczny fokus np. na inputach w formularzu.

Żółte tło nie wystarcza?

Na stronie głównej miałem na myśli, a propos żółtego tła, mógłbyś zmienić czas przejścia na mniejszy.

no i jeszcze to stylizowanie po id nie pasuje

Co jest nie tak ze stylizowaniem po id?

https://forum.pasja-informatyki.pl/109776/html-class-czy-id

1	komentarz 17 marca 2017 przez Pietrak Pasjonat (18,850 p.) 1. Specyfikacja mówi, że palceholder nie zastępuje label. 3. Wywal tą captche, bo jest tragiczna i niedostępna. https://kornel.ski/pl/captcha 4. A gdy będziesz chciał dodać stopkę do artykułu, to też chcesz mieć tam inny styl?

komentarz 17 marca 2017 przez xmentor Nałogowiec (49,520 p.)

Inputy powinny mieć etykiety(label).

A co jest nie tak z placeholder'em?

Placeholder to nie etykieta, czytnik nie odczyta tego.

Sposób weryfikacji(przepisywanie kodu z obrazka) jest niedostępny.

?? Czyli, że co? Obrazka nie widać? Nie można wpisać? U mnie wszystko działa...hmmm..

Tak, u Ciebie, a jeżeli wejdzie osoba niedowidząca, korzystająca z czytnika? Może być gorzej ;)

komentarz 17 marca 2017 przez Kamil Naja Nałogowiec (27,410 p.)

"Osobiście już dawno nie spotkałem nikogo kto korzystałby z takich programów. " - bardzo dużo osób w firmach korzysta z klientów poczty, np Thunderbirda.

Strona ma paskudną typografię - litery są za duże i mają jakieś nienaturalne odstępy. Wyrównaj tekst do lewej. Oglądam ją na laptopie i tekst jest za szeroki, pomyśl sobie, jak będzie wyglądał na większym monitorze. Placeholder w formularzu na dole jest źle zastosowany.

Zamiast About-us i divów powyżej, powinieneś zrobić jeden div z tłem i napisem.

Menu główne na komórce nie ma formatowania i wygląda jak z Win 98 :)

Zerknij na zmiany, które zaproponowałem w skrinie

komentarz 17 marca 2017 przez Pietrak Pasjonat (18,850 p.)

Można również do mailto: dodać gmaila np.

komentarz 18 marca 2017 przez Artek Stary wyjadacz (11,800 p.)
przeniesione 18 marca 2017 przez Arkadiusz Waluk

Ładowanie DOM-u nie będzie blokowane, skrypty zostaną wczytane na samym końcu.

Akurat tutaj zupełnie się nie zgadzam. Umieszczenie kodu wewnątrz

$(document).ready(function()
{

});

Daje właśnie to, że skrypty są odpalane dopiero po załadowaniu się dokumentu. Z resztą jak sama nazwa wskazuje.

A co jeśli zapragniesz do znacznika title dodać np. Strona główna? Wtedy chyba polskie znaki nie zostaną prawidłowo zinterpretowane.

Nie zaszkodzi poprawić, jednak warto zaznaczyć, że

<meta charset="utf-8">

To tylko jeden z elementów algorytmu na podstawie którego przeglądarka ustala kodowanie znaków.

A da to, że będzie ładnie w kodzie i poprawnie semantycznie, dl jest listą opisową. Więc, na spokojnie możemy użyć do zdefiniowania listy kontaktów.

Jest to jakiś argument, ale jak dla mnie nie jest mocno przekonujący. No, ale o.k jak ma być ładne portfolio to można zmienić.

A ja używam, na telefonie. Szybkie i wygodne.

No dobrze. Jednak w tym miejscu należy podkreślić, iż nie można tak po prostu użyć "mailto:adres" z powodu żniwiarek polujących na adresy e-mail. Trzeba jakoś to zabezpieczyć.

Chodzi o to, że nie buduje się menu opartego na elemencie select(nie wiem w jaki sposób miałbyś przechodzić pomiędzy podstronami). Hamburger nie będzie wcale zabierał dużo miejsca, o ile nie będzie rozmiarów największego palca u stopy.

Już na paru stronach widziałem takie menu przy mniejszej szerokości okna. Może masz rację spróbuję, zrobić hamburgera i zobaczymy co z tego wyjdzie.

Tak już się przyjęło, że tekst powinno umieszczać się w paragrafach.

Mało przekonujący argument :)


Odwiedź nas na
<a href="link-do-fb">
  <span class="fa fa-facebook-square" aria-hidden="true"></span>
  <span class="visuallyhidden">Facebook-u</span>
</a>

Aha, no czyli chodzi o screen-reader'y. Czy coś jeszcze oprócz tego?

Na stronie głównej miałem na myśli, a propos żółtego tła, mógłbyś zmienić czas przejścia na mniejszy.

Na stronie głównej rzeczywiście możnaby uwidocznić focus. Co do transition - no cóż wydaje mi się, że to kwestia gustu.

https://forum.pasja-informatyki.pl/109776/html-class-czy-id

Zaraz porozkminiam

komentarz 18 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Jakiś pomysł dlaczego menu głowne na komórce nie ma formatowania?

komentarz 18 marca 2017 przez Pietrak Pasjonat (18,850 p.)

Bo jest selectem?

komentarz 18 marca 2017 przez xmentor Nałogowiec (49,520 p.)

Ładowanie DOM-u nie będzie blokowane, skrypty zostaną wczytane na samym końcu.

Akurat tutaj zupełnie się nie zgadzam.

A wyżej, nad tym skryptem masz podpiętą bibliotekę jQuery, która nie waży 10KB.

Chodzi o to, że nie buduje się menu opartego na elemencie select(nie wiem w jaki sposób miałbyś przechodzić pomiędzy podstronami). Hamburger nie będzie wcale zabierał dużo miejsca, o ile nie będzie rozmiarów największego palca u stopy.

Już na paru stronach widziałem takie menu przy mniejszej szerokości okna. [...]

Ja niestety nigdy się nie spotkałem, masz może jakiś link? Przechodzenie między stronami musiałoby być zaimplementowane w JS, więc słabe rozwiązanie.

Tak już się przyjęło, że tekst powinno umieszczać się w paragrafach.

Mało przekonujący argument :)

Akapity/paragrafy na stronie są tak ważne jak w wypracowaniu :)

Aha, no czyli chodzi o screen-reader'y. Czy coś jeszcze oprócz tego?

Tak, o to chodziło.

komentarz 19 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Ale nie wczytuje stylów czy po prostu nie podoba Ci się wygląd tego select'a? Jeżeli po prostu Ci się nie podoba to rozumiem, ale Win98 to chyba jednak przesada :)

komentarz 19 marca 2017 przez xmentor Nałogowiec (49,520 p.)

Stylowanie selecta jest mocno ograniczone, szczególnie tej części rozwijalnej - pogoogluj :)

komentarz 19 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Co do reszty uwag. Rzeczywiście na msdn rekomendują umieszczeni biblioteki jQuery i skryptów przed znacznikiem </body>. https://msdn.microsoft.com/pl-pl/library/samouczek-jquery--rozpocznij-prace.aspx

To zostanie poprawione.

Zastanawiam się tylko dlaczego nikt nie wpadł na to aby stworzyć screen-reader zdolny do odczytania atrybutu placeholder..

komentarz 21 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

A właśnie znalazłem całkiem spoko stronkę właśnie z selectem jako menu nawigacyjne.

Zastanawiam się czy rzeczywiście macie rację z tym aby tego nie używać w ten sposób...

http://polteknik.pl/pl/

komentarz 21 marca 2017 przez xmentor Nałogowiec (49,520 p.)

"Spoko"? Wystarczy zajrzeć w kod i już nie jest spoko.

Nie ma co się zastanawiać i po prostu zapomnieć o tym pomyśle.

odpowiedź 17 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

odpowiedź 17 marca 2017 przez Filius Gaduła (4,120 p.)

odpowiedź 17 marca 2017 przez jaca121212 Nałogowiec (40,760 p.)

►Warto zastosować https://css-tricks.com/the-current-state-of-telephone-links/

►fanpage możesz dać ciut większe albo zrobić tak jak tutaj na stronie fajnie to wygląda,

►popraw stronę kontakt nie jest estetyczny,

►także do menu możesz zastosować i nie tylko do menu https://css-tricks.com/bubble-point-tooltips-with-css3-jquery/

zamiast

<span id="e-mail" class="contact-info floated">nordteamservice@interia.pl</span>

użyj

https://css-tricks.com/snippets/html/mailto-links/

► mniejsza czcionka

odpowiedź 19 marca 2017 przez Artek Stary wyjadacz (11,800 p.)

Interesuje mnie tylko jeszcze jedna kwestia. Nadal nie rozumiem dlaczego stylowanie po id jest złe. Rozumiem na czym polega wspomniana "specyficzność" w css, ale nie rozumiem w czym problem.

komentarz 19 marca 2017 przez xmentor Nałogowiec (49,520 p.)

Linkowałem to już wczesniej i linkuje jeszcze raz: https://forum.pasja-informatyki.pl/109776/html-class-czy-id%C2%A0

Komentarze pod wypowiedziami też poczytaj.