Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Proszę o ocenę kodu
Forum PHP.pl > Inne > Oceny
fizzlebubble
Witam,
Prosiłbym Was uprzejmie o ocenienie kodu mojego autorstwa na nbartosiewicz.pl/beta smile.gif. Za formatowanie pliku .css odpowiada Compass, w ostatecznej wersji zostanie zminifikowany.

PS. Nie bawiłem się jeszcze w cross-browser, także prosiłbym oglądać pod Chromem. W ostatecznej wersji dojdą jeszcze drobne animacje jsa tła, sprites oraz poprawienie smoothslidera, aby zatrzymywał się w odpowiedniej pozycji.
Monter08
Pierwsze co mnie zaczęło zastanawiać dlaczego ładujesz pliki js na samym końcu? Co do kodu, walidator nie wyrzuca błędami to już jest dobry znak. W podstronie "Portfolio" mógłbyś zatrzymać resztę animacji, jeżeli najdzie się na inną, teraz gdy machniesz szybką kilka razy nad nimi to zaczynają głupieć. Nie wiem czy to tak ma być czy nie, ale w podstronie kontakt zamiast nadawać value na imie i nazwisko możesz śmiało użyć placeholder. Do kodu nie ma co się przyczepiać, ale mógłbyś podciągnąć te szczegóły zanim zabierzesz się za resztę. Jeszcze jedna sprawa to taka, że gdy klikam np. na oferte to menu zakrywa mi cały napis "Co oferuję", mógłbyś to trochę podciągnąć w górę.
fizzlebubble
Cytat
Pierwsze co mnie zaczęło zastanawiać dlaczego ładujesz pliki js na samym końcu?

Ładuję na samym końcu, ponieważ znacznie poprawia to szybkość wczytywania strony.

Cytat
W podstronie "Portfolio" mógłbyś zatrzymać resztę animacji, jeżeli najdzie się na inną, teraz gdy machniesz szybką kilka razy nad nimi to zaczynają głupieć.

Dzięki, bardzo dobra uwaga smile.gif.

Cytat
Nie wiem czy to tak ma być czy nie, ale w podstronie kontakt zamiast nadawać value na imie i nazwisko możesz śmiało użyć placeholder.

Trzymam się xHTMLa, to właśnie zrobię jsem, dzięki za przypomnienie.

Cytat
Jeszcze jedna sprawa to taka, że gdy klikam np. na oferte to menu zakrywa mi cały napis "Co oferuję", mógłbyś to trochę podciągnąć w górę.

Tego błędu jestem świadomy, ale dzięki smile.gif. Zamiast marginów sekcji zrobię paddingi i będzie super.
reptile_rex
Te buttony w sekcji "Kontakt", działają na hoverze i zmienia się ich background (tak przepuszczam) co powoduje chwilowe zniknięcie buttona.
Po najechaniu mrugnie i załaduje się już ten hover, potem już działa bez problemu.

Z tego co pamiętam sprite były rozwiązaniem tego problemu.

Pozdrawiam smile.gif
fizzlebubble
Tak jak pisałem, sprites are on the way tongue.gif.
!*!
Cytat(fizzlebubble @ 19.01.2013, 22:26:49 ) *
Ładuję na samym końcu, ponieważ znacznie poprawia to szybkość wczytywania strony.


Nie wiem jak to się fachowo nazywa, ale jQ ma różne flagi odpalania skryptów np. $(document).ready itp. Umieść te pliki na początku, i ustaw odpowiednie flagi, przeglądarka sama będzie wiedziała co z tym zrobić.

Jeśli strona się wolno ładuje, to może zoptymalizuj kod, a jeszcze lepiej jakbyś przeszedł na html5 i się go trzymał, wtedy wyleci 60% tego co masz.

  1. <div id="header">
  2. <div class="wrapper">
  3. <ul>
  4. <li><a href="#about-me">O mnie</a></li>
  5. <li><a href="#my-offer">Oferta</a></li>
  6. <li><a href="#recent-works">Portfolio</a></li>
  7. <li><a href="#contact">Kontakt</a></li>
  8. </ul>
  9. </div> <!-- wrapper -->
  10. </div> <!-- HEADER -->

Po co Ci tyle divów? Można prościej

  1. <div id="header">
  2. <ul>
  3. <li><a href="#about-me">O mnie</a></li>
  4. <li><a href="#my-offer">Oferta</a></li>
  5. <li><a href="#recent-works">Portfolio</a></li>
  6. <li><a href="#contact">Kontakt</a></li>
  7. </ul>
  8. </div> <!-- HEADER -->


