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

Ocena strony ,,Wizytówka"

VPS Starter Arubacloud
+3 głosów
816 wizyt
pytanie zadane 26 sierpnia 2016 w HTML i CSS przez Snejker Nowicjusz (160 p.)

Cześć,

Witam widziałem już naprawdę sporo pytań o ocenę stron ale mam nadzieje że to kolejne pytanie z wielu nie przyprawi was o palpitacje serca ;) 

Chciałbym żebyście rzucili doświadczonym okiem na moją ćwiczeniową stronę, i może nawet agresywnie ale pokazali mi gdzie popełniam błędy.

Link do strony: http://sh200540.website.pl/Ciacho/index.php

Pozdrawiam.

komentarz 26 sierpnia 2016 przez Kamil Czech Dyskutant (7,700 p.)
spoko
komentarz 27 sierpnia 2016 przez Pietrak Pasjonat (18,850 p.)
Aż się prosi by użyc microdata
komentarz 28 sierpnia 2016 przez 123skiper Bywalec (2,170 p.)

W stylu .ka bez :hover też dodaj transition, aby po zjechaniu myszką z tego linku, pojawiła się animacja cofania :)

10 odpowiedzi

+5 głosów
odpowiedź 27 sierpnia 2016 przez IBB Gaduła (3,020 p.)

To ja od siebie jeszcze dodam:

  • tytuły wszystkich stron są identyczne:
    <title>Cukiernia Ciacho Radom</title>
    Każda strona powinna mieć unikatowy tytuł, np. ("Oferta - Cukiernia Ciacho Radom")
  • odstępy pomiędzy poszczególnymi elementami strony powinno się tworzyć przy pomocy CSS (padding, margin...), nie tagu <br>
  • bardzo mało semantycznych elementów. Większość tekstu została umieszczona bezpośrednio w divach - paragrafy, listy itd. muszą zostać oznaczone przy pomocy odpowiednich elementów HTML
  • zbyt słaby kontrast pomiędzy tekstem linków w głównym menu a tłem
  • przycisk kontrolujący menu na urządzeniach mobilnych nie ma etykiety ani odpowiednich atrybutów ARIA - jego cel i działanie będą kompletną zagadką dla osób niewidomych i słabowidzących 
    <button data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle" type="button">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span> 
     </button>
    
  • menu powinno być umieszczone w kodzie bezpośrednio za kontrolującym go elementem (przyciskiem pokaż / schowaj opisanym powyżej). Obecnie oddzielone jest od menu logo, co powoduje nielogiczną kolejność fokusa klawiatury
  • gdy JavaScript jest wyłączone, menu powinno być rozwinięte, a przycisku być nie powinno (bo skoro nie działa, to jest zbędny)
  • obrazki mają nieprawidłowe / niepotrzebne opisy. Np. obrazek zawierający tekst "Cukiernia Ciacho" został opisany jako "radom,cukiernia". Atrybut alt tego obrazka powinien być taki sam, jak zawarty w obrazku tekst. A z kolei większość obrazków na stronie "Nasza oferta" ma identyczny opis, jak poprzedzający je tekst - niepotrzebne powtórzenie
  • strona "Oferta": przy 'tabletowej' szerokości okna przeglądarki obrazki w górnym rzędzie nachodzą na siebie i prawą krawędź. Są też nierówne (inne szerokości i wysokości)
  • link 'Facebook" w zdaniu "Więcej naszych wyrobów możecie Państwo zobaczyć na naszym fanpage Facebook" na stronie "Nasza oferta"powinien być lepiej wyróżniony od normalnego tekstu. Osoby, które mają problemy z rozróżnianiem kolorów, nie zauważą, że jest to link (różnica kontrastu pomiędzy brązowym tekstem a niebieskim tekstem jest zbyt mała). Albo zwiększ różnicę w kontraście do przynajmniej 3:1, albo dodaj inne rozróżnienie wizualne, które będzie identyfikować ten link - underline, border, itp.
  • tekst "Zapraszamy na nasz fanpage" na stronie Kontakt nie powinien być oznaczony jako nagłówek 3 poziomu.
  • pod tym tekstem znajduje się niewidoczny, pozbawiony tekstu link (?)
  • muszę Ci podziękować za sekcję Kontakt :) Szukałam ostatnio przykładu konkretnego błędu związanego z nieprawidłową kolejnością treści i natrafiłam na niego właśnie tam. Chodzi o kolejność, w jakiej zamieszczone są informacje na temat adresów, godzin otwarcia itd. Na pierwszy rzut oka (gdy okno przeglądarki jest > 768px), wszystko wygląda ok. W kolumnie po lewej stronie wyświetlone są adresy sklepów, w środkowej kolumnie ich godziny otwarcia, a w prawej kolumnie nr telefonów. Tyle tylko, że w kodzie nie istnieje żaden związek pomiędzy tymi poszczególnymi elementami (np. element zawierający adres Traugutta 7 jest kompletnie niezależny od elementu zawierającego godziny otwarcia tego sklepu - 7:30-16:00). Jak można zobaczyć na mniejszych urządzeniach (gdy to wszystkie 3 kolumny są wyświetlone jedna pod drugą), w kodzie strony najpierw wymienione są wszystkie adresy, potem wymienione są wszystkie godziny otwarcia, a potem numery telefonów. To nie ma sensu. Nie ma żadnej wskazówki, które godziny otwarcia odnoszą się do którego sklepu. Jeśli przyjrzysz się tej sekcji na większych urządzeniach, to powinieneś zauważyć, że są to tak naprawdę dane tabularne: tabela o 4 wierszach i 3 kolumnach. Umieszczenie tych danych w prawidłowo oznaczonej tabeli nada im logiczną strukturę i pozwoli użytkownikom (zwłaszcza niewidomym) na zrozumienie związków pomiędzy poszczególnymi elementami 
  • jak na tak prostą stronę (to nie złośliwość, lubię proste strony i tego typu strona-wizytówka powinna być prosta), trochę sporo "waży", i czas ładowania nie jest najlepszy. Spójrz np. na stronę "Nasza oferta" - 2.6MB. Zoptymalizuj obrazki i zmniejsz je - nie ma potrzeby pobierać obrazki ok. 1000px na 1000px, jeśli ich max szerokość na stronie jest ustawiona na pi razy oko 200px
  • dlaczego używasz "bootstrap.css" "boostrap.min.css"?
  • dlaczego używasz jquery 1.9.1 1.12.4?
