Blog (11)
Komentarze (1.3k)
Recenzje (0)
@RaziFormatowanie, czyli nie męcz mych oczu

Formatowanie, czyli nie męcz mych oczu

01.10.2010 23:26

Może nie bezpośrednio o oprogramowaniu, ale nieco o estetyce. Wiele z artykułów na tym blogu jest dość ciekawych... tematycznie, ale wykonane tragicznie.

Przede wszystkim chodzi o estetykę wykonania. Podczas gdy pokemony nadużywają dobrodziejstw formatowania tekstu, inni nie wiedzą co to jest. Tak, mam na myśli tutejsze artykuły, ale nie tylko. Porada ta także przyda się twórcom stron internetowych

Spora ich część jest długa, a co gorsza - pisana niemal jednym ciągiem. LITOŚCI DLA MYCH OCZU! Czytelnika nie zawsze interesuje cała treść, tylko czasem jej fragment. Ale niestety artykuł ma 30 akapitów, każdy po 6 linijek i teraz szukaj....

Nagłówki

Nagłówki służą do wyróżnienia sekcji tekstu. To właśnie one ułatwiają nawigację w długim tekście. Pozwalają również łatwo się odnaleźć po dłuższej przerwie w czytaniu.

Akapity

Drugą ważną rzeczą, właściwie to ważniejszą niż nagłówki, są akapity. Pisząc długi tekst, nigdy nie dopuszczajcie do akapitów dłuższych niż 8 linijek! Im krótsze, tym wygodniej się czyta, ale nie do przesady. Gdy są za długie, kończąc jedną linijkę, mamy problemem ze znalezieniem następnej. Przykładowo tekst lorem ipsum bez akapitów i z akapitami: bez:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta aliquam cursus. Morbi eros augue, rhoncus at euismod luctus, varius eget felis. Donec rhoncus tempus lorem nec tincidunt. Aliquam ligula leo, mollis ac rhoncus sed, tempus quis risus. Nam leo magna, pulvinar at venenatis vitae, aliquam eu tellus. Vivamus non ipsum non erat tincidunt euismod. Sed malesuada pulvinar arcu a egestas. Pellentesque non nibh diam. Integer mi augue, sagittis vitae vestibulum quis, eleifend malesuada mi. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque elit vel eros congue dignissim. Sed vitae luctus metus. In lobortis, libero vel vehicula pellentesque, dui justo tempus lectus, in consectetur tellus purus nec elit.Phasellus in mollis arcu. Nunc commodo, dui ut rutrum accumsan, urna tortor elementum nunc, a ultrices lectus elit non mauris. Duis pharetra malesuada est id malesuada. Nulla mollis egestas facilisis. Maecenas molestie dolor in felis viverra viverra. Suspendisse non risus at arcu tincidunt mattis non molestie leo. Nulla facilisi. Donec cursus sagittis dui in elementum. Ut posuere lectus eget arcu volutpat non rhoncus neque scelerisque. Vivamus et lacus quis libero porta pharetra id sed libero. Nunc tortor dui, tristique vitae blandit a, semper dignissim tellus. Nullam aliquet ipsum ac orci congue viverra congue nisi viverra. Suspendisse porta ante quis mauris semper eu mattis odio semper.

z:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta aliquam cursus. Morbi eros augue, rhoncus at euismod luctus, varius eget felis. Donec rhoncus tempus lorem nec tincidunt. Aliquam ligula leo, mollis ac rhoncus sed, tempus quis risus. Nam leo magna, pulvinar at venenatis vitae, aliquam eu tellus. Vivamus non ipsum non erat tincidunt euismod. Sed malesuada pulvinar arcu a egestas. Pellentesque non nibh diam. Integer mi augue, sagittis vitae vestibulum quis, eleifend malesuada mi. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque elit vel eros congue dignissim. Sed vitae luctus metus. In lobortis, libero vel vehicula pellentesque, dui justo tempus lectus, in consectetur tellus purus nec elit. Phasellus in mollis arcu. Nunc commodo, dui ut rutrum accumsan, urna tortor elementum nunc, a ultrices lectus elit non mauris. Duis pharetra malesuada est id malesuada. Nulla mollis egestas facilisis. Maecenas molestie dolor in felis viverra viverra. Suspendisse non risus at arcu tincidunt mattis non molestie leo. Nulla facilisi. Donec cursus sagittis dui in elementum. Ut posuere lectus eget arcu volutpat non rhoncus neque scelerisque. Vivamus et lacus quis libero porta pharetra id sed libero. Nunc tortor dui, tristique vitae blandit a, semper dignissim tellus. Nullam aliquet ipsum ac orci congue viverra congue nisi viverra. Suspendisse porta ante quis mauris semper eu mattis odio semper.

