Wojciech Bednarski

Ostylowałem moje kategorie w stylu tag cloud. Użyłem pluginu WordPress Cat Cloud Plugin.

Niestety jego accessibility leży. Linki (tagi) nie są niczym oddzielone, jak wiadomo tak nie możne być.

Najprostsze wyjście to wstawić po każdym <a /> przecinek, lub jakikolwiek inny znak nie będący linkiem. Przykładowo <span>,</span>. Takie rozwiązanie ma tą wadę, że widać przecinek. Można oczywiście ostylować go przy pomocy span {display:none} lub span {visibility:hidden}.

Niestety przy zastosowaniu takich technik ukrywania tekstu nie wszystkie user agents będą w stanie poprawnie odczytać nasze intencje.

Jedynym rozsądnym sposobem na poprawienie accessibility jest lista. Należy edytować zawartość pliku z pluginem. Zamienić <div /> na listę <ul /> i objąć linka listą <li />.

$output['data'] = ‘<ul id=”catcloud”>‘.”\n”;
foreach (explode(”\n”, $all_cats) as $cat) {
preg_match(’{a href=”([^"]+)” title=”([^"]+)”.*?>(.+)</a> ?\((\d+)\)}’, $cat, $matches);
list(,$url, $title, $name, $count) = $matches;
$output['data'] .= sprintf(”\t”.’<li><a href=”%s” title=”%s (%s %s)” class=”size-%d”>%s</a></li>‘.”\n”,
$url, $title, $count, abs($count) != 1 ? ‘entries’ : ‘entry’, $count, $name);
$counts[$count] = 1;
}
$output['data'] .= ‘</ul>‘.”\n”;

Pozostało jeszcze tylko zmodyfikować style CSS, tak by lista była pozioma.

#catcloud li {
 float:left
}

#catcloud li a {
 display:block;
 padding-right:4px
}

Wygląda to np. tak:

Jeśli chcesz mieć na swoim WordPressowym blogu tagi w stylu, jak to się teraz mówi? Web 3.0 chyba i idąc dalej w duchu 3.0 powinienem napisać hat trick accessibility.

Tak czy inaczej polecam ten plugin do WordPressa z moimi drobnymi, aczkolwiek ważnymi poprawkami w kwestii dostępności.

Od jakiegoś czasu jest dostępna nowa odsłona gentoo-portage. Po prostu brzydka, mniej czytelna, nieintuicyjna, sprawiająca wrażenie niedopracowanej.

Niebieski powala. Główne menu, to poziome, po najechaniu na nie myszką skacze… Wystarczyło ustawić border:1px solid #fff a nie jak sądzę (bo w kod nie parzyłem) border:none.

Zastanawia mnie też cel użycia Prototype. Tak, to świetny framework, ale waży 100 kilo a oni wykorzystują go tylko w jednym miejscu do animowanego rozwijania listy w dziale My Homepage gdzie i tak mają dostęp tylko zarejestrowaniu użytkownicy.

Chyba jedyną ciekawą rzeczą jest możliwość personalizacji swojej strony. Można ustawić ją tak, by wyświetlały się na niej nowe ebuildy z wybranej architektury. Z jednej architektury. A co jak ktoś ma np.: x86 i amd64?..

Patenty na oprogramowanie czyli powrót do epoki kamienia łupanego.

Mało znana amerykańska firma stała się właścicielem patentu, jak to określono na bogate aplikacje internetowe (rich-media application).

Patent dotyczy wspólnego wykorzystania technologii takich jak: Flash, Flex, Java, XAML czy AJAX do budowy aplikacji internetowej. Dobrym przykładem takiej aplikacji jest Google Analytisc.

Co teraz? Teraz duże firmy takie jak Google, Microsoft czy Yahoo! będą musiały płacić tej dotąd nie znanej firmie z Californi, a mniejsze firmy będą zmuszone budować mniej atrakcyjnie wizualnie aplikacje internetowe, lub rezygnować z niektórych projektów…

Na nasze szczęcie, jak narazie, tak iście troglodydzkie prawo patentowe obowiązuje tylko w USA, ale kto wie co czeka Europe…

Ja proponuje opatentować ostylowanie tekstu w dokumentach (X)HTML przy użyciu CSS czcionką większą niż 8px. Jak ktoś będzie chciał używać większej to niech płaci, a co!!

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:

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