komentarz 27 sierpnia 2016 przez Snejker Nowicjusz (160 p.)
Dzięki wielkie za wszystkie uwagi, całkiem niezła lektura dla mnie więc postaram się zawsze brać pod uwagę by nie popełniać błędów ponownie.
Wiem że optymalizacja strony to podstawa sam zauważyłem problem ładowania ale mimo to wstawiłem taka wersje, licząc własnie na takie komentarze jak ten.

Jeśli chodzi o bootstrap i jquery to moje grube niedopatrzenie :/

Dzięki raz jeszcze za poświęcony czas.

Pozdrawiam
+3 głosów
odpowiedź 26 sierpnia 2016 przez niezalogowany
Wygląd super.

Od strony programistycznej zrobiłbym to w czystym html5+css3

mimo wszystko jest ok
+2 głosów
odpowiedź 26 sierpnia 2016 przez Czort Nałogowiec (32,500 p.)
Moje 3 grosze.

Jeśli chodzi o wygląd:

- przy takiej ilości treści przyklejane menu jest zbędne moim zdaniem

- nie podoba mi się efekt :hover na pozycjach menu (kwestia gustu pewnie)

- na stronie głównej i "O nas" treść powinna być rozciągnięta na całą wysokość - tak to u mnie wygląda http://i.imgur.com/zthnv51.png - moim zdaniem ta przestrzeń pod div z treścią niezbyt dobrze wygląda

- zamiast napisu "Cukiernia Ciacho" moim zdaniem jakieś pomysłowe logo w .png albo jeszcze lepiej w .svg byłoby ciekawsze

Co do kodu to bez głębszego wnikania:

- skrypty przydałoby się ładować na koniec body, szczególnie takie kobyły jak bootstrap i jquery

- zminifikować pliki css i połączyć w jeden + dużo zbędnych znaczników css (np. nieużywane animacje w animate.css)

- większość tych div można spokojnie zastąpić elementami html5

- <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" /> - trochę słabe, poza tym meta tagi nie potrzebują domknięcia />
1
komentarz 26 sierpnia 2016 przez manjaro Nałogowiec (37,390 p.)

Strona chyba robiona na telefonie bo na dużym monitorze wszystko rozjechane po kątach wygląda bardzo słabo. Ładne jest tylko tło. Czcionka z opisem zdecydowanie za mała. Menu po prawej również nie zauważyłem dopóki nie przeczytałem że w ogóle ono jest. Tak to wygląda u mnie