Który wygląda estetyczniej? A teraz spróbujcie przeczytać. Przy pierwszym czytelnik będzie musiał szukać następnej linijki, bo nie widzi końca, ani początku akapitu i nie umie policzyć na szybko linijek, tak jak to ma miejsce przy 5‑linijkowych akapitach. Przy tekście niezrozumiałym, albo pisanym innym językiem ma to szczególnie duże znaczenie.

Pogrubienie

Nie nadużywaj, a najlepiej unikaj używania pogrubienia w ciągłym tekście. Dlaczego? Bo jeżeli w długim akapicie jest jeden wyraz pogrubiony, to od razu rzuca się w oczy i często jest pierwszym czytanym wyrazem. Najlepiej używać kursywy, a pogrubienie zostawić dla nagłówków i list.

Listy

Używaj list, gdy chcesz wymienić więcej niż 3 rzeczy, albo chcesz je dodatkowo opisać. Przed każdym myślnikiem/liczbą postaw jakiś tabulator, żeby było jasne, ze to elementy listy. Przykład:

__1. Pierwszy punkt __2. Drugi punkt __3. Trzeci punkt ____a) pierwszy podpunkt ____b) drugi podpunkt __4. Czwarty punkt

Tu musiałem użyć znaków podkreślenia, gdyż nie działają znaki typu niełamliwa spacja, ale mimo tego wygląda czytelniej niż:

1. Pierwszy punkt 2. Drugi punkt 3. Trzeci punkt a) pierwszy podpunkt b) drugi podpunkt 4. Czwarty punkt

Kolory

Nie używaj kolorów ekstremalnie kontrastowych. Użycie jasnoczerwonego (ff0000) na np. żółtym (ffff00) lub niebieskim (0000ff) tle to koszmar. Kolor czcionki powinien być innym odcieniem koloru tła: jeżeli tło jest jasnoniebieskie, tekst powinien być ciemnoniebieski. Najlepiej użyć skali HSV.

369774

A teraz przyjrzyjcie się tym kilku linijkom:

369776

Które są poprawnie pokolorowane? Czarno-biały zawsze wygląda czysto. Żółto-czerwony razi w oczy. Czerwono-niebieski też kłuje. Ciemnożółty-jasnożółty już wygląda lepiej. Fioletowo-różowy mimo niewielkiego kontrastu jest bardziej czytelny niż trzeci zestaw. Biało-niebieski również wygląda ładnie.

Jak widać dodatkowo: po konwersji na JPG (wrzucałem PNG) tekst jest jeszcze mniej czytelny. Najgorzej wypadł zestaw czerwono-niebieski, gdyż te kolory są nie mają wspólnego koloru składowego.

Obok jest tabelka kolorów z programu AbiWord. Jak widać twórcy pomyśleli i bardzo ładnie poukładali odcienie kolorów w kolumnach. Również zestawy złożone z sąsiadujących kolumn nie wyglądają najgorzej.

Justowanie

Dość częsty błąd na stronach internetowych. Tekst jest wyrównany tylko do lewej krawędzi. Wtedy każda linijka tekstu kończy się w innym miejscu i tekst wygląda bardzo "niespójnie". Justowanie tworzy solidny blok tekstu. Linijka jest poszerzana dzięki (niemal niezauważalnemu) zwiększeniu odległości między wyrazami. Przykład tekstu niewyjustowanego:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta aliquam cursus. Morbi eros augue, rhoncus at euismod luctus, varius eget felis. Donec rhoncus tempus lorem nec tincidunt. Aliquam ligula leo, mollis ac rhoncus sed, tempus quis risus. Nam leo magna, pulvinar at venenatis vitae, aliquam eu tellus. Vivamus non ipsum non erat tincidunt euismod.

Cięte ręcznie, poniewać na blogu dp na szczęście tego błędu nie idzie popełnić.

Wybrane dla Ciebie
Komentarze (3)