Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [www] Strona Web Designera
Forum PHP.pl > Inne > Oceny
unnamedly
Witam, proszę o ocenę mojej strony pod prawie każdym względem (oprócz względu braku artykułów, bo one się pojawią niebawem. Slider też nie jest w 100% dokończony). Wygląd strony, treść, ogólna ocena.
Ważne bym zaznaczył, że stronę robiłem od totalnego zera. Po prostu notatnik, ciepła herbatka i do roboty!

Link: http://ziuty.pl
!*!
- typografia leży
- logo jest rozmazane
- czarny pasek nie jest zawsze na dole, przez co widać pod nim tło
- ten "rozbłysk" po załadowaniu strony jest zbędny wink.gif
- kod css w kodzie
- formularz nie zgłasza błędów
- obok html5 to nawet nie stało

Kod
<center style='position: relative'>

serio?

Edycja

Podsumowując... Slogan
Cytat
Good design is good business.

Treść nie pasuje do obrazka wink.gif

Edycja 2:
- brak filtrowania danych http://ziuty.pl/search.php?s=%3Cdiv%3Epozd...Fdiv%3EI+innych
redeemer
XSS (parametr s):
http://ziuty.pl/search.php?s=%3Cscript%3Ea...one&by=rate

SQL injection + information disclosure (parametry last i by):
http://ziuty.pl/search.php?s=%%&conten...9;x&by=date

PrinceOfPersia
Miałem ochotę to zamknąć, ponieważ uznałem, że mi się jakaś reklama włączyła.

Szczególnie, że te slajdy też zbyt "reklamowo" wyglądają - jak widzę hasła typu "Dobra strona
internetowa to klucz do sukcesu w Internecie! " od razu zamykam, wnioskując, że to kolejne home.pl, nazwa.pl czy inny szajs mi się reklamuje, żebym kupił hosting.

No i zbyt miga to wszystko i zbyt efekciarskie. Trochę jakby a siłę próbujesz dowalić stronę efektami, stockowymi zdjęciami, ikonkami.
Problem tylko taki, że... wszyscy dzisiaj tak robią, więc się nie wyróżniasz.

No i:
1. ten czarny pasek na dole jakoś zbyt przytłacza
2. po co slajdy się tak odbijają? kijowo to wygląda i przyprawia to o zawrót głowy.

Chociaż ogólnie w miarę czysto wyglądałoby, gdyby nie tyle efektów...
wujek2009
- Stopkę ściągnij do dołu - osobiście nie lubię jak lata po stronie, pomimo że jest mało treści. Zainteresuj się hasłem "sticky footer"
- Strona główna nie przemawia za mną - sam slider? Może zrób większy slider, albo bezpośrednio na stronę główną portfolio dodaj - tak jak na niektórych stronach www fotografów
- Linki: mało znaczący szczegół, ale lepiej by się prezentowały w innej formie np. about.php => o-mnie, lub about (samo, bez rozszerzenia)
- W zakładce "O mnie" te strzałki z sekcji "Dlaczego akurat ja" - są na pewno w jednej linii?
- Zakładka oferta - brak marginesów dla tekstów i ogólnie pusta przestrzeń po prawej stronie: rozciągnij tabelkę na full width?
- W formularzu kontaktowym rozciągnij textarea na długość inputów
- Dlaczego title nadajesz przez javascript? Rozbij sobie wygląd na: header.php, footer.php i includuj te dwa pliki w about.php, contact.php i będziesz mógł przekazywać bez problemu TITLE.
- Ten tag "center" czy on na pewno tam powinien być? Może jakaś alternatywa typu text-align: center lub dla elementu: margin: 0 auto? snitch.gif

Ogólnie strona na plus, mi się podoba design :-)
Fifi209
Cytat
» Moją twórczość cechuje również przejrzystość i estetyka. Oprócz tego rezygnuję ze zbędnych elementów, które przeciążają stronę, przez co dłużej nam się ładuje.


Tło na którym jest ten napis dokładnie przeczy pierwszemu zdaniu. Szybkość ładowania się strony, a raczej jej brak przeczy za to drugiemu.
Posio
Jeśli już robisz na tło taki obrazek duży, zastosuj PNG z przeplotem, bo taki ładujący się bardzo mnie irytuje.
Pulpetto
Slider strasznie irytuje... To odskakiwanie, skaczący po nim tekst - wygląda jak słaba flashowa reklama.
Do tego tekst w "O mnie" - zupełnie nie zachęciłoby mnie do zatrudnienia Ciebie... "Dziennie przeznaczam tyle a tyle czasu", "Trooooooszke" i tego typu kwiatki - trochę nie nadaje się to do pokazania potencjalnemu pracodawcy. Trochę mi to nie pasuje - może tak ma być ale pierwsze wrażenie jakie robi strona to: poważne, a nie "jajcarskie" smile.gif
sf
Cytat(unnamedly @ 16.03.2013, 17:34:45 ) *
Ważne bym zaznaczył, że stronę robiłem od totalnego zera. Po prostu notatnik, ciepła herbatka i do roboty!


Kto jest grupą docelową tej strony? Inni uczniowie, którzy muszą napisać coś na zaliczenie (może to miałoby sens)? Firmy raczej nie ponieważ teksty mają formę przeznaczoną dla młodej osoby, mam tu na myśli osoby poniżej 20 roku życia.

Jeśli chcesz dorabiać sobie tworząc strony to nie twórz wszystkiego sam, zakup sobie jakiś gotowy szablon z templatemonsert i to samo oferuj klientom. Robienie wszystkiego od zera w takim wydaniu (próba oferowania usług) nie ma sensu.
unnamedly
Cytat(!*! @ 16.03.2013, 17:58:44 ) *
#1: typografia leży

#2: logo jest rozmazane

#3: czarny pasek nie jest zawsze na dole, przez co widać pod nim tło

#4: ten "rozbłysk" po załadowaniu strony jest zbędny ;)

#5: kod css w kodzie

#6: formularz nie zgłasza błędów

