[www] Cięcie, design - fergo Opcje

[webber]

http://podemski.info/fergo/

testowane pod IE 6.0, IE 7, Google Chrome, Safari, FF 3, nie testowałem pod Operą.

Proszę o ocenę projektu, szczególnie kodowania

PS: Tak wiem, pod Chrome trzy główne obrazki na topie nie ściemniają się, myślę że jest to wynikiem użycia przeze mnie tam skryptu jquery do automatycznego powstawania odbicia

Ten post edytował webber 28.02.2009, 12:46:04

[ayeo]

Witam!

Wedle życzenia skupię się na kodzie:
* niesemantyczne nazwy klas
* style w HTMLu
* niepotrzebne znaczniki ( ul -> li -> a -> div )
* brak clear po float;
* logo, menu jako img

Tyle jeżeli chodzi o błędy na pierwszy rzut oka. Jednak kod nie jest tragiczny to raczej detale.

Pozdrawiam!

[webber]

Dzięki

Ad. 1

Mógłbym prosić o rozwinięcie punktu?

Ad. 2

Chodzi o IE? Poprawione. Jeśli chodzi o style w 3 głównych obrazkach topu nie mogłem się dostać do tej klasy z poziomu .css może w jquery.

Ad. 3

Chodzi o to iż listy nie powinienem dawać zawsze w <div>?

Ad. 4

Nie praktykowałem tego nigdy. Czy chodzi o to:
http://www.positioniseverything.net/easyclearing.html
?

Ad. 5

Dlaczego nie?

Fajnie iż ktoś zajmuje się detalami jednak widocznie jestem daleko za Tobą jeśli chodzi o kodzenie dlatego też prosiłbym o jakieś szersze uwagi.

Pozdrawiam!

[gcdreak]

@ayeo
Twoje uwagi mnie także bardzo zainteresowały. Mógłbyś powiedzieć coś więcej?

[ayeo]

* Niesemantyczne nazwy plików czyli nazwy, które określają wygląd lub pozycję. Na przykład class = "center". W HTMLu ma być treść, a jej wygląd w CSS. Dlatego nazwa klasy nie powinna określać wyglądu.

* style powinny znajdować się wyłącznie w pliku (plikach) ze stylami. Nigdy przenigdy nie powinno ich być w pliku z kodem HTML.

* Po prostu ten div nie jest potrzebny zamiast robić diva o id "menu" zrób sobie "ul" o id "menu". I dalej analogicznie

* Jak robisz floata dla elementu nieznajdującego się w elemencie absolutnym to zawsze musisz dodać element który wyzeruje tego floata na końcu.

* Logo jeszcze można zrozumieć (chociaż też powinno być tłem), ale buttony jako img są niedopuszczalne. Określają wygląd strony, a nie zawartość więc powinny być doprecyzowane w CSS, a nie w HTML

Chciałbym dodać, że średnio się znam na stylach, a na forum znajdą się prawdziwi magicy, którzy dużo mogliby pewnie dodać

Pozdrawiam!

[gcdreak]

Dzięki za przydatne uwagi. Szczególnie to o floatach jest dla mnie ciekawe, ponieważ nie miałem o czymś takim rzadnego pojęcia.

[Moli]

* Niesemantyczne nazwy plików czyli nazwy, które określają wygląd lub pozycję. Na przykład class = "center". W HTMLu ma być treść, a jej wygląd w CSS. Dlatego nazwa klasy nie powinna określać wyglądu.

Co za głupota Według Ciebie jak lepiej nazwać klasę która centruje tekst ?

Logo jeszcze można zrozumieć (chociaż też powinno być tłem),

Logo nie powinno być tłem, powinno być klikalne. Chyba że miałeś na myśli takie coś:

Kod

<h1><span>Nazwa strony - Slogan</span></h1>

I logo jako tło do h1 a span ze style display:none.

Ten post edytował Moli 1.03.2009, 11:07:32

[.radex]

Pod Operą wygląda dobrze, ale sam layout średnio mi się podoba. Kodu nie będę oceniał, bo ayeo już to zrobił, ale:

* Niesemantyczne nazwy plików czyli nazwy, które określają wygląd lub pozycję. Na przykład class = "center". W HTMLu ma być treść, a jej wygląd w CSS. Dlatego nazwa klasy nie powinna określać wyglądu.

Już nie przesadzajmy z semantyką Nazwy klas w przeciwieństwie do nazw tagów ustalamy sami, więc IMHO jest ok.