lub html5
  1. <header>
  2. <ul>
  3. <li><a href="#about-me">O mnie</a></li>
  4. <li><a href="#my-offer">Oferta</a></li>
  5. <li><a href="#recent-works">Portfolio</a></li>
  6. <li><a href="#contact">Kontakt</a></li>
  7. </ul>
  8. </header> <!-- HEADER -->


i w CSS

  1. #header ul{}
  2. header ul{}


I tak jest praktycznie wszędzie, za dużo ich nawaliłeś wink.gif
Powolne ładowanie mają też przestarzałe wtyczki, np. do przewijania. zrób to w kilku linijkach JS http://jsfiddle.net/N2hXV/show/
Resztę też wymień jak masz możliwość, bo 2009 rok to kupa czasu i wiele się pozmieniało od tamtej pory wink.gif

Jeśli chodzi o fonty, to czasami nie wyświetlają się PL znaki. Tu też mógłbyś zamiast wczytywać je ze swojego dysku, podrzucić jakieś linki z google fonts, będziesz mieć wtedy lepsze cache.
fizzlebubble
Divów "tyle" po to, aby pod RWD nie było kaszany i chyba tylko w headerze jest zbędny. HTML5 gdy nie muszę to nie stosuję. Za fonty odpowiada FF, Google WF nie ma w swojej bazie tych fontów, które potrzebowałem. Za uwagę z slidem dziękuję, już chyba z przyzwyczajenia stosuję localscroll'a ;P.

Nie rozumiem tylko uwagi "Resztę też wymień jak masz możliwość, bo 2009 rok to kupa czasu i wiele się pozmieniało od tamtej pory".
!*!
Cytat(fizzlebubble @ 20.01.2013, 13:51:56 ) *
Nie rozumiem tylko uwagi "Resztę też wymień jak masz możliwość, bo 2009 rok to kupa czasu i wiele się pozmieniało od tamtej pory".


Chodziło mi o ten skrypt że jest z 2009. jQ zostało zoptymalizowane od tamtej pory ze 20 razy. Popatrz na jQ 2.0beta, część z rzeczy została wywalona i skrypt który CI podałem w niej nie działa (zapewne chwilowo). Tak czy inaczej, czasami warto odświeżyć to co się ma zapisane od lata na dysku.
Pawel_W
Cytat(!*! @ 20.01.2013, 14:05:07 ) *
Popatrz na jQ 2.0beta

jQuery 2.0 i XHTML to nie jest dobre połączenie, z jednej strony chcesz mieć pełną kompatybilność (XHTML zamiast HTML5), z drugiej odcinasz się od sporej części rynku (jQuery 2.0 nie działa na IE8 i starszych)

  1. <li>
  2. <img src="images/projects/gameserv.jpg" alt="GameServ.pl" />
  3. <div class="info">
  4. <img src="images/projects/gameserv.jpg" alt="GameServ.pl" />
  5. <h4>GameServ.pl</h4>
  6. <ul>
  7. <li>
  8. <em>data:</em>
  9. <em>task:</em>
  10. <em>url:</em>
  11. <em>info:</em>
  12. </li>
  13. <li>
  14. <p>01.2013</p>
  15. <p>design</p>
  16. <p><a href="#">w trakcie przygotowan</a></p>
  17. <p>firma hostingowa serwerów gier</p>
  18. </li>
  19. </ul>
  20. </div> <!-- info -->
  21. </li>


to można było załatwić jednym tagiem img, poza tym w ogóle nie rozumiem idei użycia listy w ten sposób, jak już to
  1. <li>data: 01.2013</li>
itd.
poza tym, użycie <em> jest tutaj niewłaściwe, chyba, że masz zamiar pozycjonować stronę pod frazami "data, task, url, info" ;)

o ile się nie mylę to wszystkie h2 mają klasę heading a h3 subheading - wychodzi na to, że te klasy są zbędne

to:
  1. <!--[if lt IE 7]> <html lang="en" class="ie ie6 lte9 lte8 lte7"> <![endif]-->
  2. <!--[if IE 7]> <html lang="en" class="ie ie7 lte9 lte8 lte7"> <![endif]-->
  3. <!--[if IE 8]> <html lang="en" class="ie ie8 lte9 lte8"> <![endif]-->
  4. <!--[if IE 9]> <html lang="en" class="ie ie9 lte9"> <![endif]-->
  5. <!--[if (gt IE 9)|!(IE)]><!-->
jest zbędne, bo i tak tego nigdzie nie używasz

logo powinno się raczej znaleźć w headerze

skrypty na końcu strony to bardzo dobry pomysł - !*! chyba nie bardzo zrozumiał o co z tym chodzi ;) tutaj macie link do wyjaśnienia http://developer.yahoo.com/performance/rules.html#js_bottom

jeżeli masz tylko możliwość to wykorzystuj CDN do skryptów (w tym wypadku chodzi mi głównie o jQuery)
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.