[www]ludvik.pl Opcje

[Ludvik]

Nadszedł czas, aby uruchomić swoją stronę domową, tak więc prezentuję Wam mój devblog.

http://ludvik.pl

Myślę, że obejdzie się bez większych wyjaśnień. Zrobiłem wszystko co w mojej mocy, żeby strona wyglądała przyjemnie, była napisana poprawnie i spełniała wymogi kodowania stawiane nowoczesnym witrynom.

Wiem również, że nie wszystko na niej jest doskonałe. Ludzie zwracają mi uwagę na nieczytelną czcionkę w menu, logo i sidebarach. Myślę, że dodaje ona trochę charakteru stronie, a nikt nie będzie się skupiał na tych napisach do tego stopnia, żeby rozbolały go oczy.

Nie oceniajcie jej jeszcze pod względem zawartości, bo nic nie zdążyłem do tej pory napisać.

Z góry dzięki za obiektywną ocenę i oczywiście za odwiedziny.

Ten post edytował Ludvik 15.06.2007, 15:16:24

[Speedy]

Nie wczytywałem się jeszcze w treści. Może zrobię to jutro, bo w tej chwili trochę mi czasu brakuje... (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .
Na pierwszy rzut oka czcionka w nagłówkach i menu jest bardzo niewyraźna. Da się znaleźć i internecie czcionki typu "destroy" lub podobne, które są bardziej czytelne.
Wydaje mi się także, że zieleń w tle strony jest zbyt jaskrawa.
Te sześciany są fajnym pomysłem, ale sądzę, że wyglądałyby lepiej gdybyś nadał im jaśniejszy kontur, a nie w kolorze takiej wyraźnej czerni.

[starach]

Zieleń jest stanowczo zbyt jaskrawa w tle w logotypie. W połączeniu z białym tłem głównego kontenera strasznie daje po oczach. Ogólnie nic nowego nie powiedziałem wszystko już napisał speedy. To dodam jeszcze że pomysłowo pocięty layout i treść jest dobrze rozmieszczona nie trzeba szukać.
Aha wyczekuję z niecierpliwością artykułu o multi_curl :]

[Ludvik]

Zmienię tło jak znajdę trochę czasu jutro. Nad czcionkami też siądę, ale to za jakiś czas, bo mam jeszcze jedno zadanie niecierpiące zwłoki.

Cieszę się, że układ jest logiczny nietylko dla mnie.

orglee: Może nawet przed artykułem o curl_multi coś ciekawego w tym temacie napiszę na blogu.

[Zajec]

Bardzo ładny XHTML, jedna uwaga: XHTML 1.1 nie powinno się wysyłać jako text/html. Więc zrób negocjację nagłówków wysyłanych przez przeglądarkę i application/xhtml+xml serwuj odpowiednim.
http://www.doktorno.boo.pl/content_negotiation.php

[Ludvik]

Bardzo ładny XHTML, jedna uwaga: XHTML 1.1 nie powinno się wysyłać jako text/html. Więc zrób negocjację nagłówków wysyłanych przez przeglądarkę i application/xhtml+xml serwuj odpowiednim.

Poprawione.

Zieleń jest stanowczo zbyt jaskrawa w tle w logotypie.

Wydaje mi się także, że zieleń w tle strony jest zbyt jaskrawa.

Poprawione.

Co do sześcianów, to próbowałem tego na kilka sposobów i ten mi najbardziej przypadł do gustu. Nic lepszego nie przychodzi mi do głowy szczerze mówiąc.

Nad czcionkami pomyślę jeszcze.

Wielkie dzięki za wszystkie uwagi.

[babejsza]

Co do wyglądu to nie jest źle, ale jeżeli lay robiłeś sam to i tak lepiej niż dobrze bo sam wiem jaka to jest męczarnia dla większości koderów (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) .

Bardzo ładny XHTML z tym że proponuje wszystkie obrazki nagłówków przerzucić do css'a. To samo z Logiem, menu, ikonką RSS i datami wpisów. Oczywiście z punktu widzenia semantyki nie jest to konieczne, ale ja po prostu lubię widzeć po wyłączeniu styli sam tekst o ile nie ma obrazków ważnycch z punktu widzenia contentu.