Tak kończąc offtopic.

[erix]

OT mode on

Co za głupota Według Ciebie jak lepiej nazwać klasę która centruje tekst ?

Ano taką, która opisuje, co to jest za tekst. Popatrz sobie na np. http://csszengarden.com; wszystkie laye, to ten sam HTML, tylko CSS się zmienia. Przyjdzie ktoś inny do przerobienia designu i co? Wycentrowany tekst nie będzie już wycentrowanym.

Już lepiej nazwać w stylu opisProduktu niż wycentrowanyTekst. Ale to temat na osobną dyskusję.

OT mode off

[ayeo]

~Moli, ale co Ciebie interesuje w HTMLu czy dany tekst jest wycentrowany czy nie? HTML to treść, a nie sposób jej prezentacji. Więc określając, że tekst ma być wycentrowany naruszasz tę zasadę. Nie uważam, żeby to była głupota.

Pozdrawiam!

[webber]

Czyli podsumowując...

Poszczególne elementy strony nie określamy "leftMenu", "rightMenu" tylko np. "menu", "menu2"?

O clear już przeczytałem. Dzięki za rade.

Ogólnie dzięki za posta.

Pozdrawiam

Ten post edytował webber 2.03.2009, 13:13:01

[DreeD]

Poszczególne elementy strony nie określamy "leftMenu", "rightMenu" tylko np. "menu", "menu2"?

np. "primaryMenu" / "mainMenu", "secondaryMenu" / "subMenu" etc.
to samo z blokami tresci: "primaryContent", "secondaryContent"



odnosnie tego loga.. ja osobiscie ustawiam obrazek z logiem jako tlo <h1> jako ze w pewnym sensie logo strony mozna nazwac naglowkiem, ale w tej sprawie opinie sa podzielone (niektorzy twierdza ze powinno sie uzywac <div>'a z tlem zamiast <h1>)

XHTML daje Ci do dyspozycji mase tagow, ktore mozesz uzywac do definiowania tresci.. np. zamiast pogrubiac tekst uzywajac <b> wrzcaj go do ostylowanego <strong>, w jakis inny sposob wyrozniony tekst do ostylowanego odpowiednio <em> , adresy wrzucaj do <addr> itd. itp.

Niektorzy (jak lubie ich nazywac) "ignoranci" powiedza ze to sztuka dla sztuki, ale w efekcie koncowym twoj page rank bedzie mial co innego do powiedzenia

[Crozin]

* Jak robisz floata dla elementu nieznajdującego się w elemencie absolutnym to zawsze musisz dodać element który wyzeruje tego floata na końcu.

Nie, nie musi.

* style powinny znajdować się wyłącznie w pliku (plikach) ze stylami. Nigdy przenigdy nie powinno ich być w pliku z kodem HTML.

Generalnie tak, jednak zdarzają się sytuacje, gdzie trzeba użyć atrybutu style.

1) Newsletter. Co to w ogóle jest? Dlaczego tam jest jakiś forumlarz jedynie z polem tekstowym, a przyciski są zrobione jako A.
2) Dla pól formularzy staraj się zawsze dodawać LABEL - nawet jeśli nie ma tego w projekcie. Podobnie z LEGEND (dla FIELDSET). Jeżeli nie chcesz by były one widoczne ukryj je display: none, ale wstaw je w HTML.
3) Po co Ci np. klasa newsletterInput? Nie możesz odwołać się poprzez: #newsletter input?
4) Dla obrazów (IMG) raczej określaj atrybuty width i height
5) Stopka - zwykły tekst. Dlaczego wstawione jako obraz?
6) Kolejna niepotrzebna klasa: newsImage
7) Klasa: featuredImg, ponownie możesz się odwołać poprzez #featured a
8) Google: divitis, classists
9) Zdecyduj się na polskie, bądź angielskie nazewnictwo identyfikatorów/klas
10) Obraz wrzucasz przez IMG jedynie wtedy, gdy jest częścią "contentu", a nie elementem dekoracyjnym
11) Za tego blank.gif to Cie powinni...
12) Literki się pokrzaczyły. btw zamiast stosować encje możesz wrzucić "»" poprostu do dokumentu
13) Tutaj logo IMO w H1 powinno być
14) Strona bez obsługi JS: OK, CSS: mogłoby być jednak lepiej, obrazów: całkiem OK