#7: obok html5 to nawet nie stało

#8:
Kod
<center style='position: relative'>

serio?

#9: Podsumowując... Slogan
Treść nie pasuje do obrazka ;)

#10: brak filtrowania danych http://ziuty.pl/search.php?s=%3Cdiv%3Epozd...Fdiv%3EI+innych


#1: Co masz na myśli? Jeśli otwierałeś stronę na IE, to chodziło Ci pewnie o standardowe czcionki, lecz ten problem już naprawiony (IE nie odczytywało .ttf, przez co większość czcionek to był Arial. Zastosowałem .otf, a to rozszerzenie IE czyta poprawnie).

#2: Nowe, prostsze logo i header. Mam nadzieję, że przypadnie do gustu, jak nie - pisać.

#3: Z tym mam największy problem (standardowe metody z internetu nie działają), lecz postaram się to naprawić.

#4: Rozbłysk usunięty.

#5: Już nie ;]

#6: Naprawione, zrobiłem prowizoryczne zgłaszanie błędów przy wysyłaniu.

#7: Hm?

#8: Gotowe.

#9: Nie za bardzo rozumiem.

#10: Naprawione.

Cytat(redeemer @ 16.03.2013, 18:04:57 ) *
XSS (parametr s):
http://ziuty.pl/search.php?s=%3Cscript%3Ea...one&by=rate

SQL injection + information disclosure (parametry last i by):
http://ziuty.pl/search.php?s=%%&conten...9;x&by=date


Pierwsze naprawione, a drugie jest aż tak ważne? Z tymi % i ' ktoś może ingerować w bazę? Błąd się wyświetla tylko w przypadku, który podałeś.

Cytat(PrinceOfPersia @ 16.03.2013, 19:16:47 ) *
Miałem ochotę to zamknąć, ponieważ uznałem, że mi się jakaś reklama włączyła.

Szczególnie, że te slajdy też zbyt "reklamowo" wyglądają - jak widzę hasła typu "Dobra strona
internetowa to klucz do sukcesu w Internecie! " od razu zamykam, wnioskując, że to kolejne home.pl, nazwa.pl czy inny szajs mi się reklamuje, żebym kupił hosting.

No i zbyt miga to wszystko i zbyt efekciarskie. Trochę jakby a siłę próbujesz dowalić stronę efektami, stockowymi zdjęciami, ikonkami.
Problem tylko taki, że... wszyscy dzisiaj tak robią, więc się nie wyróżniasz.

No i:
1. ten czarny pasek na dole jakoś zbyt przytłacza
2. po co slajdy się tak odbijają? kijowo to wygląda i przyprawia to o zawrót głowy.

Chociaż ogólnie w miarę czysto wyglądałoby, gdyby nie tyle efektów...


1. J/w, w ciągu tygodnia całkowicie zostanie zmieniony na bardziej "klasyczny styl".

2. Widzę, że ówczesny slider nikomu nie przypadł do gustu, więc niebawem CAŁKOWICIE go zmienię i już mam pomysł co oprócz niego wstawić na główną (zauważyłem to na zagranicznych portfoliach web designerów). Na slider mam wg mnie genialny pomysł, ale to się okaże czy taki "genialny".

Cytat(wujek2009 @ 16.03.2013, 19:17:00 ) *
#1: Stopkę ściągnij do dołu - osobiście nie lubię jak lata po stronie, pomimo że jest mało treści. Zainteresuj się hasłem "sticky footer"

#2: Strona główna nie przemawia za mną - sam slider? Może zrób większy slider, albo bezpośrednio na stronę główną portfolio dodaj - tak jak na niektórych stronach www fotografów

#3: Linki: mało znaczący szczegół, ale lepiej by się prezentowały w innej formie np. about.php => o-mnie, lub about (samo, bez rozszerzenia)

#4: W zakładce "O mnie" te strzałki z sekcji "Dlaczego akurat ja" - są na pewno w jednej linii?

#5: Zakładka oferta - brak marginesów dla tekstów i ogólnie pusta przestrzeń po prawej stronie: rozciągnij tabelkę na full width?

#6: W formularzu kontaktowym rozciągnij textarea na długość inputów

#7: Dlaczego title nadajesz przez javascript? Rozbij sobie wygląd na: header.php, footer.php i includuj te dwa pliki w about.php, contact.php i będziesz mógł przekazywać bez problemu TITLE.

#8: Ten tag "center" czy on na pewno tam powinien być? Może jakaś alternatywa typu text-align: center lub dla elementu: margin: 0 auto? snitch.gif
Ogólnie strona na plus, mi się podoba design :-)


#1: To już wyżej wyjaśniłem smile.gif

#2: Również wyżej wyjaśnione.

#3: Zrobione.

#4: Tak, na 100% ;]

#5: Gotowe, lecz zmienię całkowicie tą zakładkę.

#6: Hmm, u mnie w Google Chrome to wygląda tak: http://screenshoot.me/3VrpDX , czyli jak widać jest równiutko. W jakiej przeglądarce źle się wyświetla?

#7: Zmienione.

#8: Już jest ok i dzięki wielkie biggrin.gif

Cytat(Fifi209 @ 16.03.2013, 19:47:02 ) *
Tło na którym jest ten napis dokładnie przeczy pierwszemu zdaniu. Szybkość ładowania się strony, a raczej jej brak przeczy za to drugiemu.


Tło zmienione i kolor napisu leciutko też. Powinno być lepiej. Tak samo z szybkością. Usunąłem ten wielki background (40% krótsze ładowanie). Nic więcej nie zrobię... Reszta zależy od mojego hostingu.

Cytat(Posio @ 16.03.2013, 20:19:08 ) *
Jeśli już robisz na tło taki obrazek duży, zastosuj PNG z przeplotem, bo taki ładujący się bardzo mnie irytuje.


J/w - tło usunięte, lecz przez chwilę zastosowałem z przeplotem.

