Ocena strony, opinie, ewentualna pomoc [ankieta]

pytanie zadane 4 kwietnia 2016 w HTML i CSS przez garyore Początkujący (370 p.)

Zauważyłem, że dużo ludzi prosi tutaj o ocenę swoich stron. Ze względu na to, że nie bardzo mam się do kogo zwrócić o taką ocenę, to też poproszę was. Z braku pomysłu standardowo zrobiłem portfolio. Krytykujcie wszystko co wam się nie podoba lub jest po prostu źle zrobione, im więcej konstruktywnej krytyki tym lepiej. Do tego dorzucam też ankietę, bo niektórym nie chce się rozpisywać, a kliknięcie zajmuje sekundę. Rozpisałem się nad pytaniem i zapomniałem o linku: http://cyron.pe.hu/

Możliwe odpowiedzi:

1/5 (0 głosów)

2/5 (2 głosów, 8%)

3/5 (12 głosów, 48%)

4/5 (10 głosów, 40%)

5/5 (1 głos, 4%)

10 odpowiedzi

odpowiedź 4 kwietnia 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)
edycja 4 kwietnia 2016 przez Arkadiusz Waluk

To my poprosilibyśmy o linka do tej strony żebyśmy mogli cokolwiek powiedzieć i ocenić ;)

To tak. Co do wyglądu to żadnym ekspertem nie jestem, powiem jak mi się widzi. Ogólnie samo ułożenie wszystkiego na stronie wydaje się spoko, ale nie podobają mi się te wszystkie kolory, za dużo ich. Raczej spotyka się, że na stronie występują określone pasujące do siebie barwy, a u Ciebie w każdej sekcji jest inny - mi się to nie klei i nie pasuje. Sporym problemem jest też brak responsywności - przynajmniej na mniejszych ekranach nie wygląda to dobrze.

Teraz trochę co do kodu.

<img src="zdj.jpg" />

Każdy obrazek musi mieć alt.

Stylizację lepiej robić po klasach, nie po id. Dziwnie też wygląda jak raz masz id przykładowo "about" a niżej widzę "gora" - proponowałbym się zdecydować na jeden język, najlepiej angielski.

<div class="underline"></div>

"Pusty element to niepotrzebny element" ~Comandeer

A i jeszcze nieco niewygodne jest menu - zrobił bym tak, aby przyciski dało się kliknąć na całej wysokości, nie tylko po najechaniu na napis.

Ogólnie według mnie nie jest źle, na pewno plus za użycie znaczników HTML5, ale kilka rzeczy bym poprawił. Zaznaczyłem w ankiecie 3/5 ;)

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

już link dodany, zapomniało mi się :D

komentarz 4 kwietnia 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Edytowałem odpowiedź i napisałem co sądzę.

komentarz 4 kwietnia 2016 przez Eimens Maniak (69,240 p.)

W tym wypadku <div class="underline"></div> Wcale nie jest zbędny, jest podkreśleniem, lepiej zrobić to za pomocą diva niż <hr />

1	komentarz 4 kwietnia 2016 przez Arkadiusz Waluk Ekspert (287,950 p.) PATYL, a żeby zrobić jakąś linię nie wystarczy odpowiednio użyć after/before? Poza tym akurat w tym przypadku widzę, że jest on dziwnie użyty. Nie ma żadnej wysokości ustalonej ani nic - w badaniu elementu dość dziwnie to widać.

komentarz 4 kwietnia 2016 przez Eimens Maniak (69,240 p.)

No to prawda zamiast podać border powinien ustawić height: 5px;, szerokość i dodać tło, a jeszcze lepiej jak mówisz zastosować after/before, ale nie zawsze można :p

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

Dzięki za ocenę. Kolorów nigdy nie ogarniałem, po prostu nie mam wyczucia w tym; responsywność będzie kiedyś w przyszłej wersji strony, kiedy trochę ogarnę ten temat, to z językiem, to przeoczenie; racja z tym divem dziwnie zrobiłem, ale jakoś nie miałem pomysłu jak to zrobić, popróbuję z użyciem after. Jeszcze raz dzięki za opinię :D

