Ocena Strony

Question

Hej,

Stworzyłem stronę internetową poświęconą nauce języka japońskiego. To jest moja pierwsza strona jaką umieściłem w sieci, nie licząc kiedyś tam zrobionego, drobnego projektu w szkole. Całą stronę napisałem własnoręcznie za pomocą języka html, css i JavaScript. Jak Wam się podoba?

http://twoj-japonski.pl

Answer 1

Japońskiego się kiedyś uczyłem, ale kilkanaście stopni formalizmu, czy kilka rodzajów liczebników zależnie czy liczymy przedmioty, przedmioty podłóżne, ludzi itp. skutecznie mnie zniechęciło do dalszej nauki ;) Hiragana i Katakana to najmniejszy kłopot - no może Kanji też...

Ale ten tekst na tym białym tle, strasznie to irytujące... Oprócz Cookie alertu, daj jeszcze jeden alert czy wyrażają zgodę na psucie wzroku ;D

Nie jestem grafikiem, ale ocenię twój kod ;)

• Nie używasz innych nagłówków niż H1 - H1 powinien być jeden, ten główny nagłówek czyli nazwa strony, firmy, itp. Poczytaj o HTML5 Outline. http://tutorials.comandeer.pl/html5-blog.html#artykul-outline
• Brak jakiejkolwiek semantyki w kodzie, używasz same DIV'y.
• Nie używaj [id], a zamiast tego używaj [class] http://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109816#a109816

<ul>
					<a href="../index.html"><li class="menu">Witaj!</li></a>
					<a href="#container"><li class="menu">Dlaczego japoński?</li></a>
					<a href="o-jezyku.html"><li class="menu">O języku</li></a>
					<a href="podstawy-alfabetu.html"><li class="menu">Podstawy alfabetu</li></a>
					<a href="kana.html"><li class="menu">Kana - ćwiczenia</li></a>
					<a href="nauka-slowek.html"><li class="menu">Nauka słówek</li></a>
					<a href="roznosci.html"><li class="menu">Różności</li></a>
					<a href="kontakt.html"><li class="menu">Kontakt</li></a>
					<li class="menu"></li>
				</ul>

<a> powinno być w środku <li>, a nie tak jak teraz. Np. tak:

<li class="menu"><a href="../index.html">Witaj!</a></li>

<a href="https://www.facebook.com/twoj.japonski/" target="blank"><div class="socialf"><i class="demo-icon icon-facebook"></i></div></a>
				<a href="http://youtube.com" target="blank"><div class="socialg"><i class="demo-icon icon-youtube"></i></div></a>
				<a href="http://plus.google.com" target="blank"><div class="socialy"><i class="demo-icon icon-google-plus-circle"></i></div></a>

To powinno być najlepiej w formie listy np. ul[class="social"]. A jeśli chodzi o ikonki Fontello to zupełny brak Accessibility.

<img class="image1" src="../images/image3.jpg" alt="Ruchliwa ulica w Tokio"

Plus, za poprawne użycie [alt] - już się bałem że będzie [alt="zdjęcie"]... ;)

Polecam też przeczytać lekturę
http://tutorials.comandeer.pl/html5-blog.html

Comments

Wielkie dzięki za solidną porcję przydatnych linków i informacji :) Postaram się poprawić błędy. Mam tylko pytanie, o co chodzi z tym brakiem Accessibility?

A co do nauki japońskiego to nie ma co się zniechęcać. Najpierw solidnie trzeba się nauczyć podstaw, a potem dopiero wchodzić w takie szczegóły jak np. keigo, czyli te stopnie formalizmu :)

---

http://fontawesome.io/accessibility/

---

dzięki ;)

---

https://pl.wikipedia.org/wiki/Dost%C4%99pno%C5%9B%C4%87_(WWW)

---

Te zdjęcia tła bym zoptymalizował bo u mnie widać jak się doładowywują https://tinyjpg.com/

---

Dzięki za wszystkie komentarze i odpowiedzi, na prawdę są bardzo pomocne. Właśnie przebudowałem trochę stronę. Wiem że ciągle jest sporo do zrobienia, ale poprawiłem całość pod kontem html5. Wygląd i układ także zmieniłem, teraz wygląda moim zdaniem znacznie lepiej.

---

Podoba mi się teraz. Szkoda, że nie można drugi raz dać plusa ;D

Answer 2

Hej, na zrobiłem trochę poprawek i IMHO wygląda to bardziej przejrzyście.

1. Tło wrzuć na body.

2. Zmień czcionkę na jedną z zalecanych np. Roboto z Googla

3. Pod tekstem czyste tło, bez obrazków.

4. Z obrazkami zrób slider np. http://cssslider.com/wordpress-slideshow-32.html

Co do kodu to dużo pisać, ja oprócz tego co napisali inni dodam cytaty umieszczasz w <cite>.

Jeżeli już na samym początku dołączasz do body margines: !important, to żle świadczy o kodzie css.

H1 z nazwą strony powinien być też linkiem do strony głównej. 

I wiele innych. Poczytaj o początkach innych w dziale "Nasze projekty".

Comments

2. Zmień czcionkę na jedną z zalecanych np. Roboto z Googla

Mógłbyś mi podać listę zalecanych fontów?

---

Wow, po tych zmianach faktycznie wygląda to ciekawie. Dzięki za podpowiedzi ;)

---

Zalecane i polecane na forach o tematyce web desing. Mi polecił Roboto, ktoś kto dużej siedzi w web desingu właśnie na tym forum.

Answer 3

brak jakiejkolwiek semantyki, on click na buttonach więcej nie ma co sprawdzac.

Comments

ales go zmotywowal

---

Praktycznie w każdej stronie "do oceny" są te same błędy. Wystarczy przeczytać kilka postów i jestem pewien, że taki "onclick" w nieodpowiednim miejscu pojawił się kilka razy.

---

Możesz wyjaśnić co to jest "brak semantyki"? Nie jestem informatykiem, więc pytam.

---

brak stosowania htmla 5

---

Chodzi o używanie div'ów zamiast tych nowych elementów header, footer itd? I co stosować zamiast onclicka na buttonach?

---

eventListener, tak o to chodzi.

---

To inna sprawa. Nie mieszaj warstw ; )

---

ok, dzięki. Będę nad tym pracował

Answer 4

Sprawdzaniem na telefonie, więc może u mnie wygląda gorzej. Nie podoba mi się za bardzo ta strona, ale nie jest źle, takie 6/10

Comments

Dzięki za opinię. Na telefonie może faktycznie nie być idealnie. A co konkretnie byś chciał, żeby zostało zmienione?