Cytat(Pulpetto @ 16.03.2013, 23:39:55 ) *
Slider strasznie irytuje... To odskakiwanie, skaczący po nim tekst - wygląda jak słaba flashowa reklama.
Do tego tekst w "O mnie" - zupełnie nie zachęciłoby mnie do zatrudnienia Ciebie... "Dziennie przeznaczam tyle a tyle czasu", "Trooooooszke" i tego typu kwiatki - trochę nie nadaje się to do pokazania potencjalnemu pracodawcy. Trochę mi to nie pasuje - może tak ma być ale pierwsze wrażenie jakie robi strona to: poważne, a nie "jajcarskie" smile.gif


Slider - wyjaśnione wyżej parę razy. Co do "jajcarskiego tekstu", to masz rację - pisałem trochę slangiem, bo nie wierzę, by jakaś poważna firma mnie wynajęła przy tak małym doświadczeniu. Bardziej nastawiałem się na młodsze osoby. Język zmienię przy okazji zmiany design`u na oficjalny biggrin.gif

Cytat(sf @ 19.03.2013, 11:29:48 ) *
Kto jest grupą docelową tej strony? Inni uczniowie, którzy muszą napisać coś na zaliczenie (może to miałoby sens)? Firmy raczej nie ponieważ teksty mają formę przeznaczoną dla młodej osoby, mam tu na myśli osoby poniżej 20 roku życia.

Jeśli chcesz dorabiać sobie tworząc strony to nie twórz wszystkiego sam, zakup sobie jakiś gotowy szablon z templatemonsert i to samo oferuj klientom. Robienie wszystkiego od zera w takim wydaniu (próba oferowania usług) nie ma sensu.


Wyżej wszystko opisane.

Czyli rozumiem, że mam robić same szablony, a nie całe CMS`y?



Design strony zmieniam stopniowo (aż będzie zmieniony w 100% i idealny). Na dzień dzisiejszy (w chwili pisania tego postu) w 70% skończyłem nowy header. Śmiało możecie oceniać zmienione części strony. Wasze rady totalnie mnie motywują. Będę zmieniał każdą niepasującą rzecz na stronie, tak aby witryna była IDEALNA.

StrefaPi
http://gtmetrix.com/reports/ziuty.pl/V5poRhsh - zobacz jeszcze tutaj... dla mnie 1,8 MB na start to o wiele za dużo jak na taką stronę... ;)

w Safari animacja "Dobra strona..." pozostawia za sobą piksele... za literami tworzy się ślad z oderwanych pikseli ;)
com
Widzę jesteś młodym początkującym webdesign`erem, dlatego poniekąd potrafie zrozumieć te błedy które popełniasz, ale podobnie jak inni użytkownicy poddałem twoje portfolio ocenie i poniżej zaprzetuje co mi się nasuwa:

Zacznijmu może od logo:

na białym tle jakie masz w oryginale jest wporządku, ale kiedy złożysz go z tym czarnym tłem strony nie wygląda już tak efektownie, ponieważ wygląda to tak jakbyś otworzył to w paincie i wymazał środek gumką, wiem może sie troche czepiam ale to jako pierwsze rzuciło mi się po otwarciu twojej strony, sugerowałbym poprostu krawędzie jakoś podkreślić żeby przejście miedzy logiem a czarnym tłem było widoczne, bo w oryginale jest tam cień który poprostu sie zlewa z twiom tłem, co psuje całe logo.

Druga kwestia idać z duchem czasu, jak wiadomo możliwa jest niestandardowa typografia na naszej stronie, z czego jak widać korzystasz, jednak jest jedno pytanie dlaczego wiec napis Kacper Ziuzia ... nie jest napisany za pomocą frontu, tylko obrazkiem. Utrudniasz w ten sposób algorytmą google i innym robotą indexowanie twojej strony pod kontem słów kluczowych, a co za tym idzie osłabiasz swoje szanse dotarcia do Klienta, owszem robot wyszuka Cię w stopce, ale tu chodzi o to żeby jak sie już zabiera za cos to powinno sie to robić dobrze, bo inaczej Klienci pójdą do konkurencji.

Kolejna sprawa nie mam pojęcia pod jaka wersją IE to testowałeś, bo jak ja odpalam pod IE to raz na 10 prób wgl załadował mi CSS, a ponadto typgrafia pod IE leży i kwiczy nadal. Polecam zajrzeć pod ten adres http://www.google.com/webfonts i tam odnaleść twój front, bo ładowane z tej strony dają Ci wiekszą pewność, że wgl zadziała ponadto przy wybieraniu frontu trzeba zaznaczyć subset=latin-ext odpowiada to za polskie znaki.

Kolejna kwestia
Cytat
Projektując strony, zwracam uwagę na panujące trendy i wymogi W3C.

Więc jak już ktoś wspomniał przebuduj ten szablon zgodni z panującym obecnie tendem, czyli koduj za pomocą HTML5, bo jak narazie korzystasz z wersji 4, z zadeklarowanym nagłowkiem na XHTML 1.0, co już wgl jest nieporozumieniem.

Idżmy dalej javascript i jquery

W moim odczuciu owszem pomysł może i nie był taki zły, ponadto ogromny plus za to iż nie ma tam flasha, ale jest tego troszke za dużo, pamiętaj że skrajności nie są dobre.

Ale najważniesze to jest to co teraz powiem, skoro już musisz mieć te 15 plików ze skryptami js to łąduj je asynchronicznie czyli dodajesz async, przykład:
[JAVASCRIPT] pobierz, plaintext
  1. <script async src="js/jquery.js"></script>
[JAVASCRIPT] pobierz, plaintext

Usprawni to napewno ładowanie strony, ale radziłbym tę ilość skryptów tak czy tak zredukować.

Przeczytaj to co napisałeś w O mnie z 5 razy i napisz to jescze raz bo zdania typu
Cytat
Zwracam dużą uwagę na doskonałość i dokładność tworzonej strony.
Mówia co ja tu robie ?!
Pozatym mówienie klientowi, że 7 razy zacznyłeś tworzenie szablonu od nowa, może go wystraszyć, bo pomyśli sobie, że będzie na swój web czekać pół roku, albo dłuzej.

Cytat
popularna biblioteka Javascript - jQuery
- jQuery to jest framework, biblioteka jest dziwną nazwą wink.gif

Pozatym w wyszukiwarce nigdy nie zwracaj tego w ten sposób że wyświetli Ci znaczniki html jak np. tutaj: Wyszukiwanie artykułów zawierających frazę: <div>pozdrowienia dla forum.php.pl</div>I innych. bo to po pierwsze źle wyglada, a po drugie zachęca nas do tego żeby jednak troszke bliżej sie przyjrzeć działaniu tego skryptu, dlatego obcinaj wszytkie znaczniki z fraz.

No to dobrneliśmy prawie do końca, zakładka kontakt, pytałeś w jakiej przegladarce wygląda nie tak to np. jest nią Firefox, błąd popełniasz w miejscu gdzie przydzielasz szerokości dla poszczególnych inputów itd, robi sie to poprzez klkulację tak żeby np. 1 wiersz gdzie są 2 inputy po sumowaniu ze sobą miał rozmiar taki sam jak pojedyńczy dla email i wiadomości, ponadto wyłacz możliwość rozszerzania na boki textarea, bo jest to bardzo częsty błąd nawet dużych firm webdesingn`erskich, a później layout im się rozsypuje. W twoim przypadku to nie nastąpi, ale to taka mała uwaga na przyszłość wink.gif

