Opinie, sugestie - moja pierwsza strona w HTML i CSS

pytanie zadane 10 kwietnia 2016 w Nasze projekty przez Eliro Stary wyjadacz (12,160 p.)
edycja 10 kwietnia 2016 przez Comandeer

Powiedzcie co myślicie i co zmienilibyście w tej stronie. Chcąc uczyć się od bardziej doświadczonych, proszę was o wasze sugestie.

http://ingitro.netne.net/

5 odpowiedzi

odpowiedź 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)
wybrane 12 kwietnia 2016 przez Eliro

Najlepsza

Tak trochę stopka nie działa (nie jest u dołu strony, a ekranu).
Kodowanie znaków powinno być przed title → https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md#the-order-of-the-title-and-meta-tags
Iditis i divitis
#menu to lista
Logo MUSI mieć [alt] (ludzie, ale serio… weźcie CZYTAJCIE jakieś opinie na tym forum, bo już rzygam nieustannym powtarzaniem dokładnie tego samego. Przecież to nie ma sensu) → https://www.w3.org/TR/html5/embedded-content-0.html#alt
Logo powinno być głównym nagłówkiem → http://www.webkrytyk.pl/krytyka/lexy.com.pl/#naglowki
Menu (#logo-right) to jednak lista. No i mam nadzieję, że ostatecznie pozbędziesz się hashbangów.
```
<div style="clear: both;"></div>
```
http://www.forumweb.pl/porady-i-tutoriale-www/css-clearowanie-czyli-problemy-z-float,47914 lub http://nicolasgallagher.com/micro-clearfix-hack/
Obecne h3 po naprawieniu logo powinny być h2.
Ogólnie brakuje znaczników z HTML5: http://tutorials.comandeer.pl/html5-blog.html
Plus za to, że ozdobniki graficzne mają pusty [alt].
Ale minus za [align]! Od tego jest CSS.
```
<div class="header">News</div>
```
To są nagłówki
Tekst się wkłada w akapity, a nie wpycha w divy.
Źle używasz br – powinieneś użyć marginesów.
a[role=read]? To zwykły link.

komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)

Próbowałem użyć

.website-right img
{
align: left;
}

Ale nie chce zadziałać, więc wstawiłem align w znacznikach img, bo zależy mi na tym, żeby tekst był obok zdjęcia.

W logo zapomniałem dopisać alt, chociaż nie wiem po jaką cholere skoro to tylko opis alternatywny obrazka.

2	komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.) Powinieneś poczytać o float.

komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)

Sporo podałeś tu sugestii dotyczących poprawnego pisania. Nie wszystko dam radę poprawić, bo mam braki w wiedzy. Będę stopniowo poprawiał kod, ale tak poza tym, to doradzicie coś z grafiką? Chodzi o ten panel boczny.

PS: img poprawione

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

Ja raczej od spraw technicznych. Grafiki staram się nie dotykać ;)

odpowiedź 10 kwietnia 2016 przez niezalogowany

Podaj jakiś link ewentualnie źródła, po samym screenie nie da się wiele powiedzieć: strona może wyglądać ładnie, ale może być jednocześnie tragicznie napisana

1	komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.) edycja 10 kwietnia 2016 przez Eliro Więc proszę oceń grafikę. Fragmenty kodu źródłowego widziały osoby z tego forum, które mi pomagały. Nie po to tworzyłem stronę przez 2 dni, żeby mi teraz ktoś ją podkradł.

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

Yyy… lol? A jak ją wystawisz do Internetu, to co? Wtedy każdy wystarczy, że naciśnie Ctrl+S i BUM! ma Twoją stronę na dysku.

Serio, ze screena się nie da nic sensownego ocenić. Bo strony to jednak kod.

A od rozwiązywania sprawy podkradania jest system prawny – i tyle.

1	komentarz 10 kwietnia 2016 przez niezalogowany @Eliro Ciekawe podejście, w takim razie użytkownicy twoich stron będą oglądali jedynie obrazki aby nie mogli podejrzeć kodu? ^^ Rzuć okiem na inne oceny stron i zauważ że wygląd strony jest najmniej istotną częścią oceny, liczy się kod.

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

Nie po to tworzyłem stronę przez 2 dni, żeby mi teraz ktoś ją podkradł.

index.JPG ? ;D

odpowiedź 10 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

Z takim podejściem daleko nie zajdziesz. Skończ z tym microsoftowym zapłać to zobaczysz.

