Strona do oceny głównie HTML i CSS

pytanie zadane 22 kwietnia 2016 w Nasze projekty przez BerdPL Obywatel (1,190 p.)

https://gazinstalacja.pl

Czy taka strona przejdzie ? xd
Pewnie zrobiłem tu jakieś karygodne błędy ale ja oczywiście ich nie widzę.
Jeśli ktośby mógł to proszę o wytknięcie mi błędów.

3 odpowiedzi

odpowiedź 22 kwietnia 2016 przez Comandeer Guru (607,960 p.)
wybrane 23 kwietnia 2016 przez BerdPL

Najlepsza

Coś za dużo keywordsów. IMO wgl bym ten tag pominął
```
<meta name="expires" content="0" />
```
Ten tag nie działa. Działa wyłączni jako nagłówek HTTP.
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
```
To powinien być nagłówek → https://github.com/CodersCommunity/CodeReview-HTML-01/tree/apache#poprawka

<meta name="google-site-verification" content="PeZS27cQtXrL9MP6JZyO8pV69avHrsjCPZ6zLAHq33g" />

Istnieją lepsze metody (weryfikacja po koncie GA albo po wpisie w DNS-ie).

```
<a href="index.html">
                    <img itemprop="https://schema.org/logo" src="http://www.gazinstalacja.pl/logo-GazInstalacja.svg"
                         title="Logo GazInstalacja">
                </a>