Kolejna kwestia stosowanie algorytmów typu 2+2 jest troche mało sesjowne, bo obecnie boty potrafią sobie z tym radzić, pozatym zawsze masz ten sam token.

Popracuj nad tą stopką, bo to naprawde nie jest trudne dodać 3 linijki w css i jest zawsze na swoim miejscu, przykład rozwiazania:
  1. position: fixed;
  2. bottom: 0px;
  3. width: 100%;


Pozatym nadal jest css w kodzie źródłowym strony, operuj na id i klasach wink.gif

Napisałeś
Cytat
W dzisiejszym świecie, urządzenia mobilne stają się głównym narzędziem do przeglądania Internetu. Swoje strony przystosowuję pod smartfony, tablety, laptopy i PC-ty.


To zainteresuj sie tematem responsive web design smile.gif

Cytat
Pierwsze naprawione, a drugie jest aż tak ważne? Z tymi % i ' ktoś może ingerować w bazę? Błąd się wyświetla tylko w przypadku, który podałeś.

Tak jest to ważne, pozatym wyłacz raportowanie błędów, a same błedy obsługuj poprzez try i catch wink.gif

No to chyba było by na tyle, troche się tego uzbierało, ale myśle moje sugestie okaża sie być tobie bardzo pomocne, pozdrawiam wink.gif
kamil4u
Ja trochę ponarzekam na kod. Ogólnie nie ma tragedii, ale... nie jest to poziom za który powinieneś brać pieniądze. Osobiście uważam, że jeśli już się bierze pieniądze powinno się robić to naprawdę bez błędów( chyba że klient zna Twój poziom ).

Weźmy np. stronę: http://ziuty.pl/contact - wybrana losowo
Moje uwagi:
1. pakowanie stylów CSS w style="..." to zły pomysł - od razu rzuca się to w oczy
2. Menu powinieneś oprzeć na liście
3.
Kod
<i class="icon-home" style="font-size: 15px; margin-right: 5px; position: relative; bottom: 15px; left: 19px; opacity: 0"></i>

Nie tworzy się pustych elementów. A wykorzystywanie tutaj elementu <i> już w ogóle mija się z celem
4. W złym zwyczaju jest umieszczanie JS w kodzie HTML bezpośrednio - wrzuca się taki kod do oddzielnego pliku
5. <center> - znacznik nie wykorzystywany już
6. Piszesz, że znasz się na SEO - po kodzie HTML średnio to widać - chociaż takie podstawy jak atrybuty title czy alt.
7.
Kod
<div class='bottom'>
    <div class="wrapper">

Staraj się trzymać jakiś standard - chodzi mi o " i '
8.
Cytat
document.title = 'Kontakt';
- SEO? Mamy do tego odpowiedni tag
9.
Kod
<br /><br /><br />
Przerwy robimy inaczej - najczęściej za pomocą margin
10. CSS to inny temat, ale tak na pierwszy rzut ok zauważyłem, że nie używasz prawie w ogóle id(#). Nie jest to żaden błąd czy coś, ale uważam, że powinieneś przemyśleć kiedy lepiej wykorzystać klasę, a kiedy id.

Podejrzewam, że jeszcze coś by się znalazło( może na innych podstronach ), ale nie o to chodzi. Nie chcę Cię zniechęcić, a jedynie pokazać, że jeszcze trochę pracy przed Tobą.

Co do wyglądu się nie wypowiadam, bo grafik ze mnie żaden, a i gust mam raczej odmienny od większości ludzi - nie mniej w skrócie - nawet mi się podoba.

Pozdrawiam i powodzenia

PS. Nie wyjaśniałem tych uwag, ale jak nie wiesz dlaczego tak lub masz jakieś wątpliwości to zapytaj - postaram się wyjaśnić moją wizję.
com
Oczywiście jak slusznie zauważyl kolega powyżej, tego typu bledy sa nie dopuszczale, ponadto twoja strona ładuje sie zbyt dlugo i zabiera zbyt wiele przestrzeni, bo musisz miec na uwadze to, ze nadal nie wszyscy maja nielimtowany transfer, a pozatym spowalnia to znacznie korzstanie z twojej stronki, dlatego poucinaj co sie da, obrazki zoptymalizuj, przejrzyj i pousuwaj zbedne tagi z plikow css a pozatym wypadalo by pomyslec nad jakis dynamicznym ladowaniem tresci bo przeladowywanie strony jest praktycznie kiepskim pomyslem jesli mozna to zrobic sprawniej np poprzez js ; ) a tak na marginiesie to polecamy naszego bloga na ktorym poruszamy kwestie przydatne wlasnie poczakujacym taki jak Ty : [ciach]
mar1aczi
Cytat(com @ 22.03.2013, 02:47:56 ) *
... a tak na marginiesie to polecamy naszego bloga na ktorym poruszamy kwestie przydatne wlasnie poczakujacym taki jak Ty : [ciach]