komentarz 4 kwietnia 2016 przez Łukasz Wasilewski Mądrala (5,190 p.)

Odnośnie kolorów, polecam poeksperymentować:

http://paletton.com/

komentarz 5 kwietnia 2016 przez garyore Początkujący (370 p.)

Korzystałem z tej strony, jak i z strony od Adobe, po prostu nie umiem łączyć dobrze kolorów

komentarz 5 kwietnia 2016 przez Łukasz Wasilewski Mądrala (5,190 p.)

No właśnie ta strona dobiera kolory które do siebie pasują. :)

komentarz 5 kwietnia 2016 przez garyore Początkujący (370 p.)

No wiem, ale jest do tego tyle opcji manipulacji tymi kolorami, że i tak komuś, kto nie umie ciężko jest dobrze dobrać

odpowiedź 4 kwietnia 2016 przez jpacanowski VIP (101,940 p.)
edycja 4 kwietnia 2016 przez jpacanowski

Strona fajna

coś jest nie tak z kolorem tła dla sekcji KONTAKT (mogę się mylić)
w nawigacji powinien być podświetlony link aktywnej sekcji (color: #fff)

<img src="zdj.jpg" />

Dodaj pusty atrybut [alt]

<p>Remigiusz Cyron</p>

To bym dał jako główny nagłówek strony, czyli <h1> :

<div id="underline"></div>

To bym usunął i zrobiłbym tą linię poprzez h1::after

<p>remigiusz.cyron@gmail.com</p>

Mail bym zakodował jeśli nie chcesz otrzymywać spamu
http://www.trzyw.pl/zabezpieczenie-emaila/
https://www.wpart.pl/ukrywanie-adresu-email-spam-botami/
http://www.labnol.org/internet/hide-email-address-web-pages/28364/

Dla header#gora usuń padding i dodaj:

    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

++++

1	komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.) Kolory to dla mnie czarna magia, za nic nie umiem ich dobierać :P dzięki za opinię i za css do headera

odpowiedź 4 kwietnia 2016 przez Eimens Maniak (69,240 p.)

No więc tak zaczynając od góry :)

<img src="zdj.jpg" />

Każda grafika na stronie powinna mieć wpisany alt.

ciężkie menu- cień pod nim jest słaby i nadaje złego wyglądu dla tego menu, ktoś juz przemyślał cienie na stronie www i polecam ci zapoznać się ze standardami google (link), text menu polecał bym wyjustować do prawej, wtedy strona wygląda lżej i bardziej nowocześnie,
tło na nagłówku, jak robisz już coś tego typu to fajnie by było żeby grafika sięgała dołu ekranu, jednostkami pionowymi są "vh", żeby wyśrodkować "Remigiusz Cyron" na środku ekranu nie musiałeś dodać paddingu, jest na to wiele innych - fajniejszych sposobów. Ja używam dla dla diva "container" display: flex; wraz z justify-content: center; a dla nagłówka, który ma być wyśrodkowany daj margin: auto;, nagłówek powinien się wyjustować w pionie i poziomie, pamiętaj tylko żeby dla rodzica dać konkretne wymiary, żeby wiedział jak ma wyjustować obiekt w środku. + poprawił bym obramowanie tego nagłówka.
"o mnie" grafika - zastosuj tam cienie z linka, który podesłałem i zobacz jak to będzie wyglądało (obstawiam że dużo lepiej),
"kontakt" - wielkość i kolor ikon pozostawia wiele do rzeczenia,
Brak favicony,

<meta name="viewport" content="width=device-width, initial-scale=1"> brakowało mi tego w sekcji <head>, co to robi? (link)

kolorystyka (link),
No i ostatnie co by zmienił to twoje zdjęcie, nie czepiam się twojego wyglądu tylko jakości i typu zdjęcia. Na stronie nie powinno być zdjęcie typu "selfie" z odbijającą się lampą w tle i pokojem, postaraj sb zrobić ładne zdjęcie z dobrym tłem i oświetleniem. :p

komentarz 4 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

Tak, dla header#gora usuń padding i dodaj:

height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;

komentarz 4 kwietnia 2016 przez Eimens Maniak (69,240 p.)

