Moje portfolio - szczera ocena! [ankieta]

Question

Cześć!

Chciałbym prosić o szczerą i profesjonalną opinię mojej strony WWW. Jestem dosyć początkującym coderem, więc prosiłbym o jakieś porady, wskazanie błędów itp. 

LINK : www.janmager.pl

Poniżej również ankieta do oceny:

Możliwe odpowiedzi:

6 (3 głosów, 7%)

5 (21 głosów, 46%)

4 (16 głosów, 35%)

3 (5 głosów, 11%)

2 (0 głosów)

1 (1 głos, 2%)

Answer 1

• Brak określenia języka strony (html[lang]).
• Deklaracja kodowania powinna być pierwsza w head.
• Nadpisujesz nową wersję jQuery starą.
• Ogranicz liczbę skryptów i arkuszy stylów, zwłaszcza dla czcionek (hint: Google Fonts umożliwia łączenie arkuszy dla wielu czcionek w jeden).
• Skrypty na koniec body → https://developer.yahoo.com/performance/rules.html#js_bottom
• http://janmager.pl/js/smoothScroll.js → poczytaj o scroll-behavior z CSS ;)

• <div class="black-top-belt"></div>
  <div class="ball-in-belt"></div>

• Pusty element = bezsensowny element. Zwłaszcza, że to można zrobić na pseudoelementach ::before, ::after.
• Serio potrzebujesz dwóch oddzielnych menu? IMO styknie ładnie ostylować jedno i będzie działać tu i tu.
• Nie podoba mi się wykorzystanie :checked do pokazywania menu. Mimo wszystko warto to zrobić na JS (zastosowanie checkboxa jest tutaj niesemantyczne).

• <center><img src="images/logo.png" style="margin-top: 11px;"></center>

• center wypadł w HTML 4. No i to powinien być klikalny nagłówek → http://www.webkrytyk.pl/krytyka/lexy.com.pl/#naglowki
• Co do obrazków: [alt]!!! Polecam jako lekturkę: https://www.w3.org/TR/html5/embedded-content-0.html#alt
• Co do logo: [alt] to nazwa strony (z racji tego, że to podlinkowany obrazek, więc tekst alternatywny musi odzwierciedlać przeznaczenie linku; jest także w nagłówku, więc powinien zawierać treść nagłówka).
• content swego czasu było w Shadow DOM, ale teraz nawet stamtąd wypadło… Chodziło Ci o main.

• <div class="cytat">
      <h3>KRÓTKO I NA TEMAT O MOJEJ O SOBIE:</h3>
      <h2>"Aktualnie w uczę się gimnazjum, interesuję się informatyką, w szerokim pojęciu, od bardzo dawna. Największą przyjemność sprawia mi programowanie i tworzenie prac graficznych. Poza tym lubię pobawić się gażdżetami i pogrzebać w komputerze."</h2>
      <h4>~ Jan Mager // Twórca</h4>
  </div>
  vs
  <h2>Krótko i na temat o sobie</h2>
  <blockquote class="cytat">
  	<p>Aktualnie w uczę się gimnazjum, interesuję się informatyką, w szerokim pojęciu, od bardzo dawna. Największą przyjemność sprawia mi programowanie i tworzenie prac graficznych. Poza tym lubię pobawić się gażdżetami i pogrzebać w komputerze.</p>
  	<cite>Jan Mager // Twórca</cite>
  </blockquote>
  Nagłówki tworzą szkielet treści, więc służą jako elementy nawigacyjne, dzielące stronę na sekcje. Stąd UŻYWA SIĘ ICH TYLKO JAKO FAKTYCZNE NAGŁÓWKI. A do reszty rzeczy używa się odpowiednich, semantycznych nagłówków. A dupsy graficzne wstawia jako pseudoelementy ::before, ::after.

• <img src="images/img-index.png" class="image-index">

  Tutaj powinien być pusty [alt].

• hr i h5 w stopce są bez sensu. hr zastąp przez border, a h5 – p.

• Socialki w stopce to lista.

• <a href="http://plus.google.com/+janmager"><img src="images/google.jpg" class="social-media-in-box"></a>

  Serio muszę strzelić serię o podstawach dostępności, bo te błędy są NON STOP POWTARZANE. Polecam ściągnąć sobie czytnik JAWS i "przeczytać" ten link (hint: nie przeczyta go tak, jakbyś sobie życzył).

• Akurat GA lepiej wstawiać w head, przed arkuszami stylów.

• <hr class="under-h1"><br>

  border + margin! Nie przerzucajmy prezentacji z powrotem do HTML-a.

• Slider semantycznie to lista. No i znów brak [alt].

• NIE KRZYCZ W TREŚCI! Od tego jest text-transform: uppercase w CSS.

• W skillsach masz section bez nagłówka.

• Te kółeczka z progressem należałoby ładnie opisać przez ARIA.

• Inna rzecz: co to znaczy "HTML 85%"? Bo IMO jeśli ktoś nie zna i nie stosuje zasad WCAG 2.0, to jego znajomość HTML-a jest na poziomie 10% (czyli samej składni).

