Zacząłem edukować się w kierunku HTML 5 i CSS 3 (kiedyś coś tam pisałem w starszych wersjach, kilka lat temu).

Znalazłem na necie jakiś layout .psd i spróbowałem go zakodować w HTML 5 i CSS 3.

http://maiza.ct8.pl/projekty/patent/index.html

To jest oczywiście tylko strona głowna, bez odsyłaczy etc. Głównie mi chodzi o opinie kodu, tzn. czy prawidłowo zakodowałem ogolny zarys w HTML 5 i CSS 3, co zrobilem zle lub co moglem zrobic lepiej lub czego nie powinieniem zrobic?

Tu jest css:

http://maiza.ct8.pl/projekty/patent/css/style.css

A tu jest jpg szablonu:

http://maiza.ct8.pl/projekty/patent/patent.jpg

Mialem troche problem z menu, tzn. z jego tłem/przyciskami, zrobiłem to chyba w nie zbyt dobry sposób.. Dodatko jak widać na jpg w szablonie jest dość nietypowa czcionka, w PS zrobiona z tzw. Sharpem, dużo szukałem o tym i niestet nie udało mi się tak samo sformatować tej czcionki w CSS, nie mogłem znajść nic konkretnego na temat antyaliasingu..

Głównie proszę o ocene kodu html i css.

btw. przy okazji, jak widzicie, na dole strony, Ostatnie projekty, chciałbym zrobić tam galerię, tak jak to narazie przedstawiaja obrazki zrobione na sztywno, aczkolwiek nie wiem przez co moge uzyskac taka galerie? JS? jQuery ? czy cos innego? Ma ktoś jakiś pomysł, jak taką galerie z bocznymi przelacznikami i poziomym suwakiem moge zrobic?

Szczerze mówiąc nie wiadomo co tu oceniać. PSD nie Twój, a zakodowanie takiej jednej podstrony to góra 2 godziny.

Kod HTML raczej ok - walidator W3


Nie dodali jej do psd? Tekst powininen być wycentrowany w każdym boxie


Poszukaj podobnego slidera jquery

Ogólnie dobrze. Fajnie, że korzystasz z elementów HTML5.

Otworzyłem z ciekawości w IE8 i nie za ciekawie wygląda ba, w ogóle nie wygląda

Nie no, kolego, bez jaj. Tak się nie wstawia obrazków tła. Już pomijając, że nie daj Boże zmieni się któryś napis w menu i będzie miał inną szerokość. To jest do poprawy w pierwszej kolejności.

[HTML] pobierz, plaintext 
<div id="bg_menu">
    <img src="images/bg_menu.png" alt="bg"/>
</div>
 
<nav>
    <ul>
        <li><a href="#">Home</a> </li>
        <li><a href="#">O Fundacji</a> </li>
        <li><a href="#">Działalność</a> </li>
        <li><a href="#">Wydarzenia</a> </li>
        <li><a href="#">Nowe projekty</a> </li>
        <li><a href="#">Kontakt</a> </li>
    </ul>
</nav>
[HTML] pobierz, plaintext 

Druga sprawa, że linkó w menu nie powinieneś pozycjonować za pomocą padding-top. Wypozycjonowany powinien być element nadrzędny (w tym wypadku <nav /> albo <ul />).


Po co na siłę stosujesz HTML5, powielając tym samym elementy HTML?

[HTML] pobierz, plaintext 
<section>
    <div id="artykuly">
        [...]
    </div>
</section>
<footer id="stopka">
    <div id="zawartosc_stopki">
        [...]
    </div>
</footer>
[HTML] pobierz, plaintext 

Wystarczyłoby:

[HTML] pobierz, plaintext 
<section id="artykuly">
    [...]
</section>
<footer id="stopka">
    [...]
</footer>
[HTML] pobierz, plaintext 

A to tylko błędy na pierwszy rzut oka, w kodzie HTML, który ma 150 linijek. Jak dla mnie trója z minusem.

Czcionke sobie znalazłem i dodałem @font-face, aczkolwiek nie o to chodzi. Była ona zrobiona w Photoshopie jako 'Sharp', zwykła wygląda tak jak ta na stronie, a z sharpem tak jak na jpg.
Chciałem uzyskać przez CSS czcionke maksymalnie wygładzoną, aby wyglądała tak jak w PS, ale niestety chyba tak się nie da.



A możesz zarzucić screenem? Bo u mnie wszystko jest ok, może to przez rozdzielczość :/ aczkolwiek niestety musze poczytać, jak to wszystko ogarnac żeby działało w kazdej przegladarce, a pozniej jakis RWD



Masz racje, tez mi sie wydawało jak to pisałem dosyć nie zbyt dobrze zrobione. Korzystałem z kursów ze strony Strefa Kursów .. Pan na filmie opisywał, żeby tak robić Ale to co Ty piszesz ma sens. Rozumiem, że wrzucić to do styli, jako bg dla diva bg_menu ?