komentarz 27 sierpnia 2016 przez Snejker Nowicjusz (160 p.)
Dzięki wielkie za uwagi na pewno przydadzą mi się na przyszłość. Co do meta tagów to jest taka moja wersja robocza. Dzięki raz jeszcze za poświęcony czas. Pozdrawiam.
+1 głos
odpowiedź 26 sierpnia 2016 przez james30k Bywalec (2,260 p.)
Według mnie nawigacja strony powinna się ciut bardziej trzymać środka, a poza tym dobrze dobrany motyw i rozmieszczenie poszczególnych rzeczy na stronie.
0 głosów
odpowiedź 26 sierpnia 2016 przez Damian11131 Stary wyjadacz (13,490 p.)

Mi się podoba (wygląd, bo HTML i CSS zbyt dobrze nie znam, więc nie wypowiadam się na ten temat) wink

0 głosów
odpowiedź 26 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

W "kontakcie" przeciwnie do "oferty" jest takie cos: 

kartka nie jest doprowadzona do końca, a lepiej by to wyglądało jakby dotykała końca. 

0 głosów
odpowiedź 26 sierpnia 2016 przez Kratos133 Początkujący (460 p.)
Nawigacja jest zbyt jasna, z początku jej wogóle nie zauważyłem, treść napisu na środku w połowie zniechęca do zaprzestania czytania. Logo jest zbyt podobne do nawigacji, logo facebook nie wygląda dobrze dla oka, napis serdecznie witamy należałoby wyróżnić. Podoba mi się tło oraz logo, kolorystycznie też jest okej.
0 głosów
odpowiedź 26 sierpnia 2016 przez mbabane Szeryf (79,280 p.)
Wedlug mnie bardzo dobrze dobrane kolory,

U mnie tlo bardzo dlugo sie laduje, pewnie dalo by rade jakos sprytnie wyciac mniejszy kwadracik i zastosowac standardowe ustawienie w css ktore powiela obrazek. Przez dluzsza chwile musialem szukac nawigacji.
1
komentarz 26 sierpnia 2016 przez Czort Nałogowiec (32,500 p.)
edycja 26 sierpnia 2016 przez Czort

Faktycznie 1MB to sporo jak na byle jaki obrazek:)

Edit: Proste cięcie w gimpie i zostało 170 kB smiley - http://i.imgur.com/Dy36Vdb.png

0 głosów
odpowiedź 27 sierpnia 2016 przez pietia213 Dyskutant (8,110 p.)
Pomimo tego, że jest to strona wizytówka to przydał by się formularz kontaktowy w sekcji kontakt. Co do oferty to zdjęcia albo po kliknięciu aby się powiększały albo pokaz slajdów zamieścić, tyle ode mnie, strona jak na wizytówkę bardzo  i dobrze się prezentująca. Pozdrawiam.
0 głosów
odpowiedź 27 sierpnia 2016 przez Eimens Maniak (69,240 p.)
  • menu na telefonie zbyt przeźroczyste, 
  • menu na komputerze, nie podoba mi się efekt po najechaniu kursorem, proponuję samą zmianę koloru bądź podkreślenie, 
  • Jeżeli chodzi o box-shadow [kliknij tutaj],
  • zerknij jak wygląda strona na iPad, główny container jest delikatnie przysłonięty górnym menu, które swoją drogą przeskoczyło do nowej linijki (na telefonie okej),
  • na większych monitorach główny container wyśrodkowałbym flexboxe'm,
  • border-radius ogranicz do max 4px (bynajmniej mnie to odpowiada),
  • brakuje nagłówków (h1, h2...),
  •  <br /> to jest amatorski sposób, dla elementu wyżej daj większy padding/margines,
  • semantyka leży :/ 
  •  

Ocena:

wygląd 6/10 (mój gust moja sprawa), 

kod średnio mi się podoba, jeszcze wiele przed tobą.  

Podobne pytania

+1 głos
5 odpowiedzi 617 wizyt
pytanie zadane 25 grudnia 2016 w HTML i CSS przez Mistrz0000000 Bywalec (2,780 p.)
0 głosów
2 odpowiedzi 307 wizyt
pytanie zadane 25 września 2016 w HTML i CSS przez zgrybus Pasjonat (24,860 p.)
0 głosów
4 odpowiedzi 449 wizyt
pytanie zadane 22 września 2016 w HTML i CSS przez KariK-02 Mądrala (6,030 p.)

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!

...