• <div class="what" style="color: #f0f0f0;">'</div>

  Co to jest?

• Prace w portfolio to lista. No i PODLINKOWANE OBRAZKI MUSZĄ MIEĆ NIEPUSTY [alt]. Każdy obrazek z pustym [alt] jest pomijany jako prezentacyjny – stąd linki NIE MAJĄ TREŚCI.

• A prefiksów do box-shadow nie trzeba od 3 lat. Co najmniej.

• W formularzu przypiąłeś label w nicość.

• Polecam spojrzeć do konsoli, bo rzuca kilka błędów JS.

Rzeknę tak: skupiłeś się jedynie na prezentacji strony, lecz całkowicie pominąłeś semantykę i dostępność.

Comments

Dziękuję bardzo :)

---

1. scroll-behavior - działa tylko na firefoxie, warto o tym wspomnieć, ale nie żeby używać jako zamiennika

2. <img src="images/img-index.png" class="image-index">

   Tutaj powinien być pusty [alt].

   Dlaczego pusty alt ?

3. hr i h5 w stopce są bez sensu. hr zastąp przez border

   To fakt, lepiej tam użyć border. Ale dlaczego hr jest od razu bez sensu?

4. NIE KRZYCZ W TREŚCI! Od tego jest text-transform: uppercase w CSS.

   Ma to jakieś znaczenie w semantyce ? Poza tym, że łatwiej zmienić potem z dużych liter na małe

Nie wytykam Ci błędów, tylko po prostu chcę żebyś uzasadnił niektóre podpunkty.

 

Inna rzecz: co to znaczy "HTML 85%"? 

Mnie zastanawia także 95% Photoshopa.

Lepiej określić poziom na zasadzie podstawowy/zaawansowany/itp. bo te % biorą się znikąd, ale to już moje zdanie. 

---

scroll-behavior - działa tylko na firefoxie, warto o tym wspomnieć, ale nie żeby używać jako zamiennika

Owszem, dlatego mówię o polyfillu dla reszty. Chociaż widzę tutaj nie wspomniałem ;) http://codepen.io/Comandeer/pen/bEPbqg

Dlaczego pusty alt ?

Bo ten obrazek nie niesie żadnej treści – jest ozdobnikiem.

Ale dlaczego hr jest od razu bez sensu?

W tym kontekście! hr jest bardzo specyficznym tagiem, którego poprawne użycie to praktycznie jedynie oddzielenie dwóch partii tekstu różniących się tematycznie. Za specyfikacją:

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

 Ma to jakieś znaczenie w semantyce ? Poza tym, że łatwiej zmienić potem z dużych liter na małe

W semantyce raczej różnicy nie ma (chociaż jestem w stanie sobie wyobrazić niepoprawnie napisany czytnik ekranowy, który próbuje odczytać caps lock jako akronim ;)). Akurat ten punkt jest faktycznie poświęcony całkowicie prezentacji treści. Bo w gruncie rzeczy wielkość liter to już po części warstwa prezentacji (oczywiście nie przy akronimach czy nazwach własnych) – linki są pisane dużymi literami, bo "tak ładniej", nie z powodu tego, że to jakaś nazwa własna.

Nie wytykam Ci błędów, tylko po prostu chcę żebyś uzasadnił niektóre podpunkty.

I bardzo dobrze! Lubię jak ktoś kwestionuje moje słowa i zmusza mnie do myślenia. Dopóki nie hejtuje mnie tylko po to, żeby hejtować, to bardzo chętnie podyskutuję czemu sądzę tak a nie inaczej.

Lepiej określić poziom na zasadzie podstawowy/zaawansowany/itp. bo te % biorą się znikąd, ale to już moje zdanie. 

W sumie nie tylko Twoje ;) http://theworstportfolioever.com/

---

http://prntscr.com/a9wdks

Mnie zawsze ciekawi w jaki sposób to ludzie obliczają :d a później wychodzi inaczej. Lepiej chyba już napisać w czym się jest dobrym, rozbić to na jakieś podpunkty. Takie % nie mają żadnego odzwierciedlenia w rzeczywistości.

---

Dziękuję raz jeszcze za wszystkie porady, większość zmian juz jest wprowadzona na stronie :)

---

Comandeer napisałeś

• Deklaracja kodowania powinna być pierwsza w head.

Otóż ostatnio przy ocenie jakiejś tam strony, chciałem doczepić się do tego, że kodowanie powinno być właśnie na pierwszym miejscu. Żeby nie być gołosłownym, często linkuję do odpowiedniego fragmentu dokumentacji.. i tutaj.. jakie było moje zdziwienie, gdy okazuje się, że kodowanie jako pierwszy element head, nie jest obligatoryjne. 

W3C recommendation - charcter encoding declaration

• The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.

MDN <meta> charset attribute

• This  element represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>, <link>, <script>, <style> or <title>)."><meta> element must be inside the <head> element and within the 512 first bytes of the page, as some browsers only look at these first bytes before choosing a character set for the page.