Takie coś spokojnie z obrazka można napisać w mniej niż 2 godziny :D

Przy okazji jak masz się czegoś nauczyć jeśli nie można wytknąć ci błędów?

To tak jakbyś na matematyce rozwiązał zadanie otwarte i podał do sprawdzenia tylko wynik.

Jeśli chodzi o ocenę to kolor tej górnej belki jest średni, a ten panel boczny w stylu sprzed 15 lat. Reszta to tak 5/10, nie ma w tym nic szczególnego, wyróżniającego się.

komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)

W mniej niż 2 godziny jak się ma wprawę. Ja w CSS jestem początkujący.

Skoro kolor górnej belki jest średni, a panel boczny przestarzały, to co proponujesz?

komentarz 10 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

To https://pl.wikipedia.org/wiki/Flat_design A na górze obrazek rozmazany :P

odpowiedź 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)

http://ingitro.netne.net/

Pokaż 12 poprzednich komentarzy

komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)
edycja 10 kwietnia 2016 przez Eliro

html
{
	height: 100%;
}

 

body 
{
  margin: auto;
  min-height: 100%;
  postion: relative;
}
#footer
{
	text-align: center;
    background-color: #2d2d2d;
	padding: 10px;
    color: #cdcdcd;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

Nie aktualizowałem strony z linku, bo to uciążliwe za każdym razem aktualizować.

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

body 
{
  margin: auto;
  min-height: 100%;
  postion: relative;
}

Literówka. Zamiast position masz postion.

komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)

Nic się nie zmieniło

1	komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.) Dodaj jeszcze: body::after { display: table; clear: both; content: ''; } Dzieje się tak, ponieważ wszystko oparłeś na float.

komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)

Działa, wielkie dzięki. To ja się biorę za czytanie podesłanych tu linków i wkrótce wyślę poprawioną stronę. Dzięki za fachową pomoc.

odpowiedź 10 kwietnia 2016 przez ormu16 Gaduła (4,980 p.)

<html> - określ język strony, powinno być tak <html lang="pl">
nie określasz zestawu znaków (meta charset)
w css nie powinno się stylować po id

zamiast <div style="clear: both;"></div> lepiej używać

klasa:after {
clear: both;
content: "";
display: block;
}

używaj tagów html 5, nav header main...
nagłówki tego samego stopnia nie powinny się powtarzać
dobrze że obrazki mają alt
wysokość i szerokość obrazków lepiej określać w css
nie zamykasz tagów <html> i <body>

komentarz 10 kwietnia 2016 przez niezalogowany

nagłówki tego samego stopnia nie powinny się powtarzać

A to z jakiego powodu?

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)
edycja 10 kwietnia 2016 przez Comandeer

A to z powodu tego, że algorytm outline'u HTML5 nie działa: https://www.paciellogroup.com/blog/2013/10/html5-document-outline/

Dotyczy tylko nagłówków PIERWSZEGO stopnia. Źle przeczytałem :|

komentarz 10 kwietnia 2016 przez Eliro Stary wyjadacz (12,160 p.)

Język ustawiony
Kodowanie ustawione
Niby czemu skoro efekt ten sam? Powinienem użyć klasy zamiast id?
Jeszcze nie mam wprawy w CSS, zaraz coś o tym poczytam i poprawię
Nie rozumiem
Nagłówki zaraz poprawię
O, jeden + :D
Wysokość obrazków ustawiona
Tagi zamknięte

komentarz 10 kwietnia 2016 przez ormu16 Gaduła (4,980 p.)

Jeżeli nie rozumiesz o co chodzi z tagami html5 to polecam przeczytać http://tutorials.comandeer.pl/html5-blog.html. Id nie powinno się stylować dlatego, że id ma służyć do identyfikacji konkretnego elementu, efekt co prawda jest ten sam ale jeżeli chodzi o praktykę to nigdy nie wiesz czy nie będziesz chciał użyć tej samej klasy do 2 elementów.

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

Niby czemu skoro efekt ten sam? Powinienem użyć klasy zamiast id?

Tak: http://forum.pasja-informatyki.pl/109776/html-class-czy-id?show=109816#a109816

nagłówki tego samego stopnia nie powinny się powtarzać

Źle przeczytałem. Myślałem, że jest "pierwszego stopnia". Jasne, że mogą – jeśli tylko tworzą sensowną strukturę. Tu tworzą. Nie wolno powtarzać jedynie nagłówka pierwszego stopnia.

