Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Społecznościowy serwis muzyczny
Forum PHP.pl > Inne > Oceny
Luciano
Witam wszystkich,

Chcialbym zaprezentowac Wam moje ostatnie 'dzielo' nad ktorym spedzilem sporo czasu. Jest nim serwis http://mybeat.pl/. W duzym skrocie - serwis ma sluzyc ludzia tworzacym muzyke chcacym sie nia podzielic innymi. W zamian za to ich utwory sa oceniane i komentowane. Serwis posiada na razie uproszczona grafike (chcialem skupic sie na kodzie) i podstawowa funkcionalnosc tzn. nie wszystkie elementy jak np. forum zostaly zaimplementowane.
Prosze o opinie i konstruktywna krytyke.
AjaxSrajax
Hej,

Wygląd ładny, ale kod XHTML tragicznie słaby. Przejrzyj jakieś dobre kursy (X)HTML np ten, bo idąc tą drogą nabędziesz bardzo złych nawyków. Nie będę wymieniał błędów, bo praktycznie cały kod jest błędem (mowię o XHTML).
Cóż, pozdrawiam i życzę powodzenia w nauce XHTML smile.gif
l0ud
Sam pomysł nie jest taki zły winksmiley.jpg Grafika za prosta, ale piszesz, że to zmienisz więc OK. Treści jeszcze nie ma, więc przyglądam się stronie technicznej:

(-) To póki co nie jest XHTML. Próba otwarcia go we 'właściwy sposób' kończy się błędem:
http://mybeat.pl.xhtml.geekhood.net/
Jeżeli już używasz takiej technologii jak XHTML spraw, żeby miało to sens i dbaj o składniową poprawność kodu. Każdy błąd uniemożliwi otwarcie się strony.

(-) Błędy walidacji do poprawy: http://validator.w3.org/check?verbose=1&am...%2Fmybeat.pl%2F (a poprzedni punkt przestanie być aktualny winksmiley.jpg)

(-) Za dużo divów i zbyt mało/brak innych znaczników. Strona główna: 'Moja Muzyka' i 'Lista przebojów' to nie są zlepki divów, a IMHO tabele winksmiley.jpg Użycie tego znacznika byłoby bardziej trafione i prostsze. Lista użytkowników to też nie zlepek divów a... lista smile.gif Ew. możesz użyć dwóch list do rozplanowania userów w dwóch kolumnach. 'Dostępne kategorie' to też lista winksmiley.jpg Istnieje też coś takiego jak nagłówki, <h1> <h2> . Nie stosujesz tego, a w wielu miejscach kod wyglądałby ładniej i bardziej semantycznie.

Pozdrawiam
Luciano
Niestety musze sie z wami zgodzic. Kod xhtml zostal mocno zaniedbany na rzecz innych elementow - chociaz mowiac szczerze po prostu nie mam dobrych nawykow. Naprawa bledow, ktore wypluje validator to jedna rzecz. Nie zmieni to jednak kodu zlego samego w sobie - mogli byscie dac mi troche wiecej przykladow (tak ogolnie) co jest nie tak? Juz wiem, ze za duzo DIVow i za malo innych bardziej slusznych w danym kontekscie tagow?
.radex
ludzie widać za bardzo biorą do siebie slogan "strona na divach" i robią wszystko na elementach <div>.... Tabelek też można używać, ale tylko tam, gdzie są one przeznaczone.
AjaxSrajax
Cytat
...mogli byscie dac mi troche wiecej przykladow (tak ogolnie) co jest nie tak?


Tak ogólnie, to już chyba się bardziej nie da powiedzieć co jest nie tak z kodem smile.gif Loud Ci napisał o nagłówkach i listach.
Radex napisał o tabelach. Tabele to jak najbardziej semantyczny i poprawny element HTML, który służy przechowywaniu danych tabelarycznych, właśnie takich jak na Twojej stronie, a Ty tworzysz coś równie złego co tworzenie layoutu na zagnieżdżonych tabelach, mianowicie tworzysz tabele z divów:

Kod
...
<div class="hHeader">
<div class="hRow">
<div class="rCol1">&nbsp;</div>
<div class="rCol2">tytuł</div>
<div class="rCol3">autor</div>
<div class="rCol4">gatunek</div>
<div class="clear"></div>
</div>
</div>....
Ale to już wykracza poza pojęcie tak ogólnie smile.gif

Większość osób tutaj pewnie powiedziała by Ci (tak szczególnie ;) co jest nie tak i jak to zmienić, ale
w Twoim przypadku to mało da, bo wiedza nabyta samemu będzie o wiele cenniejsza. Więc kombinuj, czytaj i się
ucz bo skoro klepiesz w PHP, to HTML i CSS na poziomie średnio-zaawansowanym nie może być chyba dla Ciebie nie
do przełknięcia, tym bardziej, że materiałów w sieci jest aż nadto, zwłaszcza dla kogoś komu angielski nie jest
obcy (=_ -)

pozdr0

.radex
<table>, <tr>, <td>, <th>... Podstawy.
NoiseMc
Najwiekszy blad jaki rzucil mi sie w oczy od razu to:
  1. onClick="gotoMusic( 14 )"


Zrob z tego normalnego linka, opakuj go w jakis element (div albo li) dodaj jakas klase (np. link) do opakowujacego elementu i w osobnym pliku js powiaz zdarzenia z mouseover i mouseout do wszystkich elementow z klasa "link" (unobtrusive javascript).

Jezeli chcesz zeby to bylo tak jak masz w "tabeli" to zrob 3 linki w wierszu (li) kazdemy z nich moze byc elementem blokowym i miec swoja szerokosc i float left dzieki temu beda wygladac jakby byly tabelka ...

Tak to mozesz zrobic wykorzystujac prototype:
Kod
Event.observe
(
    window,
    'load',
    function ()
    {
        var linki = $$ ('.link');
        
        linki.each
        (
            function (link)
            {
                Event.observe
                (
                    link,
                    'mouseover',
                    function ()
                    {
                        item.style.backgroundColor='#cce2e9';
                    }
                );
                
                Event.observe
                (
                    link,
                    'mouseout',
                    function ()
                    {
                        item.style.backgroundColor='#ffffff';
                    }
                );
            }
        );
    }
);


Dzieki temu uzytkownik nie bedzie skazany na klikanie wstecza w przegladarce za kazdym razem jak bedzie chcial wrocic do listy utworow, bedzie mogl sobie otworzyc kilka utworow w kilku tabach no i link bedzie linkiem co poprawi indeksowanie w google.

... i wyrzucasz javascript do osobnego pliku ... ladnie i elegancko smile.gif
Luciano
Dzieki wielkie za porady. Wszystko co powiedzieliscie jest uzasadnione i ma sens. Weekend nadchodzi wiec postaram sie naprawic wiekszosc niedociagniec.
punkomuzykant
Wiem że wygląd nie jest ostateczny ale mimo wszystko myślę że słabo ;/ Jeżeli to ma być portal dla dj to ja spodziewałem się raczej czegoś na styl heineken.pl albo najlepiej
http://www.coke.pl/cokelivefreshnoise/
i wcale nie musisz wpychać jakiś bajerów flashowych. Chodzi tylko o to by oddać jakoś klimat muzyki klubowej itd itp. Na Twoim miejscu sugerowałbym się właśnie czymś takim bo na chwilę obecną layout nawet ładny ale pod temat nie pasuje.
Luciano
Grafika przez najblizszy okres z pewnoscia sie nie zmieni z prostej przyczyny. Sam nie jestem w stanie jej zrobic a dobrzi graficy licza duzo pieniazkow (co zreszta jest uzasadnione). Puki co ide w mysl zasady google/youtube itd czym prosciej tym lepiej biggrin.gif
damian004
mi tam się podoba:p może image biedny ale wiem jak o grafikę trudno...
Luciano
ok troche poprawilem htmla i walidacje tez przechodzi
cycofiasz
Przyjemny i czytelny serwis tongue.gif Skoro kod ci wyszedł, to popracuj teraz nad grafiką...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.