Nie wiem jak było w tym przypadku, ale zapytam ogólnie.

Czy jeśli podczas oceny strony, deklaracja znajduje się w tych pierwszych 512 bajtach (ale nie jest pierwsza), powinno się wspomnieć o jej pierwszeństwie w head? Jeśli tak, to dlaczego?

---

IMO tak jest po prostu najlogiczniej.  W teorii dopóki nie wyśle się deklaracji kodowania, to przeglądarka parsuje stronę według swojego domyślnego kodowania, więc nie ma się pewności, czy polskie znaki będą poprawnie wyświetlone.

Praktyka natomiast jest taka, że ten znacznik i tak nie ma najmniejszego sensu, bo a) specyfikacja de facto nakazuje użycie UTF-8 wszędzie b) kodowanie i tak jest ustawione w nagłówku.

Czemu zatem tak naciskam na meta[charset] jako pierwsze w head? Bo tym sposobem jest się na 100% pewnym, że zawsze będzie w pierwszych 512 bajtach i poza tym sensownie jest najpierw zadeklarować sposób kodowania, a dopiero później cokolwiek wyświetlić. Tego typu rzeczy wymusza np. Bootstrap czy H5BP (wyjaśnienie).

---

Dzisiejsze przeglądarki (a nawet IE9) z tego co widzę radzą sobie całkiem dobrze, gdziekolwiek to kodowanie występuje. Niemniej jednak, pierwszeństwo meta[charset] ma sens i z taką argumentacją można krytykować inne jego pozycje.

Dzięki Comandeer!

Answer 2

• Scripty umieszczaj przed </body>
• Wywal smoothscrool, strona powinna się przewijać tak jak przeglądarka nakaże. Nie chce mi się sprawdzać, ale założę się, że na telefonach są z tym problemy
• Poczytaj o dublin core, bo obecny tam opis i słowa kluczowe już nic nie znaczą dla przeglądarek
• Warto też generować ikonki dla wszystkich urządzeń: http://realfavicongenerator.net/
• Co to za znaczniki <content>, <center>?
• Logo jest zawsze nagłówkiem h1 strony
• Tutaj jak się mylę to proszę o poprawienia: w menu opis powinien być wstawiony w <label>
• Od cytatów jest <blockquote> i od autora <cite>
• DOSTĘPNOŚĆ TRAGICZNA
  • Żaden img nie ma alt!!!
  • Żadna ikonka nie ma opisu!!!
• Dlaczego używasz nagłówka h5, jeżeli nie użyłeś nawet h1?
• Od tych kółek w umiejętnościach to są znaczniki progress
• Seria zamiast margin-top używasz <br>?
• Prace: jak coś jest odnośnikiem do innej strony lub etykiety na stronie to niech będzie, każdy inny klikalny element powinien być w <button>
• Źle użyte <label> w kontakt
• Po co tyle czcionek? Gdzie ty ich wszystkich używasz?
• Dziękuję, odstaniesz odpowiedź na nią w przeciągu 1-3 dni.
• Nie klikalny adres e-mail
• Wersja mobile nie wygląda w niektórych miejscach dobrze + dostałem poziomy scroolbar

Comments

Dziękuję bardzo! :) Czeka mnie długa noc poprawek ;) dzieki

---

Aktualnie w uczę się gimnazjum...

gażdżetami

Dwa byki na pierwszej stronie. Tak jak Pietrak napisał ten scroll jest strasznie irytujący - myślałem, że mi przeglądarka jakiejś zawiechy dostała.

---

• Tutaj jak się mylę to proszę o poprawienia: w menu opis powinien być wstawiony w <label>

A czemu? Przecież to nie formularz. 

---

Dodatkowo DC nie jest bezpośrednim zastępstwem dla jakichkolwiek metadanych. To po prostu międzynarodowy format opisu dokumentów.

---

Dlatego napisałem, że mogę się mylić. Ale jak to zaindeksuje google w obecnym stanie? Raczej słabo to będzie wyglądać na mapie stron, ale co tu zastosować? <dt><dd>?

Absolutnie nie mówię tu o zastąpieniu standardowych metadanych przez DC.

---

Raczej mapę strony osobno bym dodał ;) Google nie przywiązuje uwagi do treści linku, lecz do zawartości strony.

dl – można. Chociaż nie wiem, czy nie zrobiłbym tak:

<li>
	<a href="index.html">
		Start
		<span>początek przygody</span>						
	</a>					
</li>

 

---

Dziękuję raz jeszcze za wszystkie porady, większość zmian juz jest wprowadzona na stronie :)

Answer 3

"Aktualnie w uczę się gimnazjum," - chyba coś nie tak z tym zdaniem, myślę, że warto je poprawić.

Comments

Tak, tak wszystkie poprawki w weekend wejdą :)

Answer 4

szczera, nieprofesjonalnia opinia: strona wygląda b. dobrze, schludnie. propsy.

 

estetycznie - jak na poczatek - jest super. na semantyce się nie znam, wiec nie ocenie.