A Wy to już taki profesjonalizm? Sratytaty ;]

Dlaczego te PL-znaczki (FF v19.0.2) są większe od pozostałych liter w środku zdania? I skąd ta anglojęzyczna fraza?

Tak trochę nieładnie innych uczyć samemu mając błędy w "materiałach do nauki".
!*!
Cytat(unnamedly @ 21.03.2013, 20:33:55 ) *
#1: Co masz na myśli? Jeśli otwierałeś stronę na IE, to chodziło Ci pewnie o standardowe czcionki, lecz ten problem już naprawiony (IE nie odczytywało .ttf, przez co większość czcionek to był Arial. Zastosowałem .otf, a to rozszerzenie IE czyta poprawnie).

Otwierałem to w każdej przeglądarce, i w każdej było biednie, teraz jest sans i jest dobrze.

Cytat(unnamedly @ 21.03.2013, 20:33:55 ) *
#2: Nowe, prostsze logo i header. Mam nadzieję, że przypadnie do gustu, jak nie - pisać.

Ujdzie, choć skoro to tekst, to tekstem mógłby być.

Cytat(unnamedly @ 21.03.2013, 20:33:55 ) *
#7: Hm?
#8: Gotowe.

Chciałeś zrobić html5, ale nie wiesz jak. A center nadal jest w kodzie.

@com - przestań sobie robić jaja, żeby kogoś uczyć trzeba mieć ku temu jakieś podstawy, a nie podawać link do blogaska który ma dwa wpisy na krzyż, średnia ta technika spamu.
PrinceOfPersia
Cytat("StrefaPi")
- zobacz jeszcze tutaj... dla mnie 1,8 MB na start to o wiele za dużo jak na taką stronę... wink.gif

radzę autorowi strony przekonwertowanie co bardziej wielgaśnych obrazków z PNG do JPG. Wielkość w kilobajtach potrafi spaść kilkakrotnie.

Cytat("com")
- jQuery to jest framework, biblioteka jest dziwną nazwą

Odwrotnie. Jak głosi tekst na stronie oficjalnej ( What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library ), nie ma nic o frameworku. Poza tym ciężko nazwać jQuery frameworkiem skoro nie narzuca on struktury, a jedynie jest zestawem narzędzi, z których możesz ale nie musisz korzystać.
StrefaPi
co do fontów to zrób je raz a kompleksowo np. http://www.fontsquirrel.com/tools/webfont-generator bo chyba coś jest nie tak z odwołaniem do fontawesome-webfont.eot?#iefix&v=3.0.1 bo tego fontu po prostu nie ma na serwerze...

pozatym fajnie masz skonfigurowany serwer, każdy plik otrzymuje Cookie, obrazek, css czy cokolwiek... cała masa skryptów... css'ów... poczytaj te uwagi z gtmetrix... bo to jeszcze bardziej leży niż cokolwiek innego...
com
Co do fontu na blogu, to wczoraj aktualizowaliśmy szablon do nowej wersji i zostały podmieniony plik functions.php na oryginalny w nowej wersji, a z powodu późnej już godziny tego nie sprawdziliśmy dlatego sie krzaczy, ale to wystarczy jedna liniijka i polski znaki będa wyświetlać się normalnie, bo tutaj poprostu wyświetla je domyślną czcionką, zresztą piszemy o tym na tym blogu w poscie 2 [ciach] wiec jak nie masz sie do czego przyczepić, to tego nie rób... owszem zgodzę se ze w obecnej wersji jQuery nie pada słowo framework, jednakże jak przejrzysz googla to kiedyś operowało sie na określeniu, że jest to framework, ale powiedzmy mogę sie z wami zgodzić wink.gif a co do małej ilości treści to owszem narazie może nie jest ich pokażna sumka, ale cały czas pracujemy nad tym, wiec nie ma co sie tego czepiać, a poprostu jak raz zajrzy i go zainteresuje to wiadomo że wróci, niebawem dodamy post na temat błedów popełnianych przez poczatkujacych programistów i jak sobie z nimi radzić...
Daiquiri
Com, wszystko fajnie, ale temat nie dotyczy oceny Twojego bloga, dlatego proszę o zaprzestanie dyskusji na ten temat - chyba, że założysz własny smile.gif.Twoja ocena strony jest jak najbardziej wskazana, linkowanie do pustego bloga, już nie smile.gif. Bo, z całym szacunkiem, ale czego ma się tam nauczyć webdesigner? Jak korzystać z polskich czcionek w WP i kodować w UTF-8 bez BOM? Po prostu w tej chwili wygląda to na siłową reklamę. Jak rozwiniecie się w treściach adekwatnych do poruszanych tematów, możesz linkować do woli.

Co do samej strony miałabym jedną uwagę (bo w zasadzie sporo już zostało napisane): dobry webdesigner powinien umieć przede wszystkim umiejętnie zarządzać swoim arsenałem bajerów. To przychodzi z czasem, ale naprawdę warto się nad tym zastanowić smile.gif.

PS. Sam zobaczysz, że nie dojdziesz do tego, że Twoja strona będzie "Idealna". Zawsze będziesz chciał coś podmienić, ponieważ praca nad stroną online to jak operacja na żywym i nieustanie ewoluującym organizmie.

Powodzenia w dalszej pracy! smile.gif
unnamedly
Cytat(StrefaPi @ 22.03.2013, 00:51:14 ) *
http://gtmetrix.com/reports/ziuty.pl/V5poRhsh - zobacz jeszcze tutaj... dla mnie 1,8 MB na start to o wiele za dużo jak na taką stronę... ;)

w Safari animacja "Dobra strona..." pozostawia za sobą piksele... za literami tworzy się ślad z oderwanych pikseli ;)


