Społecznościowy serwis muzyczny Opcje

[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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[l0ud]

Sam pomysł nie jest taki zły (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Użycie tego znacznika byłoby bardziej trafione i prostsze. Lista użytkowników to też nie zlepek divów a... lista (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Ew. możesz użyć dwóch list do rozplanowania userów w dwóch kolumnach. 'Dostępne kategorie' to też lista (IMG:http://forum.php.pl/style_emoticons/default/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]

...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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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:

[HTML] pobierz, plaintext 
onClick="gotoMusic( 14 )"
[HTML] pobierz, plaintext 

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował NoiseMc 17.07.2008, 01:48:45

[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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) Skoro kod ci wyszedł, to popracuj teraz nad grafiką...