Dodatkowo <div id="rss"> oraz <div id="search"> wypozycjonowałbym absolutnie spod menu. Kwestia ważności elementów czyli tytuł, potem spis, a następnie reszta.

//EDIT

Co do samej kolorystyki - może pomyśl nad przyciemnieniem tej zieleni. Mimo wszystko po poprawie ciągle jest strasznie jaskrawy. Może pomyśl nad czymś bardziej w stylu ikonki RSS, czyli więcej ciemniej zieleni a mniej jasnej?

//EDIT2

No i przydałby się jakiś hover dla menu oraz styl na forularza wyszukiwania. W IE7 (nie wiem jak w IE6) środkowa kolumna zjeżdza na dół strony a . Z lewej i prawej może powiększ margines to wiekości odstępu krawędzi od sześcianów?

Strasznie wymyślam - sorki (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował babejsza 16.06.2007, 17:55:04

[Ludvik]

proponuje wszystkie obrazki nagłówków przerzucić do css'a

Przemyślę to bardzo poważnie. Z datami może być dużo pisania w css, bo każda cyfra wymaga innego obrazka... Nie podoba mi się w ogóle realizacja tej daty od strony kodu. Muszę pomyśleć nad czymś lepszym, ale póki co, to nic mi nie przychodzi do głowy.

Dodatkowo <div id="rss"> oraz wypozycjonowałbym absolutnie spod menu. Kwestia ważności elementów czyli tytuł, potem spis, a następnie reszta.

O ile dobrze pamiętam, to przy takiej próbie sypało się wszystko pod IE. Internet Exploder lubi przy pozycjonowaniu zostawiać boxy zgodnie z przepływem, a treść przenosić. Wtedy całkowicie sypał mi się układ w nagłówku. Jeszcze raz upewnię się...

Może pomyśl nad czymś bardziej w stylu ikonki RSS, czyli więcej ciemniej zieleni a mniej jasnej?

Na pewno pomyślę.

No i przydałby się jakiś hover dla menu oraz styl na forularza wyszukiwania.

Były hovery, ale usunąłem je. To kolejne kilobajty i działają nienajlepiej z użyciem JS. Spróbuję przepisać menu na css i zobaczyć jak to wyjdzie.

W IE7 (nie wiem jak w IE6) środkowa kolumna zjeżdza na dół strony

Nie mam w chwili obecnej IE7 do testów. Postaram się to sprawdzić. Problem leży w tym, że coś jest źle wypozycjonowane marginesem. Niestety IE nie potrafi liczyć marginesów i wymaga hacków... Jak widać, IE7 wyświetla źle a haki obchodzi.

Z lewej i prawej może powiększ margines to wiekości odstępu krawędzi od sześcianów?

Szkoda mi trochę miejsca na to. Za wąskie są te kolumny, żeby bawić się w tak duże marginesy.

Strasznie wymyślam - sorki (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Im więcej poprawek, tym lepiej dla strony, dlatego za każdą jestem bardzo wdzięczny.

[babejsza]

Przemyślę to bardzo poważnie. Z datami może być dużo pisania w css, bo każda cyfra wymaga innego obrazka... Nie podoba mi się w ogóle realizacja tej daty od strony kodu. Muszę pomyśleć nad czymś lepszym, ale póki co, to nic mi nie przychodzi do głowy.

No bez przesady (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) . Dodatkowych 20 linii kodu css to jeszcze nie tak dużo pisania.

O ile dobrze pamiętam, to przy takiej próbie sypało się wszystko pod IE. Internet Exploder lubi przy pozycjonowaniu zostawiać boxy zgodnie z przepływem, a treść przenosić. Wtedy całkowicie sypał mi się układ w nagłówku. Jeszcze raz upewnię się...

Jak będzie dobrze obstylowane to się nic nie posypie.

Były hovery, ale usunąłem je. To kolejne kilobajty i działają nienajlepiej z użyciem JS. Spróbuję przepisać menu na css i zobaczyć jak to wyjdzie.

Dużo tych KB nie będzie, a efektu tak. JS zdecydowanie odpuść. Co ważne nie wstawiaj obrazka dla a:hover tylko dla li. Tak, żeby plik był od razu załadowany.

Nie mam w chwili obecnej IE7 do testów. Postaram się to sprawdzić. Problem leży w tym, że coś jest źle wypozycjonowane marginesem. Niestety IE nie potrafi liczyć marginesów i wymaga hacków... Jak widać, IE7 wyświetla źle a haki obchodzi.

Tak serio to nie widzę powodów, żeby przyp tak prostym układzie stosować hacki. Może się mylę, ale musiałbyś podać przykład.

Szkoda mi trochę miejsca na to. Za wąskie są te kolumny, żeby bawić się w tak duże marginesy.

Jest to dość istotny argument. Może się zacząć robić wąsko. Z drugiej strony jak pokazują badania Gemius'a ( www.ranking.pl ) rozdzieloczości 800x600 używa około 7% użytkowników. Ciekawe ilu z nich przegląda programistyczne devblogi (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . Może powiększ dopasowanie?

Im więcej poprawek, tym lepiej dla strony, dlatego za każdą jestem bardzo wdzięczny.

Zrobiłem sobie weekendowe wolne i nic mi się nie chce więc w miarę mirę własnych możliwości i wiedzy służę (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) .

Ten post edytował babejsza 16.06.2007, 18:44:16

[Ludvik]

Jak będzie dobrze obstylowane to się nic nie posypie.

Już nad tym pracuję i jest ok. Nie wiem czemu wcześniej były takie problemy.

Co ważne nie wstawiaj obrazka dla a:hover tylko dla li.

To znaczy jak dokładniej, bo trochę nie zrozumiałem techniki?

Tak serio to nie widzę powodów, żeby przyp tak prostym układzie stosować hacki.

No niestety standardowe hacki (html>body) muszą być, głównie z powodu złego pozycjonowania przez IE.

rozdzieloczości 800x600 używa około 7% użytkowników

Sprawdzałem statystyki i dlatego zdecydowałem się stworzyć układ dla 1024 szerokości.

[babejsza]

To znaczy jak dokładniej, bo trochę nie zrozumiałem techniki?

[HTML] pobierz, plaintext 
li {background: color url(obrazek_hover.png) left top no-repeat}
li a {background: color url(obrazek_a.png) left top no-repeat}
li a:hover {background: none}
 
<li><a href="#">Link</a></li>
[HTML] pobierz, plaintext 

W ten sposób obrazek pokazujący się po najechaniu na link nie będzie ładowany z serwera tylko będzie tam "wcześniej" tylko przykryty przez obrazek tła elementu <a />

No niestety standardowe hacki (html>body) muszą być, głównie z powodu złego pozycjonowania przez IE.

Tylko po co stosować ten hack?

Sprawdzałem statystyki i dlatego zdecydowałem się stworzyć układ dla 1024 szerokości.

Gapa jestem. Z jakiegoś powodu (Może to kwestia tego, że póki co wysokość strony jest dość mała, a ja używam rozdzielczości 1600x1200) nie załapałem tego. Myślałem że jest dla 800x600 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .

[Turgon]

Mam jedną uwagę. Kolego pozbądź się tej uderzającej (zmoderowane) zieleni z tła! Chyba, że chcesz, żeby oczy stracił.

[Ludvik]

Tylko po co stosować ten hack?

Głównie z tego powodu, że elementy są wtedy porozmieszczane zupełnie inaczej. Kolumny przesuwają się w prawo, bo IE liczy marginesy podwójnie. Trzeba to trochę korygować właśnie poprzez podstawienie innych marginesów dla naszej kochanej przeglądarki z Redmont. Różnice co prawda nie zawsze są duże, ale w przypadku tak wąskich kolumnt jest to bardzo widoczne i sypie cały układ strony.

ja używam rozdzielczości 1600x1200

Zazdroszczę wygody. Dla mnie 1280x1024 bywa czasem ciasnawe.

EDIT:
Nie podoba mi się trochę fakt, że trzeba trochę walczyć z kodem, żeby umieścić obrazek logotypu w tle i zachować tytuł w nagłówku 1-go stopnia po wyłączeniu css. Jakiś pomysł na to?

Mam jedną uwagę. Kolego pozbądź się tej oczojebnej zieleni z tła! Chyba, że chcesz, żeby oczy stracił.

Ta uwaga już padła i napisałem, że poprawię to. Widzę, że ten kolor wyzwala takie emocje, że trzeba od razu przeklinać i krzyczeć...

Ten post edytował Ludvik 16.06.2007, 19:31:29

[Turgon]

To bardzo ostra zieleń. Nie ma nic wspólnego z czystością, świeżością i uspokajającym działaniem niektórych odcieni.

Ten post edytował Turgon 16.06.2007, 19:36:15

[Zajec]

Bardzo ładny XHTML z tym że proponuje wszystkie obrazki nagłówków przerzucić do css'a. To samo z Logiem, menu, ikonką RSS i datami wpisów. Oczywiście z punktu widzenia semantyki nie jest to konieczne, ale ja po prostu lubię widzeć po wyłączeniu styli sam tekst o ile nie ma obrazków ważnycch z punktu widzenia contentu.

Że co? Przecież to co proponujesz jest wręcz beznadziejne! Chcesz widziesz sam tekst? Wyłącz obrazki, a przeglądarka wyświetli _dobrze określone_ atrybuty alt! Teraz jest super, bo nawet jeśli przeglądarka nie obsługuje CSS (a wspiera obrazki), strona będzie wyglądać stronę bliższą oryginałowi. W mojej opinii teraz jest bardzo dobrze.

[babejsza]

Głównie z tego powodu, że elementy są wtedy porozmieszczane zupełnie inaczej. Kolumny przesuwają się w prawo, bo IE liczy marginesy podwójnie. Trzeba to trochę korygować właśnie poprzez podstawienie innych marginesów dla naszej kochanej przeglądarki z Redmont. Różnice co prawda nie zawsze są duże, ale w przypadku tak wąskich kolumnt jest to bardzo widoczne i sypie cały układ strony.

Bez rozpisywania się. zeczywiście bywają problemy z marginesami w badzIEwiu. Rozwiązanie jest bardzo proste: padding (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . I już nie będzie problemów z IE.

CYTAT
ja używam rozdzielczości 1600x1200

Zazdroszczę wygody. Dla mnie 1280x1024 bywa czasem ciasnawe.

Do tego na dwóch monitorach (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Uwilbiam to i czasami marzy mi się trzeci (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) .

Nie podoba mi się trochę fakt, że trzeba trochę walczyć z kodem, żeby umieścić obrazek logotypu w tle i zachować tytuł w nagłówku 1-go stopnia po wyłączeniu css. Jakiś pomysł na to?

[HTML] pobierz, plaintext 
h1 {bacground: color url(logo.png) left top no-repeat; width: 100px; height: 100x}
h1 span {display: none}
 
<h1><span>Ludvik.pl</span></h1>
[HTML] pobierz, plaintext 

[Ludvik]

Zajec: Z przeniesienia obrazków do CSS wynika inna korzyść - łatwiejsza możliwość podmiany wyglądu. Tak to musiałbym grzebać w xhtmlu, żeby zmienić logo i menu. Strona oczywiście będzie bliższa oryginałowi, ale logo jest trochę bez sensu bez tła nagłówka.

Babejsza: Miałem napisać, że właśnie do tego doszedłem. I tak wielkie dzięki.

[babejsza]

Że co? Przecież to co proponujesz jest wręcz beznadziejne! Chcesz widziesz sam tekst? Wyłącz obrazki, a przeglądarka wyświetli _dobrze określone_ atrybuty alt! Teraz jest super, bo nawet jeśli przeglądarka nie obsługuje CSS (a wspiera obrazki), strona będzie wyglądać stronę bliższą oryginałowi. W mojej opinii teraz jest bardzo dobrze.

Ogólnie masz rację (jak to zwykle w Twoim przypadku bywa), ale co z rozwiązania mobilnymi nie obsługującymi css? Nagle trafia na taki obrazek i trzeba żywać suwaka horyzontalnego. Atrybut title i alt służą do czegoś innego, a mi chodziło raczej o usability w stosunku do urządzeń mobilnych.

Tak już mam - wszystko co służy tylko prezentacji staram się przenieść do css'a. Można powiedzieć że byłem pilnym słuchaczem wykładu pt.: csszengarden.

P.S. - @Zajec mam do Ciebie ogromny szacunek. Dużo się od Ciebie nauczyłem, ale trochę więcej pokory. Rozwiązanie to może być beznadziejne ale tylko w subiektywnym odczuciu. Dla mnie jest rozwiązaniem dobrym i dlatego je zaproponowałem, a jak się nad tym zastanowisz to znajdziesz więcej powodów dla których tak należy robić. Bo na pewno nie chodzi tu o wyłączanie obrazków w przeglądarce bo niby po co to robić? Ale to temat na inny ... topic.

Ten post edytował babejsza 16.06.2007, 20:00:05

[Zajec]

Kolumny przesuwają się w prawo, bo IE liczy marginesy podwójnie. Trzeba to trochę korygować właśnie poprzez podstawienie innych marginesów dla naszej kochanej przeglądarki z Redmont.

Tak się dzieje tylko z elementami z przypisanym "float". Wystarczy dodać tym elementom "display: inline;" które i tak jest ignorowane (element będzie blokowym) a w IE marginesy zadziałają normalnie.

Zajec: Z przeniesienia obrazków do CSS wynika inna korzyść - łatwiejsza możliwość podmiany wyglądu. Tak to musiałbym grzebać w xhtmlu, żeby zmienić logo i menu. Strona oczywiście będzie bliższa oryginałowi, ale logo jest trochę bez sensu bez tła nagłówka.

Możliwe. Faktycznie może wyjść głupio przy braku CSS (brak tła) a z obrazkami (nie pasującymi do braku tła).

Ogólnie masz rację (jak to zwykle w Twoim przypadku bywa), ale co z rozwiązania mobilnymi nie obsługującymi css? Nagle trafia na taki obrazek i trzeba żywać suwaka horyzontalnego. Atrybut title i alt służą do czegoś innego, a mi chodziło raczej o usability w stosunku do urządzeń mobilnych.

Korzystam w Opery Mobile, ona ładnie przeskaluje obrazki. Czy inne tak nie zrobią przypadkiem?

P.S. - @Zajec mam do Ciebie ogromny szacunek. Dużo się od Ciebie nauczyłem, ale trochę więcej pokory. Rozwiązanie to może być beznadziejne ale tylko w subiektywnym odczuciu. Dla mnie jest rozwiązaniem dobrym i dlatego je zaproponowałem, a jak się nad tym zastanowisz to znajdziesz więcej powodów dla których tak należy robić. Bo na pewno nie chodzi tu o wyłączanie obrazków w przeglądarce bo niby po co to robić? Ale to temat na inny ... topic.

Niekoniecznie inny. W tym szybko przyznam rację i potwierdzę, że nie wszystko może przemyślałem :-) Za zbyt mocne określenie przepraszam.

[babejsza]

Korzystam w Opery Mobile, ona ładnie przeskaluje obrazki. Czy inne tak nie zrobią przypadkiem?

Ja też z niej korzystam, ale co z przeglądarkami testowymi? Albo nawet tymi obsługującymi img, ale nie operującymi na nich (nie zwężającymi). Przeglądarek mobilnych prawie tyle co prodcentów telefonów i tu pojawia się pytanie czy nie lepiej dostosować to raz robiąć wszystko na tekście, czy może poznawać co tydzień nowe możliwości nowej przeglądarki producenta telefonu. Oczywiście bardzo tu presadziłem, ale rozumiesz o czym mówię.

Niekoniecznie inny. W tym szybko przyznam rację i potwierdzę, że nie wszystko może przemyślałem :-) Za zbyt mocne określenie przepraszam.

Tu nie powinienem odpowidać, ale to zrobię bo niewiele osób ma na tyle poczucia własnej wartości i klasy jak Ty żeby to przyznać. Pisząc kolokwialnie - pełen szacun (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) .