Teraz to lepiej wygląda: http://gtmetrix.com/reports/ziuty.pl/WzZz36dt (ok. 400KB) , slider całkiem usunięty.

Cytat(com @ 22.03.2013, 02:30:25 ) *
1) Zacznijmu może od logo:
na białym tle jakie masz w oryginale jest wporządku, ale kiedy złożysz go z tym czarnym tłem strony nie wygląda już tak efektownie, ponieważ wygląda to tak jakbyś otworzył to w paincie i wymazał środek gumką, wiem może sie troche czepiam ale to jako pierwsze rzuciło mi się po otwarciu twojej strony, sugerowałbym poprostu krawędzie jakoś podkreślić żeby przejście miedzy logiem a czarnym tłem było widoczne, bo w oryginale jest tam cień który poprostu sie zlewa z twiom tłem, co psuje całe logo.

2) Druga kwestia idać z duchem czasu, jak wiadomo możliwa jest niestandardowa typografia na naszej stronie, z czego jak widać korzystasz, jednak jest jedno pytanie dlaczego wiec napis Kacper Ziuzia ... nie jest napisany za pomocą frontu, tylko obrazkiem. Utrudniasz w ten sposób algorytmą google i innym robotą indexowanie twojej strony pod kontem słów kluczowych, a co za tym idzie osłabiasz swoje szanse dotarcia do Klienta, owszem robot wyszuka Cię w stopce, ale tu chodzi o to żeby jak sie już zabiera za cos to powinno sie to robić dobrze, bo inaczej Klienci pójdą do konkurencji.

3) Kolejna sprawa nie mam pojęcia pod jaka wersją IE to testowałeś, bo jak ja odpalam pod IE to raz na 10 prób wgl załadował mi CSS, a ponadto typgrafia pod IE leży i kwiczy nadal. Polecam zajrzeć pod ten adres http://www.google.com/webfonts i tam odnaleść twój front, bo ładowane z tej strony dają Ci wiekszą pewność, że wgl zadziała ponadto przy wybieraniu frontu trzeba zaznaczyć subset=latin-ext odpowiada to za polskie znaki.

4) Więc jak już ktoś wspomniał przebuduj ten szablon zgodni z panującym obecnie tendem, czyli koduj za pomocą HTML5, bo jak narazie korzystasz z wersji 4, z zadeklarowanym nagłowkiem na XHTML 1.0, co już wgl jest nieporozumieniem.

5) W moim odczuciu owszem pomysł może i nie był taki zły, ponadto ogromny plus za to iż nie ma tam flasha, ale jest tego troszke za dużo, pamiętaj że skrajności nie są dobre.

6) Ale najważniesze to jest to co teraz powiem, skoro już musisz mieć te 15 plików ze skryptami js to łąduj je asynchronicznie czyli dodajesz async, przykład:
[JAVASCRIPT] pobierz, plaintext
  1. <script async src="js/jquery.js"></script>
[JAVASCRIPT] pobierz, plaintext

Usprawni to napewno ładowanie strony, ale radziłbym tę ilość skryptów tak czy tak zredukować.

7) Przeczytaj to co napisałeś w O mnie z 5 razy i napisz to jescze raz bo zdania typu Mówia co ja tu robie ?!
Pozatym mówienie klientowi, że 7 razy zacznyłeś tworzenie szablonu od nowa, może go wystraszyć, bo pomyśli sobie, że będzie na swój web czekać pół roku, albo dłuzej.

8) Pozatym w wyszukiwarce nigdy nie zwracaj tego w ten sposób że wyświetli Ci znaczniki html jak np. tutaj: Wyszukiwanie artykułów zawierających frazę: <div>pozdrowienia dla forum.php.pl</div>I innych. bo to po pierwsze źle wyglada, a po drugie zachęca nas do tego żeby jednak troszke bliżej sie przyjrzeć działaniu tego skryptu, dlatego obcinaj wszytkie znaczniki z fraz.