Za wszelką cenę nie chciałem dawać gotowca...

1	komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.) Kolorystyka u mnie leży, to wiem; dzięki za podpowiedzi z wyśrodkowaniem, nie znałem tego, o cieniach poczytam, a zdjęcie jest tylko tak w ramach testu. Dzięki za opinię :D

odpowiedź 4 kwietnia 2016 przez radek024 Szeryf (77,160 p.)

Na co wskazuje walidator: https://validator.w3.org/nu/?doc=http%3A%2F%2Fcyron.pe.hu%2F&showoutline=yes

100% obrazków na stronie nie posiada artybutu alt(sic!), strona nie jest w pełni responsywna, nie jestem pewien co do atrybutu lang dla tagu html - treść chyba nie dokońca jest polska ;) Stylizujesz po tagach, co jest nie zalecane. Używasz też ID do stylizowania, co jest raczej niezalecane - http://forum.pasja-informatyki.pl/109861/ocena-strony?show=109862#a109862 . Można też dowalić się nazwy id scrollującego do góry strony - jest po polsku, ale reszt a w jezyku angielskim/

font-family: 'Roboto';

Co jeżeli plik od google'a nie załaduje się? Powinieneś dopisać odpowieni styl czcionek(tutaj chyba będzie sans-serif, ale pewny nie jestem).

komentarz 4 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

font-family: 'Roboto', sans-serif;

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

O altach to mam w każdym komentarzu już, teraz się nauczę, żeby je wstawiać :D Responsywna będzie kolejna wersja, kiedy nauczę się to robić, co do polskiej nazwy tego id, to przeoczenie, chciałem zmienić, a później zapomniałem. A co do stylizowania po tagach, to czytałem gdzieś, że właśnie tak się robi, że należy unikać nadawania pełno class do stylizacji CSS. W każdym razie dzięki za opinię :D

komentarz 4 kwietnia 2016 przez radek024 Szeryf (77,160 p.)

tak się robi, że należy unikać nadawania pełno class do stylizacji CSS

BEM właśnie przestał istnieć ;)

komentarz 4 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

http://webroad.pl/html5-css3/2746-block-element-modifier-w-css

http://forum.pasja-informatyki.pl/36252/kilka-pytan-o-frontend-responsywne-strony-i-nauka?show=36256#c36256

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

Przyznam się, że pierwszy raz o tym słyszę,ale to pokazuje tylko ile jest różnych szkół pisania stron. Dosłownie może miesiąc temu czytałem, że w HTML5 i CSS3 należy unikać nadawania każdemu elementowi klasy, żeby go sformatować w CSS, bo po to właśnie CSS oferuje selektory potomków, dzieci, itp, aby z nich korzystać. I tak dochodzę do wniosku, że to chyba jednak zależy tylko od tego, jak komu wygodniej.

odpowiedź 4 kwietnia 2016 przez saliwan22 Gaduła (3,110 p.)

Witaj!

Ja wypowiem się na temat dsignu:

na towim miejscu zrobiłbym wyraźniejszy kolor hoveru w górnym menu
polecam trochę inaczej dobrać kolory
dobrze by było gdyby stopka albo miała ten sam kolor co górne menu albo jakiś delikatny kolor (pamiętaj stopka na stronie nie jest najważniejsza nie ma co jej tak eksponować)
za dużo kolorów czcionek
wycentrował bym cały tekst

Co do designu to tyle.

A co do kodu to wrzuć sobie może to do walidatora kodu html i css

Pozdrawiam!

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

Ten hover właśnie chciałem taki dać, ale pomyślę; ogólnie to wiem, ze kolorystyka leży, stopka ma ten sam kolor, a tekst mam wycentrowany lub większe partie wyjustowane.

komentarz 4 kwietnia 2016 przez saliwan22 Gaduła (3,110 p.)

Właśnie mi chodzi żeby ten co jest wyjustowany żeby był wyśrodkowany a ta stopka wydaje mi się że ma inny kolor ale może to zmęczone oczy...

Życzę miłego kodowania

odpowiedź 4 kwietnia 2016 przez Comandeer Guru (601,590 p.)