Fakt, tak coś czułem, że w tym menu coś skopałem, bo miałem własnie problem z wypozycjonowaniem go. Spróbuje to naprawić.



Wiem, że by tak wystarczyło i tak normalnie, sam bym zrobił, ale posługiwałem się kursem z HTML 5, tak jak wcześniej pisałem, bo chciałbym raczej bazować na HTML 5, niż bawić się w starego htmla czy xtmla. Poprostu próbuje zrozumiec strukture budowy strony w HTML 5. Tak robił 'gość' na kursie, myślałem, że kurs jest w miare prawidłowy :/ Dziwiła mnie własnie ilość nie potrzebnych divów czy selektorów ogólnie.





Mogło być gorzej, ale nie o to chodzi. Dzięki, że przynajmniej poświęciłeś czas, żeby to sprawdzić. Dzięki za pomoc, lepiej eliminować błedy na poczatku, niż się do nich przyzwyczajić i robić je z każdym razem

Nie chce robić mi się screena z IE8, ale wygląda to tak:
- menu jest jakby nie ostylowane. Elementy <li> wyświetlają się w pionowej liście
- 3 boxy z są jeden pod drugim rozciągnięte na całą stronę
- brak tła stopki i tego 'nasze projekty'

Aby strona wyglądała poprawnie w IE zainteresuj sie tym narzędziem: https://github.com/aFarkas/html5shiv.

@matzGRB,
nie napisałem swojego posta, żeby Cię zniechęcić. Wręcz przeciwnie. Uważam, że jak na pierwszą stronę to poszło Ci bardzo dobrze.

Co do Twojej odpowiedzi:

Do styli jako background-image, ale dla elementu nav ul. Nie ma potrzeby tworzyć dodatkowego elementu żeby zrobić tło dla innego. Jest to wręcz nieprawidłowe.

Co do elementów HTML5, to chyba mnie źle zrozumiałeś. Chodziło mi o to, że zamiast:

[HTML] pobierz, plaintext 
<element_HTML5>
    <element_HTML>
        treść
    </element_HTML>  
</element_HTML5>
[HTML] pobierz, plaintext 

Wystarczy zrobić:

[HTML] pobierz, plaintext 
<element_HTML5>
    treść
 </element_HTML5>
[HTML] pobierz, plaintext 

@toffiak, dzięki, zoorientuje się w temacie

@sowiq, rozumiem, nie odczułem tego na zasadzie takiej jak piszesz, krytyka krytyką, ale to co mówisz jest prawdą i napewno znasz się na tym lepiej. Po to napisałem ten temat, aby dostać takie wskazówki jakie Ty mi własnie udzielasz, o to chodziło, więc nie czuję się jakis 'dotnknięty', wiedziałem, że coś jest źle, nikt nie jest idealny w tym co robi

Spróbuje poprzerabiać tak, żeby było juz dobrze i wrzuce jeszcze raz. Co do struktury HTML 5, rozumiem, że mam nowe selektory section, article, footer itp. ale czasem jest tego nie wystarczająco, tzn. moge chyba w daną sekcje z html 5, komponować zwykłe, proste divy z id ? Typu:

[HTML] pobierz, plaintext 
<header>
 
<div id="menu">
 
<nav>
</nav>
 
</div>
 
</header>
 
<section>
 
<div id="main">
</div>
 
</section>
[HTML] pobierz, plaintext 

Brakuje ci atrybutów role na elementach. Zobacz np html5doctor. Jeżeli potrzebujesz do stylowania możesz jak najbardziej dodawać ekstra elementy. Pamiętaj że masz też :after i :before w wielu przypadkach pomaga żeby umieścić grafiki albo inne ozdobniki.
No i jest element main zamiast div#main.

[HTML] pobierz, plaintext 
<br class="clear" />
[HTML] pobierz, plaintext 

To mi się nie podoba i element menu niżej.

Teraz możesz jeszcze poprawić i dodać np wytyczne WAI

http://s29.postimg.org/8ih2nzvf9/Fundacja_PATENT.png
no chyba coś nie wyszło

hmm, widze, że dodatkowo nie wczytuje czcionki? dlaczego? użyłem @font-face, wszystko wygląda prawidłowo :/

Do czcionek polecam http://www.fontsquirrel.com/tools/webfont-generator

Ucz sie ucz. Dobra robota.
Ja w moich poczatkach wstawialem bmp
Strona o dragon ball...

Poczytaj http://css-tricks.com/
Pomysl o uzyciu np bootstrap od twitter(a)
A czcionki? Google fonts...

Fajnie bylo kiedys... 5mb hosting plikow html i jpg + reklamy :/