Przesiadłem się na WordPressa. Engine poprzedniej wersji strony był mojego autorstwa. Z braku czasu nie rozwijałem go od dawna. Po szybkim wglądzie w możliwości WPa stwierdziłem, że zapewnia on delikatnie rzecz biorąc lepszą funkcjonalność w porównaniu z moim silnikiem…
WordPress naprawdę ułatwia prace. Dzięki dobrej dokumentacji zbudowanie własnego szablonu jest banalne.
Nowy wygląd strony opiera się na zupełnie innej koncepcji niż stary. Szerokość strony też jest stała, ale wynosi 970px a nie jak poprzednio 760px i jest wyrównana do lewej, a nie wyśrodkowana. Taki układ daje kilka ciekawych możliwość z zachowaniem pełnej funkcjonalności w rozdzielczości 800×600px.
Jak wiadomo szerokość tekstu nie powinna być większa niż około 500px. W dobie dużych monitorów i wysokich rozdzielczości teksty o większej szerokości źle się czyta. Więc przy tym założeniu gdy do szerokości tekstu (500px) dodamy menu boczne (około 200px) nie ma już na nic miejsca. Tak było w wersji 4. Obecnie zostaje jeszcze około 200px miejsca do wykorzystania.
Miejsce to zostawiłem na umieszczenie dodatkowych informacji do tekstu. Takich co to normalnie trzeba by umieścić w nawiasach lub w inny sposób oddzielić od reszty tekstu by nie przerywały ciągu myślowego. Rozumiecie o co mi chodzi prawda?.
Samo umieszczenie z boku komentarza do fragmentu tekstu może by i wystarczyło. Jednak chciałem by czytelnik był poinformowany o istnieniu komentarza do fragmentu, który akurat czyta.
Przykład:
Kromlech (z celtyckiego crom - wygięty, lech - kamień) - jest to krąg zbudowany z ustawionych pionowo kamieni, często wokół grobowca. Stawiane były w neolicie oraz w epoce brązu, najczęściej na terenach Bretanii i Anglii - pierwsze kromlechy pojawiły się w drugiej połowie IV tysiąclecia p.n.e. Było to najprawdopodobniej miejsce kultu i zebrań plemiennych.
Do najbardziej znanych należy Stonehenge
Kod XHTML przykładu:
<div class="highlight">
<p>
Kromlech (z celtyckiego crom - wygięty, lech - kamień) (...)
</p>
<p>
<span>Do najbardziej znanych należy Stonehenge</span>
</p>
</div>
Nie można zapomnieć o <p> lub chociaż <br /> przed rozpoczęciem <span> ponieważ w przeglądarkach tekstowych lub po wyłączeniu styli w przeglądarce graficznej komentarz będzie zlepiony z tekstem. Ważne jest też by był on umieszczony w kodzie strony po tekście. Gdyby było na odwrót to po wyłączeniu styli tekst byłby bez sensu.
Kod CSS (wycięte zbędne fragmenty)
.highlight span {
display:block;
float:left;
margin:-70px 0 0 -170px;
padding:10px 4px;
width:132px;
position:relative /*fix IE6*/
}
.highlight:hover span {
color:#282828;
background:#F7F7BF;
}
To tyle odnośnie nowego layoutu. Dla zarchiwizowania umieszcza szot starego layoutu strony. Z ciekawych rzeczy dodam, że po kliknięciu z przytrzymaniem wykonanym na słońcu nad budynkami pojawiała się liczba. Liczba ta mówiła ile osób jest aktualnie on-line na stronie. Ciekaw jestem czy ktoś to znalazł :D