```
To powinien być główny nagłówek → http://www.webkrytyk.pl/krytyka/lexy-com-pl/#naglowki Dodatkowo warto linkować do / a nie do index.html. No i GDZIE JEST [alt] OBRAZKA? To, że to jest SVG, nic nie zmienia. [title] też jest bezsensowny, bo link nie prowadzi do logo tylko strony głównej. No i jak doda się poprawny [alt] i nagłówek, to wówczas odpada potrzeba robienia osobnego meta do nazwy firmy.
```
<h2 class="owner" itemprop="employee">Wojciech Skowroński</h2>
```
Właściciel != pracownik → http://schema.org/founder (jako założyciel). No i to jest podtytuł, zatem akapit, nie nagłówek → https://www.w3.org/TR/html5/common-idioms.html#sub-head

<div class="hGroupWraper">
    <h2>GazInstalacja</h2>
    <h1>naprawa, montaż oraz modernizacja<br/>instalacji domowych</h1>
</div>

Tutaj tego h1 nie powinno być. Zresztą jak z logo zrobimy nagłówek, to h2 tym bardziej. To są po prostu 2 akapity.

```
<a class="buttonReadMore">czytaj więcej</a>
```
Gdyby sekcje miały [id] w języku strony (po polsku), można byłoby po prostu do niej zalinkować i nie byłoby problemu z pustym linkiem.

<div class="partWraper" itemprop="hasOfferCatalog" itemscope itemtype="https://schema.org/OfferCatalog">
                    <section itemprop="itemListElement" itemscope itemtype="http://schema.org/OfferCatalog">
                        <h4 class="listHeading" >
                            Wykonujemy takie prace jak: <span itemprop="name">montaż</span>, <span itemprop="name">naprawa</span> oraz <span itemprop="name">modernizacja</span>
                        </h4>

Mikrodane są IMO źle wykorzystane. [itemprop=name] jest nazwą całego katalogu. W tym wypadku powinieneś użyć span[itemprop="itemListElement] z zagnieżdżonym span[itemtype="http://schema.org/Offer"]. Tak samo poszczególne elementy OfferCatalog powinny być raczej ofertami, nie – Service (chociaż Google to łyknął → https://developers.google.com/structured-data/testing-tool/ )

Czemu skrypt jest poza body?
Polecam spróbować sfocusować link "Czytaj więcej" z poziomu klawiatury. Nie da się z powodu braku [href]. Zgodnie ze specyfikacją HTML5, linki bez [href] to zaślepki, które nie są elementami interaktywnymi, a jedynie wskazują miejsce, w którym w przyszłości link może się pojawić (https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element → "If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents."). Tym samym ten element jest niedostępny!
Co prawda jest certyfikat SSL, ale połączenie nie jest bezpieczne z powodu przesyłu niezabezpieczonych zasobów (przeglądarka przed tym ostrzega!).

komentarz 22 kwietnia 2016 przez niezalogowany

Trochę offtopem

Czemu skrypt jest poza body?

dlaczego właściwie powinien być w body?

komentarz 22 kwietnia 2016 przez Comandeer Guru (607,960 p.)

Bo jeśli mamy head i body, to wszystkie inne tagi muszą być w nich.

komentarz 22 kwietnia 2016 przez niezalogowany

Rzeczywiście - w specyfikacji pod tagiem html występuje o tym notka.

komentarz 23 kwietnia 2016 przez BerdPL Obywatel (1,190 p.)

Dziękuje za ten komentarz poprawiłem większość z wymienionych błędów.

Content keywords pomniejszyłem ale nie usunąłem go bo wyczytałem gdzieś że wyszukiwarki takie jak na onet czy interia korzystają z keywords.

Wrzuciłem logo do h1 i dodałem do niego atrybut alt i zauważyłem że teraz alt jest brany jako content tego h1, dobrze rozumiem?
Widzę to po Outline:
https://validator.w3.org/nu/?showoutline=yes&doc=http%3A%2F%2Fwww.lexy.com.pl%2F
Dodatkowo Outline poprawiłem I wszystkie inne błędy naprawiłem.
Dziwne że w <address> nie może znajdowac się nagłówek z np z napisem "Kontakt"

Dodatkowo zmieniłem przycisk "czytaj więcej" na button bo:
a (hiperłącza) – służą do przechodzenia na inną podstronę
button (przycisk) – służy do wywołania określonej akcji
źródło: http://www.webkrytyk.pl/krytyka/lexy-com-pl/#naglowki
Mam nadzieje że może tak być

Jeśli chodzi o schema.org to wydaje mi się że wszystko jest dobrze zrobione.
Tworząc usługi sugerowałem się 1 przykładem z:
https://schema.org/LocalBusiness#examples

Z połączeniem bezpiecznym śmieszna sprawa wystarczyło zmienić
src="http://... na src="https://
:D

komentarz 23 kwietnia 2016 przez Comandeer Guru (607,960 p.)

Content keywords pomniejszyłem ale nie usunąłem go bo wyczytałem gdzieś że wyszukiwarki takie jak na onet czy interia korzystają z keywords.

Od lat te wyszukiwarki nie istnieją i korzystają z Google…

Wrzuciłem logo do h1 i dodałem do niego atrybut alt i zauważyłem że teraz alt jest brany jako content tego h1, dobrze rozumiem?

Tak.

Dziwne że w <address> nie może znajdowac się nagłówek z np z napisem "Kontakt"

Bo wszystko, co w address jest danymi kontaktowymi, dlatego nie może być tam nagłówka.

Dodatkowo zmieniłem przycisk "czytaj więcej" na button bo:
a (hiperłącza) – służą do przechodzenia na inną podstronę
button (przycisk) – służy do wywołania określonej akcji
źródło: http://www.webkrytyk.pl/krytyka/lexy-com-pl/#naglowki
Mam nadzieje że może tak być

Hm, nie, nie może. Przejście do innego miejsca na stronie to wciąż przejście, nie akcja. Zasada jest taka, że jeśli odsyłamy do innego miejsca na stronie, robimy linka. Tam w artykule jest ciut inna sytuacja, bo to był przycisk, który rozwijał ukryty element – a to jest akcja (bez JS element byłby po prostu rozwinięty).

Jeśli chodzi o schema.org to wydaje mi się że wszystko jest dobrze zrobione.
Tworząc usługi sugerowałem się 1 przykładem z:
https://schema.org/LocalBusiness#examples

Jednak zauważ, że tam też jest tylko jedno [itemprop=name]. Co prawda nie jest to niby błąd składniowy, ale tym sposobem nadajesz kilka usług samemu spisowi usług, a nie poszczególnym usługom.

odpowiedź 22 kwietnia 2016 przez niezalogowany
edycja 22 kwietnia 2016

No no... nieźle : ) pomijając outline dokumentu, to na stronie zostają tylko drobne niedociągnięcia

https://validator.w3.org/nu/?showoutline=yes&doc=https%3A%2F%2Fgazinstalacja.pl%2F

+ To jQuery wrzuć na koniec body - spowalnia renderowanie strony w miejscu, w którym aktualnie się znajduje. (No i jeszcze CSSa można by zminimalizować, pojedynczych tagów nie domyka się "/", type='text/css' jest niepotrzebne, ale to raczej mało ważne szczegóły)

Semantycznie? - jest
Czytelnie? - jest
Ładnie? - jest
RWD? - jest
Adres? - jest! jeden! i to jeszcze z certyfikatem!

PS Świetna animacja na starcie : )

@edit

- No już adres chwaliłem... a tu się pojawia odwołanie do www.* i to jeszcze bez szyfrowania.

Mixed Content: The page at 'https://gazinstalacja.pl/' was loaded over HTTPS, but requested an insecure image 'http://www.gazinstalacja.pl/logo-GazInstalacja.svg'. This content should also be served over HTTPS.

- CSS - wszystkie selektory poza body - powinny być na klasach.

odpowiedź 22 kwietnia 2016 przez radek024 Szeryf (77,160 p.)

Jest bardzo fajnie, aczkolwiek nie podoba się mi to co napisał Argentoo oraz jeszcze kilka rzeczy:

<a class="buttonReadMore">czytaj więcej</a>

Rozumiem, że link jest oparty na JS? A co, jeżeli nie mamy włączonej jego obsługi? Link jest pusty, tym samym jest bezużyteczny i wręcz szkodliwy - powinien mieć artybut href odnoszący się do odpowiedniego miejsca w stronie.

div o klasie .partWrapper mógłby być article
responsywność jest jak najbardziej OK, ale co z nazewnictwem? Jeżeli odpowiednio zmniejszę ekran przeglądarki, .leftPart już jest jedynym Partem na całej szerokości, a nie lewym ;)

Są jeszcze drobne błędy, ale ogółem na stronie jest poziom ;)

komentarz 22 kwietnia 2016 przez niezalogowany

Rozumiem, że link jest oparty na JS? A co, jeżeli nie mamy włączonej jego obsługi?

Jeśli nie masz, to nie działa, Zjeżdżasz 300px w dół i żaden content Cie nie omija. (Jeśli chodzi o składnię HTML.. to po prostu placeholder link, walidator nie krzyczy, ja nie zauważyłem - twórcy prawie udało się go przemycić - #RadekNaStraży : D )

Link jest pusty, tym samym jest bezużyteczny i wręcz szkodliwy

Nie jest pusty - ma tekst.

powinien mieć artybut href odnoszący się do odpowiedniego miejsca w stronie.

Ano powinien. Gdzieś tu miałem link do przykładu Comandeera... - tak to ma wyglądać - http://codepen.io/Comandeer/pen/bEPbqg

div o klasie .partWrapper mógłby być article

Raczej nie za bardzo - article MDN

responsywność jest jak najbardziej OK, ale co z nazewnictwem? Jeżeli odpowiednio zmniejszę ekran przeglądarki, .leftPart już jest jedynym Partem na całej szerokości, a nie lewym ;)

Zasadniczo, to tych klas mogłoby tam w ogóle nie być, ponieważ nic nie robią : d

(CSS słabo - stylizowanie po tagach.)