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 (604,780 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 (604,780 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 (604,780 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 (604,780 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 (604,780 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 (604,780 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>

Pokaż 15 poprzednich komentarzy

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 (604,780 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 (604,780 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.