A czemu jak kliknę link to się adres nie zmienia? http://codepen.io/Comandeer/pen/bEPbqg

Dodatkowo kotwice powinny być w języku strony, a więc po polsku.

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

Nie mam pojęcia, a kotwice zmienię. Dzięki za opinię :D

odpowiedź 4 kwietnia 2016 przez R.orlinski Mądrala (5,490 p.)

Ja bym zmienił kolor nawigacji, bo trochę kłuje w oczy. :P

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

Wezmę pod uwagę

odpowiedź 4 kwietnia 2016 przez niezalogowany

<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="fontello/css/fontello.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700|Cinzel&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

type="text/css" <- niepotrzebne
wszystkie & zamień na &amp;
oraz | na |

Tutaj plus za połączenie fontów.

```
<a href="#gora"><i class="icon-up-circle" id="scrollUp"></i></a>
```
Przydałoby się, żeby linki miały treść. Jeśli nie chcesz pokazywać jej ze względów wizualnych, ukryj ją CSSem
Menu OK. Chociaż można rozwiązać problem bez tych id.
Po kliknięciu w dany element menu powinien zmieniać się adres strony. Na przykład http://cyron.pe.hu/#oferta. Kotwice na polskiej stronie powinny być po polsku.
```
<header id="gora">
    <div id="logo">
        <p>Remigiusz Cyron</p>
        <div id="underline"></div>
        <p>Projektowanie stron internetowych</p>
    </div>
</header>
```
Brakuje nagłówka najwyższego poziomu. Powinien nim być na tej stronie <p>Remigiusz Cyron</p>
<div id="underline"></div> Pusty div to niepotrzebny div. Podkreślenie można zrobić używając pseudoklasy ::after w CSS.
```
<img src="zdj.jpg" />
```
Pojedynczych tagów nie trzeba zamykać. <img>
Każdy element img musi mieć atrybut alt

	<section id="about">
		<article>
			<h2>O mnie</h2>
			<img src="zdj.jpg" />
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet velit reprehenderit, facilis fugiat saepe repudiandae dolorum dolorem incidunt tenetur ipsum, quidem natus, dignissimos recusandae totam, iusto provident hic adipisci iste!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
	</section>

Pakowanie tego jeszcze w article jest co najmniej zbędne, o ile nie błędne.

```
<a href="http://facebook.pl" target="_blank"><i class="icon-facebook-squared"></i></a>
```
Nie tworzymy pustych linków, to już pisałem, ale sprawą tutaj jest z target _blank.. kto was tego uczy? polecam lekturę Bezcelowy target oraz When to use target=”_blank”.
Co do całej sekcji kontakt, jakby Comandeer mógł się wypowiedzieć, to by było super. Sam z chęcią przeczytam.
Zoptymalizuj obraz tła, można ważyć znacznie mniej, nie tracąc widocznie na jakości.
Kolorystka Kontaktu i Stopki troszkę.. nie pasuje...
Plus za skrypty na końcu body,
Plus za próby używania semantycznego kodu,
CSSa i JSa nie oceniałem, ważne, że nie mieszają się z HTMLem - tu znów plus.

Ogólnie nie jest źle - 3/5, może nawet 4 na zachętę : ) wystarczy kilka poprawek i jest super.

komentarz 4 kwietnia 2016 przez garyore Początkujący (370 p.)

Dzięki za opinię, postaram się wszystko poprawić :D

komentarz 4 kwietnia 2016 przez niezalogowany

Trzymam za słowo : )

komentarz 4 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

Zoptymalizuj obraz tła, można ważyć znacznie mniej, nie tracąc widocznie na jakości.

Tu masz wersję 1920x1080 (HD), rozmiar 205 KB ;)

https://www.livecoding.tv/media/livestream_splashscreen/15/06/download.jpg

odpowiedź 4 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

odpowiedź 4 kwietnia 2016 przez Tom_Ja Dyskutant (7,970 p.)

Co do wyglądu - lepiej, niż u wielu innych osób, które przysyłają linki do oceny.

Co zmienić? Kolory tła i dwie ikonki na dole.

Reszta wyglądu całkiem ok.