Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Projekt 1 HTML5/CSS3 początki!
maiza
post 10.02.2014, 15:39:11
Post #1





Grupa: Zarejestrowani
Postów: 12
Pomógł: 0
Dołączył: 15.07.2009

Ostrzeżenie: (0%)
-----


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?
Go to the top of the page
+Quote Post
Turson
post 10.02.2014, 15:52:02
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


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

Cytat
Dodatko jak widać na jpg w szablonie jest dość nietypowa czcionka

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

Cytat
Ma ktoś jakiś pomysł, jak taką galerie z bocznymi przelacznikami i poziomym suwakiem moge zrobic?

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 tongue.gif ba, w ogóle nie wygląda
Go to the top of the page
+Quote Post
sowiq
post 10.02.2014, 16:06:15
Post #3





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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.
  1. <div id="bg_menu">
  2. <img src="images/bg_menu.png" alt="bg"/>
  3. </div>
  4.  
  5. <nav>
  6. <ul>
  7. <li><a href="#">Home</a> </li>
  8. <li><a href="#">O Fundacji</a> </li>
  9. <li><a href="#">Działalność</a> </li>
  10. <li><a href="#">Wydarzenia</a> </li>
  11. <li><a href="#">Nowe projekty</a> </li>
  12. <li><a href="#">Kontakt</a> </li>
  13. </ul>
  14. </nav>


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?
  1. <section>
  2. <div id="artykuly">
  3. [...]
  4. </div>
  5. </section>
  6. <footer id="stopka">
  7. <div id="zawartosc_stopki">
  8. [...]
  9. </div>
  10. </footer>


Wystarczyłoby:
  1. <section id="artykuly">
  2. [...]
  3. </section>
  4. <footer id="stopka">
  5. [...]
  6. </footer>



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

Ten post edytował sowiq 10.02.2014, 16:07:09
Go to the top of the page
+Quote Post
maiza
post 10.02.2014, 16:33:37
Post #4





Grupa: Zarejestrowani
Postów: 12
Pomógł: 0
Dołączył: 15.07.2009

Ostrzeżenie: (0%)
-----


Cytat(Turson @ 10.02.2014, 15:52:02 ) *
Nie dodali jej do psd? ohmy.gif Tekst powininen być wycentrowany w każdym boxie


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.

Cytat(Turson @ 10.02.2014, 15:52:02 ) *
Otworzyłem z ciekawości w IE8 i nie za ciekawie wygląda tongue.gif ba, w ogóle nie wyglą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

Cytat(sowiq @ 10.02.2014, 16:06:15 ) *
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.
<div id="bg_menu">
<img src="images/bg_menu.png" alt="bg"/>
</div>


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ć smile.gif Ale to co Ty piszesz ma sens. Rozumiem, że wrzucić to do styli, jako bg dla diva bg_menu ?

Cytat(sowiq @ 10.02.2014, 16:06:15 ) *
<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]

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 />).


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

Cytat(sowiq @ 10.02.2014, 16:06:15 ) *
Po co na siłę stosujesz HTML5, powielając tym samym elementy HTML?
  1. <section>
  2. <div id="artykuly">
  3. [...]
  4. </div>
  5. </section>
  6. <footer id="stopka">
  7. <div id="zawartosc_stopki">
  8. [...]
  9. </div>
  10. </footer>


Wystarczyłoby:
  1. <section id="artykuly">
  2. [...]
  3. </section>
  4. <footer id="stopka">
  5. [...]
  6. </footer>


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.


Cytat(sowiq @ 10.02.2014, 16:06:15 ) *
A to tylko błędy na pierwszy rzut oka, w kodzie HTML, który ma 150 linijek. Jak dla mnie trója z minusem.



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 smile.gif wink.gif
Go to the top of the page
+Quote Post
Turson
post 10.02.2014, 16:45:37
Post #5





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


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'

Ten post edytował Turson 10.02.2014, 16:46:11
Go to the top of the page
+Quote Post
toffiak
post 10.02.2014, 16:48:08
Post #6





Grupa: Zarejestrowani
Postów: 395
Pomógł: 80
Dołączył: 24.08.2009

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
sowiq
post 10.02.2014, 16:59:28
Post #7





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


@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:
Cytat
Ale to co Ty piszesz ma sens. Rozumiem, że wrzucić to do styli, jako bg dla diva bg_menu ?

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:
  1. <element_HTML5>
  2. <element_HTML>
  3. treść
  4. </element_HTML>
  5. </element_HTML5>


Wystarczy zrobić:
  1. <element_HTML5>
  2. treść
  3. </element_HTML5>
Go to the top of the page
+Quote Post
maiza
post 10.02.2014, 17:26:01
Post #8





Grupa: Zarejestrowani
Postów: 12
Pomógł: 0
Dołączył: 15.07.2009

Ostrzeżenie: (0%)
-----


@toffiak, dzięki, zoorientuje się w temacie smile.gif

@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 smile.gif

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:

  1. <header>
  2.  
  3. <div id="menu">
  4.  
  5. <nav>
  6. </nav>
  7.  
  8. </div>
  9.  
  10. </header>
  11.  
  12. <section>
  13.  
  14. <div id="main">
  15. </div>
  16.  
  17. </section>


Go to the top of the page
+Quote Post
viking
post 10.02.2014, 17:44:01
Post #9





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


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.

  1. <br class="clear" />

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

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


--------------------
Go to the top of the page
+Quote Post
sazian
post 10.02.2014, 19:48:15
Post #10





Grupa: Zarejestrowani
Postów: 1 043
Pomógł: 141
Dołączył: 19.09.2006
Skąd: B-tów

Ostrzeżenie: (0%)
-----


http://s29.postimg.org/8ih2nzvf9/Fundacja_PATENT.png
no chyba coś nie wyszło
Go to the top of the page
+Quote Post
maiza
post 10.02.2014, 20:00:41
Post #11





Grupa: Zarejestrowani
Postów: 12
Pomógł: 0
Dołączył: 15.07.2009

Ostrzeżenie: (0%)
-----


hmm, widze, że dodatkowo nie wczytuje czcionki? dlaczego? użyłem @font-face, wszystko wygląda prawidłowo :/
Go to the top of the page
+Quote Post
Turson
post 10.02.2014, 20:17:19
Post #12





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----


Do czcionek polecam http://www.fontsquirrel.com/tools/webfont-generator
Go to the top of the page
+Quote Post
ixpack
post 18.04.2014, 23:45:17
Post #13





Grupa: Zarejestrowani
Postów: 248
Pomógł: 55
Dołączył: 1.06.2010
Skąd: mam to wiedzieć?

Ostrzeżenie: (0%)
-----


Ucz sie ucz. Dobra robota.
Ja w moich poczatkach wstawialem bmp tongue.gif
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 :/

Ten post edytował ixpack 18.04.2014, 23:45:45


--------------------
Łatwo jest być odważnym za murami własnego zamku.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 08:11