Strona do oceny

Question

https://broja.pl/
Prosze mi dowalić :D

Answer 1

Ależ prosze bardzo:

• zły lang dla tagu html,
• <meta name="description" content="Firma zajmująca się pielęgnacją ogrodów, malowaniem różnych powieszchni, sprzątaniem oraz usługami studniarskimi. M.in. koszenie trawników, czyszczenie studni, przycinanie żywopłotów.">
• <a href="/">

Ciekawe zastosowanie, pierwszy raz się spotykam - do czego to służy?

• <h2 style="display: none">Nawigacja</h2> 

Źle to ukrywasz - poczytaj Why You Shouldn’t Use the CSS display:none Declaration

• po kodzie html widzę, że było dużo stylizowania po tagach, to złe ze względu na to, aby pamiętać że strona musi być skalowalna, ale każdy jej element jest niezależny - nie możem nadać stylów już z początku stworzonemu elementowi - jest to złe,
• czy te zajęcia to nie lista rzeczy, które wykonujecie? ewentulanie artykuł podzielony na sekcje
• outline ok
• do wstawiania wektorów typu svg mamy tag svg :)

Strona główna jest całkiem ok napisana, na mikroformatach się nie znam, więc się nie wypowiedziałem. Mimo wszystko to bardzo grząski grunt i łatwo o błędy.

Comments

1. Poprawione

2. No tu... brak słów... w nocy to robiłem, zmęczony byłem :P Poprawione

3. Dodatkowo warto linkować do / a nie do index.html.
http://forum.pasja-informatyki.pl/133008/strona-do-oceny-glownie-html-i-css
Tak mi  Comandeer zalecił :P

4. Wielkie dzięki o tym nie wiedziałem :D poprawione!

5. Tu nie dokońca rozumiem. Czyli powinieniem dodawać klasy i do tego się odwoływać?
No już zmieniać mi sie tego nie chce :P przy następnym projekcie

6. Tutaj no nie dokońca to przemyślałem... rzeczywiście zajęcia te można wypisać w formie listy bądź artykółów

7. :D

8.Wydaje mi się że mam to dobrze
http://caniuse.com/#feat=svg-img
tag svg jest użyty przy renderowaniu vektórów w źródłach.

Co do mikrodanych sam ich wole nie układać bo dokumentacja na ich temat jest bardzo nie jasna. Szukam odpowiedzi na różnych forach i dopiero je pisze, a najlepiej jest wzorować się już na gotowcach :P
Tu strona na której się wzorowałem
http://www.renaissanceeuropeanspa.com/

---

Na tej stronie nie ma mikroformatów, tylko mikrodane. Mikroformaty opierają się na wkładaniu odpowiednich danych do atrybutu [class].

Answer 2

Nie przyczepię się tak bardzo do kodu, tylko do wyglądu i działania strony. 

1. Korzystam z ekranu 1920-1080px i wydaje mi się, że jest trochę za dużo wolnego miejsca po bokach. Strona mogłaby się skalować w zależności od rozdzielczości z jakiej korzysta użytkownik strony.
2. Tło nagłówka aż się prosi, żeby mogło się poruszać. Poczytaj jak zastosować parallax design. Wtedy logo będzie bardziej widoczne, bo na razie się zlewa i nie przykuwa uwagi. Ewentualnie daj trochę inną grafikę lub tło, ramkę dookoła logo.
3. Trochę mi się nie podoba zakładka kontakt - Tak naprawdę stopkę widzę od razu, a fajnie by było, gdyby dane po kliknięciu w odnośnik, były bardziej u góry. Pamiętaj - wzrok użytkownika koncentruje się bardziej na górze ekranu. Po pierwszym kliknięciu myślałam, że odnośnik nie działa. 
   ​

Póki co, to tyle, jak coś jeszcze wypatrzę, to się odezwę.  

Comments

• Też mam ekran full HD i czasem natrafiam na strony które mają taki wąski content do tego czcionka jest mała. Nie widze problemu w użyciu w takich przypadkach powiększenia alt+scroll. Chociaż no mógłbym zrobić to automatycznie... (ale jestem leniem :P)
   
• Parallax, widziałem to. Dośc ciekawa sprawa napewno kiedyś poczytam o tym i sie naucze tego :D
  Co do tła to miałem inne propozycje ale klient uparł się na te -.-
• Niechciałem robić specjalnej podstrony dla tak małej ilości informacji... :/

Answer 3

• <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

  To dałbym do CSS, i type w HTML nie jest potrzebny

• Za dużo tych spanów ;)

To tyle na szybko, jak coś znajdę, to dopiszę ;)

Comments

• Zrobione
• Spanów tyle przez mikrodane :/ następnym razem użyje JSON LD

Answer 4

• Klasa .hide powinna raczej korzystać z lepszej wersji, czyli .visuallyhidden → http://a11yproject.com/posts/how-to-hide-content

• <meta itemprop="name" content="Prace ogrodowe">
  <h3><img class="icon" src="prace-ogrodowe.svg"  alt="Prace ogrodowe"></h3>

  osobiście zrobiłbym to tak:

  <h3 itemprop="name"><img class="icon" src="prace-ogrodowe.svg"  alt="Prace ogrodowe"></h3>

  Trzeba by było to przetestować, ale myślę, że Google da radę odczytać.

• Skoro do każdego kafelka masz nagłówek, to z każdego kafelka można zrobić spokojnie sekcję.

• Link do kontaktu nie zmienia adresu → http://codepen.io/Comandeer/pen/bEPbqg

• <div class="hide" itemprop="geo" itemscope itemtype="https://schema.org/GeoCoordinates">
                      <meta itemprop="latitude" content="50.232601">
                      <meta itemprop="longitude" content="18.777933">
                  </div>

  Tego typu elementy można w kulturalniejszy sposób zamieścić przy użyciu formatu JSON LD → https://developers.google.com/schemas/formats/json-ld

Comments

• Zmienione :)
• Tu mój pierwszy zamysł tak właśnie wyglądał, jednak google tester nie wychwycił atrybutu alt i nic nie wypisał przy name :( dlatego też dodałem tą nazwe przez meta.
• Poprawione
• Poprawione, dzięki za skrypt :D
• No w sumie racja, widziałem ten sposób ale nie chciało mi się tym bawić. Wydał mi się bardziej skomplikowany :d Przy natępnym projekcie zastosuje właśnie to

---

• Tu mój pierwszy zamysł tak właśnie wyglądał, jednak google tester nie wychwycił atrybutu alt i nic nie wypisał przy name :( dlatego też dodałem tą nazwe przez meta.

 

Faktycznie… Strasznie dziwne. Powinien wówczas wychwycić atrybut [alt] jako nazwę. Hm… 

No w sumie racja, widziałem ten sposób ale nie chciało mi się tym bawić. Wydał mi się bardziej skomplikowant 

Bo jest… ;) Ale dzięki niemu nie spamuje się kodu HTML setką bezsensownych meta. 

Answer 5

Choinka to drzewo bożonarodzeniowe, a nie drzewo iglaste.

Comments

oj tam oj tam

---

przyciananie, liwidacja - tym też radziłbym się zająć 

---

Dzięki :p