Proszę o ocenę kodu Opcje

[fizzlebubble]

Witam,
Prosiłbym Was uprzejmie o ocenienie kodu mojego autorstwa na nbartosiewicz.pl/beta (IMG:style_emoticons/default/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.

Ten post edytował fizzlebubble 19.01.2013, 21:38:34

[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]

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.

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

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.

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

[fizzlebubble]

Tak jak pisałem, sprites are on the way (IMG:style_emoticons/default/tongue.gif) .

[!*!]

Ł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.

[HTML] pobierz, plaintext 
<div id="header">
    <div class="wrapper">
        <ul>
            <li><a href="#about-me">O mnie</a></li>
            <li><a href="#my-offer">Oferta</a></li>
            <li><a href="#recent-works">Portfolio</a></li>
            <li><a href="#contact">Kontakt</a></li>
        </ul>
    </div> <!-- wrapper -->
</div> <!-- HEADER -->
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<div id="header">
        <ul>
            <li><a href="#about-me">O mnie</a></li>
            <li><a href="#my-offer">Oferta</a></li>
            <li><a href="#recent-works">Portfolio</a></li>
            <li><a href="#contact">Kontakt</a></li>
        </ul>
</div> <!-- HEADER -->
[HTML] pobierz, plaintext 

lub html5

[HTML] pobierz, plaintext 
<header>
        <ul>
            <li><a href="#about-me">O mnie</a></li>
            <li><a href="#my-offer">Oferta</a></li>
            <li><a href="#recent-works">Portfolio</a></li>
            <li><a href="#contact">Kontakt</a></li>
        </ul>
</header> <!-- HEADER -->
[HTML] pobierz, plaintext 

i w CSS

[CSS] pobierz, plaintext 
#header ul{}
header ul{}
[CSS] pobierz, plaintext 

I tak jest praktycznie wszędzie, za dużo ich nawaliłeś (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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.

Ten post edytował !*! 20.01.2013, 11:15:56

[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".

[!*!]

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]

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)

[HTML] pobierz, plaintext 
            <li>
                <img src="images/projects/gameserv.jpg" alt="GameServ.pl" />
                <div class="info">
                    <img src="images/projects/gameserv.jpg" alt="GameServ.pl" />
                    <h4>GameServ.pl</h4>
                    <ul>
                        <li>
                            <em>data:</em>
                            <em>task:</em>
                            <em>url:</em>
                            <em>info:</em>
                        </li>
                        <li>
                            <p>01.2013</p>
                            <p>design</p>
                            <p><a href="#">w trakcie przygotowan</a></p>
                            <p>firma hostingowa serwerów gier</p>
                        </li>
                    </ul>
                </div> <!-- info -->
            </li>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<li>data: 01.2013</li>
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
<!--[if lt IE 7]> 				<html lang="en" class="ie ie6 lte9 lte8 lte7">	<![endif]-->
<!--[if IE 7]>					<html lang="en" class="ie ie7 lte9 lte8 lte7">	<![endif]-->
<!--[if IE 8]>					<html lang="en" class="ie ie8 lte9 lte8">		<![endif]-->
<!--[if IE 9]>					<html lang="en" class="ie ie9 lte9">			<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
[HTML] pobierz, plaintext 

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)