nie zamykasz tagów <html> i <body>

W teorii specyfikacja na to zezwala… ale to i tak głupota ;)

komentarz 10 kwietnia 2016 przez niezalogowany

Comandeer, ale co Ty mi tutaj wysyłasz?

nagłówki tego samego stopnia nie powinny się powtarzać

Z tego zdania jednoznacznie wynika, że na stronie nie powinno być więcej niż 6 nagłówków. Ponadto:

Nagłówków 1 stopnia nie powinno być więcej niż 1.
Nagłówków 2 stopnia nie powinno być więcej niż 1.
Nagłówków 3 stopnia.. itd.

Co innego -

nagłówki najwyższego stopnia nie powinny się powtarzać

1	komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.) Wiem, wiem… przeczytaj komentarz wyżej ;) Źle se spojrzałem, myślałem, że tam napisano "pierwszego stopnia", nie "tego samego stopnia".

komentarz 10 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

Comandeer:

W teorii specyfikacja na to zezwala… ale to i tak głupota ;)

Ja tam jeżeli mogę to piszę

<!DOCTYPE HTML>

<html lang=...

<meta...

<title...

<header>...

Bez </html>

I nie widzę głupoty w takim zapisie :/ Czy może źle cię zrozumiałem?

A o tym ID nie wiedziałem. Dzięki ormu16!

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

Ale zamykasz znaczniki, które masz otwarte. A specyfikacja pozwala nie zamykać otwartego body, html.

IMO jednak mimo wszystko warto podawać pełen szkielet strony. Nie ma sensownego wytłumaczenia, ale kod jest dzięki temu czytelniejszy.

komentarz 10 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

Z tego co wiem specyfikacja pozwala też nie pisać head i body :P

Ale zamykasz znaczniki, które masz otwarte

Nie wszystkie np akapitów nie zamykam.

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

Z tego co wiem specyfikacja pozwala też nie pisać head i body :P

Specyfikacja zezwala na najczęstsze błędy składni, które teraz po prostu ustandaryzowano ;) To, że można, nie oznacza, że wypada.

Nie wszystkie np akapitów nie zamykam.

IMO wprowadza to tylko niepotrzebny zamęt w kodzie.

komentarz 10 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

IMO wprowadza to tylko niepotrzebny zamęt w kodzie.

Przy dobrym rozdziale layouta od contentu, prezentacji od struktury i odpowiednich wcięciach nie koniecznie :P Ale przyznaję, że stosuje to tylko w szczególnych przypadkach, gdy chcę oszczędzić na transferze, i jest to raczej w formie rozrywki niż działanie w środowisku produkcyjnym.

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

gdy chcę oszczędzić na transferze

Od tego są minifikatory, które takie rzeczy robią za nas ;)

komentarz 10 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

Polecił byś jakiś?

Dzięki!

1	komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.) Do domowej używam: https://github.com/gruntjs/grunt-contrib-htmlmin

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

Z tego co wiem specyfikacja pozwala też nie pisać head i body :P

Nie chcę nawet o tym słyszeć... :D To krok w stronę tych "dyslektyków" HTML'owych? Ja zamykam nawet <img> ;P

komentarz 10 kwietnia 2016 przez Niespecjalny Gaduła (4,180 p.)

I to jest błąd. To nie xhtml, który i tak przez przeglądarki jest interpretowany jako html z błędami.

http://blog.end3r.com/186/404-google-ekstremalna-optymalizacja-kodu-html-i-css/

Czyli ludzi z googla też nazwiesz "dyslektykami"?

2	komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.) Eh, niestety, w HTML5 to już nie błąd, a dozwolona składnia. Ot, kolejny na tyle częsty błąd, że stał się oficjalną częścią standardu…

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

Czyli ludzi z googla też nazwiesz "dyslektykami"?

Na pewno Google dla mnie nie jest wyrocznią... Wiele rzeczy w tym kodzie Google kłuci się z dobrymi praktykami i standardami kodu. Tyle... Chcą uprościć polską ortografię - to nie znaczy, że ja będę pisał tak jak reszta.

komentarz 10 kwietnia 2016 przez Comandeer Guru (601,930 p.)

A ja jeszcze raz powtórzę: taki wynik wypluwają specjalistyczne built tools. Jak ktoś pisze taki kod, to szkodzi tylko sobie. Na devie kod ma być jak najbardziej czytelny, a co później build tool z tym zrobi, to już inna rzecz.