ITCOM – cięcie grafiki

Moim zadaniem było przygotowanie HTML’a na podstawie projektu graficznego oraz zaanimowanie głównego menu za pomocą javascriptu. Została do tego wykorzystana biblioteka jQuery.

adres:
www.itcom.com.pl
w sieci
maj 2010
rodzaj
witryna informacyjna
zakres prac
cięcie grafiki, animacja menu
technologie
xhtml, jQuery

Poprzedni

Acido

Następne

Nie udało się zlokalizować katalogu zawartości WordPressa (wp-content)

17 komentarzy

  1. ayeo

    Witam!

    Nie jest to najwyższych lotów kod. Menu jako lista ok, ale pod menu jako akapity? Niesemantyczne nazwy klas. Często klasy użyte zamiast id. Wiele znaczników użytych niepotrzebnie. Ten clearfix to nie jest dobra metoda. Form bez fieldset. JS też nie jest za fajnie rozwiązany. To tak na szybko. Ogólnie całość do poprawy ;)

    Pozdrawiam!

  2. 1. Kod który oddałem miał w menu zagłębione listy, co na drugiej widać.

    2. Co to znaczy „semantyczna nazwa klasy”?

    3. Klasy zamiast id – to jest kwestia dyskusji w której nie ma wygranego.

    4. clearfix – lepsza metoda dociągania kontenera do wysokości floatowanych dzieci? Chętnie się nauczę.

    5. Fieldset – jeśli chodzi o formularz wyszukiwania to jest zbędny, jeśli chodzi o coś z treści, to uwaga do tych co wstawiali treść.

    5. JS – ???

    Ogólnie czepiasz się, a Twoja strona jest również do poprawy, tak na szybko kilkadziesiąt znaków, a błędy w htmlu oraz brak znacznika H1 … mało?

  3. ayeo

    Opublikowałeś pracę to się wypowiedziałem. Może i się czepiam :) Moja strona jest cała do poprawy, o ile oczywiście można nazwać to stroną. Fieldset nie jest zbędny. Zamiast clear możesz dać kontenerowi overflow: hiddenl na przykład. Uważam, że box z danymi teleadresowymi powinien być doprecyzowany przez ID. Z nazwami klas chodzi mi np o „first” – nic to nie mówi o treści. Nie ma się co złościć :D

    Pozdrawiam!

  4. Ja się nie złoszczę, ja się wypowiadam, a dokładniej rzecz ujmując punktuję.

    Co osiągnę przez overflow:hidden dla rodzica elementów floatowanych?

    Wybacz, ale nie potrafię za pomocą tej reguły rozciągnąć w pionie rodzica, błagam o podpowiedź.

  5. ayeo

    Witam!

    Przepraszam, że tak późno odpisuję. Co do Twojej prośby to:

    Pozdrawiam!

  6. No i rozciąga rodzica? Bo IMO nie. czyli nie osiąga tego co mi jest potrzebne. Clear’uje, ale nie tylko do tego używam clearrfix’a. Gdyby chodziło o sam clear, to rzeczywiście są prostsze metody.

  7. ayeo

    Nie rozumiem trochę chyba o chodzi z „rozciąganiem rodziców”. W każdym razie wydaje mi się, że nie rozumiesz samych floatów, ani ich pozornie dziwnego zachowania. Ja jestem raczej laikiem jeżeli chodzi o cięcie grafiki (pociąłem kiedyś kilka layów), ale to chyba są absolutne podstawy. Masa rzeczy jest tu rozwiązana bezsensu. Pozycjonowanie elementów ujemnymi marginesami? Po co? Po co tyle tych znaczników wszędzie? Po co div w menu!? Tu nie chodzi o sposób czyszczenia floatów, tu chodzi o to, że ten kod to awaria.

  8. Skoro jak sam twierdzisz jesteś laikiem w cięciu to rozumiem, czemu wiele rzeczy wydaje Ci się bez sensu. Potnij ten szablon po swojemu, porównamy kod.

    Nie widzę żadnego dziwnego zachowania we floatowanych elementach. Zachowują się idealnie tak jak chcę żeby się zachowywały.

    Jeżeli nie rozumiesz co oznacza „rozciąganie rodziców”, ani po co element jest pozycjonowany ujemnym marginesem, to uważam tę rozmowę za stratę czasu.

    A wypowiadanie się „kod to awaria” jak się jest laikiem jest … no cóż … lekko bez sensu.

    Dla mnie rzeczy których nie rozumiem, tez wydają się bez sensu.

    Potnij, porównamy.

  9. ayeo

    Z tym cięciem laya to, jak rozumiem, żartujesz. Również uważam dalszą wymianę zdań za bezcelową.

    Pozdrawiam!

  10. Krzysiek

    Po przeczytaniu waszej rozmowy sam z ciekawości spojrzałem na kod strony. Który moim zdaniem jest poprawny , choć od strony pozycjonowania nie spełnia standardów ( stosunek kodu do tekstu nie nieprawidłowy).

    ayeo w informatyce liczy się efekt i bezawaryjne działanie a rozmowy w stylu ja bym to zrobił inaczej są bez sensu ponieważ takie menu można zrobić na milion sposobów.

    Pozdrawiam

  11. Miłosz

    No tak przypadkiem tu trafiłem:) Odnośnie „rozciągania rodzica” ayeo ma zupełną rację. Jeśli podany prze niego przykład jest nie jasny to http://www.quirksmode.org/css/clearing.htmljuż na pewno pomoże.

    Reszta dotycząca samego kodu – jak ktoś zaczyna przygodę z tworzeniem stron tzn. ma już jakąś wiedzę – myśli że jest na topie i zwraca uwagę na różne pierdoły. Jak ktoś zajmuje się tym już na poważnie – to ma już swoje nawyki, i dąży do tego żeby wykonać zlecenie jak najlepiej, z reguły klienta nie obchodzi sam kod. Nie mówię że tu jest źle – stronka jest prosta to i nie było się czym wykazać. Ale są bugi – w ie7 – uciekające górne menu przy najechaniu na submenu po lewej (trzeba „pojeździć” po tym menu i można zobaczyć ten efekt) w innych przeglądarkach niż FF (nie chce mi się sprawdzać wszędzie ale w Operze i Ie) jest problem z pozycją strzałek w tle linków w lewym menu (piszesz że kombinowali coś brzy zmianie listy na akapity – ale nie zrobili tego wszędzie – więc jest błąd. W Ie6 też jakiś dodatkowy odstęp w pozycjach listy po lewej (no ale ie6 można już olać, bynajmniej ja zacząłem więc się nie czepiam:) Może warto wykryć przeglądarkę i dodać sobie klasę np. do body z jej nazwą – można w js, można w php.

    Podsumowując proponuję nie patrzeć jakoś w kod i na zasadzie czepiania się detali bo już mało kto piszę strony na tabelkach tak jak wcześniej były o to wojny:) Mniej więcej kod spełnia standardy, ale proponuję testować dokładniej stronki.

  12. @Miłosz – też racja, nawyki robią swoje.

  13. ktos z branzy

    kod jest kiepski i daleko mu od standardow. pozatym strona wali sie pod IE6 i masz problem z obsluga przezroczystosci png. musisz sie duzo nauczyc i wyczysc kod bo straszy. uzywaj pelnej semantyki kodu a nie zasypuj klasami typu . mozesz chocby zastapic to znacznikiem ktorego nie masz i od razu kod jest lzejszy. widac ze duzo ci brakuje.
    popracuj tez nad css.

  14. ktos z branzy

    chodzilo mi o to h3 class=box-title i uzycie znacznika h5

  15. A ja powiem, że w porównaniu do groma kodu w polskim internecie kod jest dobry i Panowie wyżej są bardzo czepialscy. Może zły dzień?

    Ciekawe jak to jest w codziennej pracy, kiedy czas goni czy też tak zwracacie uwagę na szczegóły.

    Kod jest poprawny strukturalnie i semantycznie. Chwali się użycie znacznika address w danych kontaktowych, obecnie ciągle rzadko stosowanym i zastępowanym div’ami czy innymi pseudo tagami.

    Pozdrawiam

  16. Jeszcze raz ten wyżej

    A Pan ayeo to w ogóle jakiś maniak:

    'semantyczne nazwy klasy’???

    Co to k. jest?, żal…

    Atrybuty class, id są dla developera, nie mają żadnego związku z semantyką, to dlatego właśnie w HTML 5 pojawiam się takie tagi jak header, footer itd. Podstaw Ci brakuje, a się sadzisz…

  17. @Marek Kisiel: kod był tworzony (jak zwykle) przy goniącym czasie. Dziękuję.

Oparte na WordPress & Theme by Anders Norén