9) No to dobrneliśmy prawie do końca, zakładka kontakt, pytałeś w jakiej przegladarce wygląda nie tak to np. jest nią Firefox, błąd popełniasz w miejscu gdzie przydzielasz szerokości dla poszczególnych inputów itd, robi sie to poprzez klkulację tak żeby np. 1 wiersz gdzie są 2 inputy po sumowaniu ze sobą miał rozmiar taki sam jak pojedyńczy dla email i wiadomości, ponadto wyłacz możliwość rozszerzania na boki textarea, bo jest to bardzo częsty błąd nawet dużych firm webdesingn`erskich, a później layout im się rozsypuje. W twoim przypadku to nie nastąpi, ale to taka mała uwaga na przyszłość ;)

10) Kolejna kwestia stosowanie algorytmów typu 2+2 jest troche mało sesjowne, bo obecnie boty potrafią sobie z tym radzić, pozatym zawsze masz ten sam token.

11) Popracuj nad tą stopką, bo to naprawde nie jest trudne dodać 3 linijki w css i jest zawsze na swoim miejscu, przykład rozwiazania:
  1. position: fixed;
  2. bottom: 0px;
  3. width: 100%;


12) Pozatym nadal jest css w kodzie źródłowym strony, operuj na id i klasach ;)


1) To png było od początku przystosowane pod białe i czarne tło (nie ma żadnych "białych pikseli").

2) Zrobiłem za pomocą fontu smile.gif

3) Całość jeśli chodzi o typografię, jest już poprawiona i na 100% działa na każdej przeglądarce.

4) Przystosowałem pod HTML5 smile.gif

5) Możliwie najbardziej zmniejszyłem ilość animacji jQuery.

6) Zrobiłem ładowanie asynchroniczne dla każdego skryptu oprócz jQuery (bo wtedy w ogóle nie działały skrypty).

7) Większość tekstów w niedalekiej przyszłości popoprawiam.

8) A jak ktoś będzie chciał wyszukać artykuł z pomocą tagu HTML?

9) Próbowałem chyba na wszystkie sposoby i niestety nie wychodziło mi wymierzenie idealnych szerokości dla wszystkich przeglądarek :/

10) Na razie boty dają się nabrać na "2+2", ale gdy będę więcej tego typu formularzy miał na stronie, to rozszerzę ten skrypt.

11) Oo dzięki wielkie za kodzik smile.gif Ale gdy strona miała dużą wysokość, to position: fixed sprawiał, że stopka podążała za nami. Musiałem to trochę zmodyfikować z użyciem jQuery (używanie Twojego kodu, gdy strony nie da się przewijać w poziomie (wtedy jest doczepiona na dole)).

12) Każdy nawet najmniejszy np. "style=font-align: center" mam podpiąć do klas? ohmy.gif

Cytat(kamil4u @ 22.03.2013, 02:51:40 ) *
1. pakowanie stylów CSS w style="..." to zły pomysł - od razu rzuca się to w oczy
2. Menu powinieneś oprzeć na liście
3.
Kod
<i class="icon-home" style="font-size: 15px; margin-right: 5px; position: relative; bottom: 15px; left: 19px; opacity: 0"></i>

Nie tworzy się pustych elementów. A wykorzystywanie tutaj elementu <i> już w ogóle mija się z celem
4. W złym zwyczaju jest umieszczanie JS w kodzie HTML bezpośrednio - wrzuca się taki kod do oddzielnego pliku
5. <center> - znacznik nie wykorzystywany już
6. Piszesz, że znasz się na SEO - po kodzie HTML średnio to widać - chociaż takie podstawy jak atrybuty title czy alt.
7.
Kod
<div class='bottom'>
    <div class="wrapper">

Staraj się trzymać jakiś standard - chodzi mi o " i '
8. - SEO? Mamy do tego odpowiedni tag
9.
Kod
<br /><br /><br />
Przerwy robimy inaczej - najczęściej za pomocą margin
10. CSS to inny temat, ale tak na pierwszy rzut ok zauważyłem, że nie używasz prawie w ogóle id(#). Nie jest to żaden błąd czy coś, ale uważam, że powinieneś przemyśleć kiedy lepiej wykorzystać klasę, a kiedy id.


1. Od teraz będę pakował do pliku, ale pytanie jak u kolegi wyżej: każdy nawet najmniejszy np. "style=font-align: center" mam podpiąć do klas? ohmy.gif
2. Menu oparte na liście miałem aż do czasu, aż zauważyłem, że w każdej przeglądarce wyświetla się ono inaczej (w innych miejscach i odstępach). Dlatego zrezygnowałem i oparłem na span`ach.
3. Czyli "opacity" już nie jest w standardzie CSS3? Rozumiem, że mam użyć display: none.
4. Zrobione smile.gif
5. W wielu przypadkach margin: 0 auto, lub text-align: center nie spełniał swojego zadania. Mogę użyć zamiast nich text-align: -webkit-center?
6. Alt="" przy img używam zgodnie ze standardami W3C. Wartości atrybutu title już nie nadaję przez JS.
7. Dzięki za radę smile.gif Tu przyznam się z bólem, że wolałem iść na łatwiznę, używając przy echo "<costam costam='costam'>" (cudzysłowów), a przy czystym html wyświetlanym bez echo - apostrofy. Teraz już będę trzymał się cudzysłowów.
8. Naprawione, nadawane bezpośrednio. smile.gif
9. Dość dużo tych br`ek mam. Część już poprawiłem i nadaję przez margin, a drugą część na bieżąco będę poprawiał.
10. ID dla pojedynczych elementów, a CLASS dla powtarzających się, rozumiem? Od teraz będę tak robił ;)

Cytat(!*! @ 22.03.2013, 09:42:36 ) *
1. Ujdzie, choć skoro to tekst, to tekstem mógłby być.
2. Chciałeś zrobić html5, ale nie wiesz jak. A center nadal jest w kodzie.


1. Jest napis w logo tekstem.
2. Już rozumiem, ale jak pisałem koledze wyżej: "w wielu przypadkach margin: 0 auto, lub text-align: center nie spełniał swojego zadania. Mogę użyć zamiast nich text-align: -webkit-center".

Cytat(PrinceOfPersia @ 22.03.2013, 10:29:26 ) *
radzę autorowi strony przekonwertowanie co bardziej wielgaśnych obrazków z PNG do JPG. Wielkość w kilobajtach potrafi spaść kilkakrotnie.


Rzeczywiście smile.gif Obrazki przekonwertowane.

Cytat(StrefaPi @ 22.03.2013, 10:54:23 ) *
1) co do fontów to zrób je raz a kompleksowo np. http://www.fontsquirrel.com/tools/webfont-generator bo chyba coś jest nie tak z odwołaniem do fontawesome-webfont.eot?#iefix&v=3.0.1 bo tego fontu po prostu nie ma na serwerze...

2) pozatym fajnie masz skonfigurowany serwer, każdy plik otrzymuje Cookie, obrazek, css czy cokolwiek... cała masa skryptów... css'ów... poczytaj te uwagi z gtmetrix... bo to jeszcze bardziej leży niż cokolwiek innego...


1) Naprawione
2) Trochę musiałem się z tym namęczyć, ale serwer skonfigurowany (po części z pomocą .htaccess).


Ponadto:

1) Wszystkie pliki CSS (a było ich ok. 11) spakowałem do jednego smile.gif
2) Strona główna zmieniona (i zmieniana na bieżąco),
3) Nowa stopka (jeszcze muszę uzupełnić tekstem),
!*!
Cytat
2. Już rozumiem, ale jak pisałem koledze wyżej: "w wielu przypadkach margin: 0 auto, lub text-align: center nie spełniał swojego zadania. Mogę użyć zamiast nich text-align: -webkit-center".

Nie ma takiej opcji. Widocznie robisz coś źle.

I nie wiem dlaczego, ale nie masz tam żadnego pliku CSS, jest tylko "style" w kodzie html.
unnamedly
Cytat(!*! @ 5.04.2013, 11:31:01 ) *
I nie wiem dlaczego, ale nie masz tam żadnego pliku CSS, jest tylko "style" w kodzie html.


A global.css i plugins.css w head`zie? ohmy.gif
kamil4u
Cytat
każdy nawet najmniejszy np. "style=font-align: center" mam podpiąć do klas? ohmy.gif

