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.

Nie wczytywałem się jeszcze w treści. Może zrobię to jutro, bo w tej chwili trochę mi czasu brakuje... .
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.

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

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.

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

Poprawione.



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.

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 .

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

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.


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


Na pewno pomyślę.


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.


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.


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


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

No bez przesady . Dodatkowych 20 linii kodu css to jeszcze nie tak dużo pisania.



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



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.



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.



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 . Może powiększ dopasowanie?



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żę .

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

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

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

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

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



Tylko po co stosować ten hack?



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 .

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

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.


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?


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

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

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

Bez rozpisywania się. zeczywiście bywają problemy z marginesami w badzIEwiu. Rozwiązanie jest bardzo proste: padding . I już nie będzie problemów z IE.



Do tego na dwóch monitorach Uwilbiam to i czasami marzy mi się trzeci .

[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 

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.

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.

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.


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


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


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

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



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 .

Przysiadłem dzisiaj i pozmieniałem trochę rzeczy. Oto lista zmian:
- Poprawiony XHTML, wywalone wszystkie znaczniki img nieodwołujące się do rzeczywistych zdjęć
- Usunąłem daty przy postach
- Usunąłem element menu "blog". Logo odwołuje się do tej samej strony.
- Całkowicie zmieniłem kolorystykę, na moim zdaniem łagodniejszą
- Lekkie zmiany w logo z sześcianami
- Zmieniłem czcionki na nieco bardziej czytelne
- Zmniejszyłem rozmiar czcionki pod nagłówkiem "o mnie"
- Poprawiłem CSS - przekonstruowany top i drobne poprawki
- Zmieniłem odnośnik do kanału RSS.
- Klawisze dostępu

Szkoda tylko, że nie radzę sobie z wyśrodkowaniem nagłówków w wąskich kolumnach.

No i z powodu nadmiaru czasu napisałem notkę.

Dzięki wszystkim za rady, a szczególnie babejszy za wsparcie.

Teraz wygląda to znaczenie lepiej niż poprzednio.