• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[Pierwsza strona] Proszę o wasze uwagi!

VPS Starter Arubacloud
+4 głosów
658 wizyt
pytanie zadane 31 sierpnia 2016 w Nasze projekty przez Marzena672 Nowicjusz (180 p.)
edycja 31 sierpnia 2016 przez Marzena672

Cześć,

przygotowałam dla znajomego pierwszą stronę w HTML (pierwsza komercyjna, wcześniej uczyłam się przez 2 lata)

Bardzo proszę o wasze uwagi, co myślicie : www.terminale-promocja.pl

Grafika została przygotowana przez inną osobę, więc bardziej zależy mi na ocenie czy dobrze wam działa na komórkach, tabletach itp.

komentarz 31 sierpnia 2016 przez HaKIM Szeryf (87,590 p.)
Nawet alt dla obrazków jest!

Hue Hue.

~ http://wbm-blog.pl/tpi/
komentarz 31 sierpnia 2016 przez Pietrak Pasjonat (18,850 p.)
Jak jest link do formularza to niech będzie do niego, a nie do strony głównej.

7 odpowiedzi

+4 głosów
odpowiedź 31 sierpnia 2016 przez Ivan Maniak (60,650 p.)
  • Nie stylizuj tagów. Stylizuj klasy. [header, footer] Problem pojawia się gdy mamy więcej np. header-ów na stronie,
  • Partnerzy w header, według mnie, powinni być listą.
  • Date "można" włożyć do <time> Na przykład "Oferta obowiązuje do 31 sierpnia 2016"
  • "Oczywiście formularz nie label, ale to chyba nikogo nie dziwi" - Comandeer. Nic dodać, nic ująć.
  • <center> przeszło już do historii. RiP center
  • NIP można spokojnie wsadzić do type=number. Skoro już dałaś pattern to dlaczego nie od razu number?
  • Nie mieszaj warstw ze sobą. W tym przypadku javascript i html. Coś takiego jak onkeypress nie powinno mieć swojego miejsca w html. Event-y dodajemy przez .addEventListener w JS.
  • Co do użycia <strong> to mógłbym tutaj się kłócić, ale nie jestem pewien. Więc napiszę tylko, że użyłbym <b>.
  • Kodowanie znaków powinno być przed tytułem, przed jakimkolwiek tekstem. Nie mogłem znaleźć sensownego źródła, które mogłoby to potwierdzić, ale ostatnio jeżeli się nie mylę to Comandeer też o tym pisał, a takiemu człowiekowi można zaufać :). Potraktuj to jako preferencja lub poszukaj jakiś informacji na ten temat.

I tak jest to, dobrze wykonana strona, pod względem innych, których oceniałem na tym forum. Chociaż wiem, że na tej stronie mogę załatwić sobie terminal, a nie tak jak na innych stronach, wchodzę i nie wiem co to za strona i "komu to potrzebne, a dlaczego" :)

komentarz 1 września 2016 przez Comandeer Guru (599,730 p.)

Kodowanie znaków powinno być przed tytułem, przed jakimkolwiek tekstem. Nie mogłem znaleźć sensownego źródła, które mogłoby to potwierdzić, ale ostatnio jeżeli się nie mylę to Comandeer też o tym pisał, a takiemu człowiekowi można zaufać :)

Nie ufaj mi, ufaj źródłu ;) 

komentarz 1 września 2016 przez Ivan Maniak (60,650 p.)
Za późno mi to powiedziałeś i już zaufałem.
Ale jeżeli tak mówisz to mam nadzieje, że w książce też będzie wiele źródeł ;)
+2 głosów
odpowiedź 1 września 2016 przez Comandeer Guru (599,730 p.)

Spory divitis jak na HTML5. Np. usługi widziałbym jako:

<article class="services">
    <h2 class="services__title">Usługi dodatkowe</h2>

    <section class="services__item">
        <div class="services__icon"><span class="helper"></span><img src="blocks/services/src/services_phone.png" alt=""></div>
        <h3 class="services__itemTitle">Doładowania telefonów</h3>
        […]
    </section>
</article>

Od razu zwrócę uwagę na fakt, że tutaj ikonki powinny mieć pusty [alt], bo są wyłącznie ozdobnikami (nie niosą żadnej dodatkowej wartości; ba, nagle [alt] po angielsku wyrwany z kontekstu jest IMO wręcz szkodliwy).

Deklaracja kodowania powinna być 1. w head (a przynajmniej PRZED jakimikolwiek wysłanymi danymi).

<div class="contact__icon"><img src="blocks/contact/src/phone.png" alt="Terminale Płatnicze" class="contact__image"></div>

Kolejna ikonka-ozdobnik, która powinna mieć pusty [alt].

Jeśli coś nie jest klikalne, nie powinno mieć łapki (jak obrazki partnerów).

Każde pole formularza powinno mieć label.

<i class="fa fa-angle-right"></i>

Brakuje [aria-hidden=true] → http://fontawesome.io/accessibility/

.services__icon > .helper można spokojnie zamienić na .services__icon::after (BTW dobry trick!).

Trochę za dużo JS-a wczytujesz. Połącz zasoby z bowera w jeden plik.

Focus na polach formularza jest niewidoczny – warto poprawić.

0 głosów
odpowiedź 31 sierpnia 2016 przez czmyk Obywatel (1,100 p.)
Jest ładna, cieżko uwierzyć że to twoja pierwsza strona, jedyne co to stopka duża, a pusta.
0 głosów
odpowiedź 31 sierpnia 2016 przez jpacanowski VIP (101,940 p.)
edycja 31 sierpnia 2016 przez jpacanowski

Czy na pewno ty to stworzyłaś? No nieźle... :)

Używasz BEM, od razu się to wrzuca w oczy, zminifikowany kod styli, wszystko ładnie. Podoba mi się walidacja danych już w HTML.

Przyczepiłbym się tylko do:

  • użycia tagu <center>
  • nie używasz etykiet dla pól formularza
  • używasz 2x nagłówka H1

Jak na pierwszą stronę daję 5/5...

0 głosów
odpowiedź 31 sierpnia 2016 przez Kamson Gaduła (4,280 p.)
Dobrze się wyświetla na laptopie i smartfonie.
0 głosów
odpowiedź 1 września 2016 przez manjaro Nałogowiec (37,390 p.)
Szczerze to strona wygląda bardzo profesjonalnie. Ale to zasługa designu. Tło i kolory dobrane wzorowo według mnie. Lepiej by tego nie szło zrobić. Widać tu rękę eksperta. Natomiast co do kodu się nie wypowiem bo nie mam takiej wiedzy żeby oceniać. Tak więc dla designera 6/6.
0 głosów
odpowiedź 1 września 2016 przez radek024 Szeryf (77,180 p.)
Nie mam dostępu do kodu, ale i tak coś jest nie tak ( ͡° ͜ʖ ͡°) https://i.imgur.com/1TbtIST.jpg
komentarz 1 września 2016 przez jpacanowski VIP (101,940 p.)

Napisz sobie klasę .h{1,2,3]-responsive
Naprawdę się przyda...

<h1 class="h1-responsive">...</h1>

Podobne pytania

0 głosów
6 odpowiedzi 474 wizyt
pytanie zadane 12 marca 2016 w Nasze projekty przez BleBlock Użytkownik (600 p.)
+3 głosów
4 odpowiedzi 327 wizyt
0 głosów
1 odpowiedź 362 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...