Niekoniecznie od razu klasę. W CSS możemy dochodzić do elementów na różny sposób - id, class, czy zwykłe nawigowanie po elementach. Ale generalnie odp.brzmi: tak
Cytat
2. Menu oparte na liście miałem aż do czasu, aż zauważyłem, że w każdej przeglądarce wyświetla się ono inaczej (w innych miejscach i odstępach). Dlatego zrezygnowałem i oparłem na span`ach.

Widocznie robisz coś źle. Niejedno menu w swoim życiu zrobiłem i da się zrobić tak, żeby działało dobrze, pod wszystkimi przeglądarkami. Poczytaj o reset.css ,chociaż osobiście używam tylko( prawie w każdym projekcie ):
Kod
*{ margin: 0; padding: 0; }
a reszta według potrzeb bieżących.
Cytat
3. Czyli "opacity" już nie jest w standardzie CSS3? Rozumiem, że mam użyć display: none.

Było to tak dawno, ze już nie pamiętam do czego służył ten element. Ale jak opiszesz dokładniej do czego to miało służyć to postaram się napisać jak to się powinno zrobić bez tworzenia pustych elementów.

Cytat
5. W wielu przypadkach margin: 0 auto, lub text-align: center nie spełniał swojego zadania. Mogę użyć zamiast nich text-align: -webkit-center?

Tak jak napisał ~!*!

Cytat
10. ID dla pojedynczych elementów, a CLASS dla powtarzających się, rozumiem? Od teraz będę tak robił wink.gif

Generalnie tak, ale są wyjątki. Po prostu trzeba to robić z głową. Np. jak masz pojedynczy element, ale wiesz, że w przyszłości może zajdzie potrzeba dodania podobnego to lepiej od razu nadać klasę.
g2g3
Czyść formularz po wysłaniu.
deha21
- brzydka czcionka w menu
- logo niezbyt mi się podoba
- za mały line-height w tekstach
- za małe paddingi (w stosunku do wielkości czcionki)
- po co ustalać height dla .indexWhatIDo, nie lepiej zrobić padding i overflow:auto?
- przydało by się więcej jakiejś treści, u mnie na dużym monitorze strona zajmuje nawet nie połowę ekranu; później mam białe tło

- taka rada od starszego kolegi webdesignera/webdeveloper, który również zaczynał w młodym wieku… nie pisz, że uczęszczasz do LO i zaprojektowałeś parę (!) stron, a ta akurat jest w PHP i JS. Tak na prawdę nikogo to nie obchodzi
- "Design stawiam na pierwszym miejscu, a zaprogramowanie funkcjonalnych części na ostatnim" - ja to zrozumiałem tak, że do designu się przykładasz a programowanie trochę olewasz. Chyba nie chcesz, żeby inni odnieśli takie wrażenie.
- Generalnie troszkę tak zbyt "lajtowo" napisany ten tekst jest.
- "Dziennie na tworzenie strony przeznaczam ok. 1-2 godzin. Dobre portfolio, jestem w stanie zrobić w około 15 dni." - WTF? Nie wiem co autor miał na myśli. Ale wydaje mi się, że potencjalnego klienta to raczej też nie ochodzi.

Ćwicz, zainspiruj się czymś, podpatruj prace lepszych i dalej ćwicz. Na razie jest słabo :/
com
Jeśli chciałeś żeby stopka nie podążałą to dajesz zamiast:
  1. position: fixed;
  2. (...)

to:
  1. position: absolute;
  2. (...)

Założyłem że to wiesz widocznie błędnie...

Co do asynchronicznego ładowania jQuery to fakt dałem ci zly przykład, bo wtedy skrypt ten przerywa dziłanie po załadowaniu a nie powinien (nie działa funkcja read()), mój bład smile.gif a tak jak piszesz o te reszte mi chodziło wink.gif

przy wyszukiwaniu wpisze tag w postaci div a nie <div> wink.gif

Co do tych szerokosci inputów w kontakcie to ustalasz jakaś domyślną wartość maksymalna pudełka w którym one beda np div i wtedy one nie przekrocza jej nie waznie w jakiej przegladarce... no a potem dajesz np textarea z wiadomosc szerokosc 100% a inputy imie i nazwisko po 49% i już masz wszedzie takie same naprawde to nie jest takie trudne wink.gif

nie jest wazne ile formularzy jest na stronie, jak sie daje token to on ma spełniać swoje działnie bo narazie tego nie robi, wiec mogło by wgl go nie być...

co do tego style=font-align: center to takie parametry zazwyczaj sie ustala dla danych tagów, zrozum że style wewnatrz znaczników powstało ze wzgledu na to, że za pomocą php inaczej ich nadawać się nie da, ale jak robisz strone z poziomu html to one tak jakby dla Ciebie nie istaniały...

Menu zawsze opierasz na listach, bo po pierwsze z punktu widzenia SEO ono nie bedzie istnieć, a podrugie trzeba dbać o osoby niepełnosprawne, czytniki liste traktują jak liste, a span bedzie dla nich tylko formatowaniem tekstu...

Cytat
W wielu przypadkach margin: 0 auto, lub text-align: center nie spełniał swojego zadania. Mogę użyć zamiast nich text-align: -webkit-center?

Nie wiem co masz na myśli że nie działa tak jak ma, jak sie dobrze to zastosuje to zawsze działą tak jak powinno, widocznie robisz coś źle a te twoje text-align: -webkit-center to nic innego jak text-align: center dla chroma i safari, a co z innymi, ponadto juz niedługo tylko safari zostanie bo chrome zmienia silnik...

A ten tekst na głownej dalej nie zadowala w 100% ale jest lepiej wink.gif "PhpBB4" ? raczej PhpBB3 bo 4 jescze nie jest oficialna wink.gif
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.