O szablonach, ich projektowaniu i moich z tym zmaganiach...
sobota, 29 września 2007

Wybierając schematy kolorystyczne do naszej strony warto zastanowić się nad znaczeniem koloru. Odpowiednio dobrane kolory są w stanie wiele zdziałać. Pewne zestawienia kolorystyczne od razu mogą zdefiniować zawartość strony. Łatwo to dostrzec na podstawie stron portali internetowych. Schemat kolorystyczny naszego bloga powinien wiązać się z ogólnymi tendencjami. Nie znaczy to oczywiście, że masz być niewolnikiem regół, czasami warto zdowyć się na wyjście z szeregu i ustalenie własnych norm. Pamiętaj jedynie, że czytelnik ma pewne oczekiwania. Zestawienie barw powinno mieścić się w granicach tolerancji odbiorcy w innym przypadku spada wiarygodność bloga (czy wyobrażacie sobie poważny blog o finasach z różowymi wstążeczkami czy żółtymi słoneczkami)

Barwa ma kilka poziomów znaczeń. Kolor zawiera zarówno treść psychologiczną, fizjologiczną jak i kulturową.

  • psychologiczna – o niektórych kolorach mówimy, że są wesołe, pogodne a o innych że działają przygnębiająco
  • fizjologiczna – barwy oddziaływają na nasz system wegetatywny, mogą pobudzać (wzrost ciśnienia krwi, przyspieszenie oddechu i tętna oraz zwiększa częstotliwość mrugania powiekami) jak i uspokajać
  • kulturowa – w zależności od kultury barwy wykorzystuje się na różne sposoby, zwykliśmy uważać czerń za kolor żałoby podczas gdy są kultury w których taką rolę będzie odgrywała biel kojarzona przez nas ze ślubami, chrztami, niewinnością

Wracając jednak do portali proponuję porównać serwisy o podobnej tematyce.

Kobieta

Jak widać dominujące kolory to róż i szary.

Gazeta Kobietaonet Kobietawp kobietainteria kobieta

Biznes, Gospodarka, Giełda

Tutaj przeważają zieleń i niebieski.

Gazeta Gospodarkaonet bizneswp biznesinteria biznes

Turystyka

Kolory kojarzące się z wakacjami nad morzem czyli żółty i niebieski albo w lesie czy górach: zielony i brązowy.

Turystyka - Gazeta.plOnet.pl Podróże Turystyka - Wirtualna Polska Turystyka - INTERIA.PL

Oczywiście nie zawsze się to sprawdza. Ale pewne generalne reguły można dostrzec.

  • Sport - Gazeta.pl, Onet.pl, wp.pl, interia.pl
  • Dziecko - Gazeta.pl, Onet.pl, wp.pl, interia.pl
  • Astrologia - Gazeta.pl, Onet.pl, wp.pl, interia.pl
  • Pogoda - Gazeta.pl, Onet.pl, wp.pl, interia.pl

Zobacz więcej:

Marek Kasperski: e-brand: kolory... kobiety

piątek, 28 września 2007

Maile szablonoweJuż kiedyś na temat właściwości tekstu pisałam. Dzisiaj w formie ciekawostki powrócę do jednego z elementów formatowania tekstu mianowicie wyrównanie do obu krawędzi.

Z całego serca jednak polecam nie stosowanie innego sposobu wyrównania jak chorągiewkowy do lewej krawędzi. Tylko on przy tak automatycznym składzie sprawdzi się gwarantując właściwą wygodę czytania.

Jak wyrównać w szablonie tekst do lewego i prawego marginesu naraz (nie pamiętam ale to się chyba justowanie nazywało)? Chodzi mi o notkę, żeby nie trzeba było za każdym razem o tym pamiętać.

Jak pisałam są cztery rodzaje wyrównania:

  • right (do prawej),
  • left (do lewej),
  • center (wyśrodkowanie),
  • justify (wyjustowane czyli wyrównane do obu krawędzi)

Wartości te stosuje się przy właściwości text-align. Kod szablonu natomiast można znaleźć w dziale WYGLĄD -> EDYCJA CSS. Tyle tytułem przypomnienia.

Chcąc wyrównać tekst w notce wybraną wartość wraz z właściwością należy przypisać selektorom: .BlogWpisTresc, .WstepKomentowanegoWpisu, .TrescKomentowanegoWpisu, #StatycznaZawartosc. Tak więc odpowiedz na pytanie zawarte w początku wpisu będzie wyglądała tak:

.BlogWpisTresc, #StatycznaZawartosc, .WstepKomentowanegoWpisu, .TrescKomentowanegoWpisu {
 text-align:justify;
}

Dotychczas nie miałam zdania na temat, który ze sposobów wyrównania jest najlepszy. I właściwie nadal nie mam. Wyrównanie tekstu należy dostosować do zawartości. Ale…

Po przeczytaniu kilku uwag Bartłomieja Dymeckiego (Justowanie tekstu na stronie internetowej?) muszę się zgodzić z twierdzeniem, że justowanie tekstu choć edytorsko zalecane, w przypadku stron internetowych nie zawsze się sprawdza a w zasadzie nie sprawdza się wcale.

Pora na kilka generalnych uwag, które mam nadzieję przekonają cię do składu chorągiewkowego:

  1. strony internetowe to nie książki czy gazety; chociaż zwykliśmy stosować te same zasady edycji czasami lepiej jednak od nich nieco odejść aby zachować porównywalną czytelność
    • przykładowo wielkość teksu; w książce wystarczy nawet 10px bo książkę trzymamy bliżej oczu; ekran natomiast znajduje się zazwyczaj w odległości wyprostowanej ręki czyli nawet dwa razy dalej
  2. coraz więcej stron internetowych ma rozmiary relatywne, dostosowujące się do szerokości okna przeglądarki, nie sposób więc zadbać właściwie o tekst o zmiennej szerokości
  3. wąskie kolumny w ogóle mają spory problem z dobrym justowaniem tekstu, np. na stronie pojawi się długi ciąg znaków jak w przypadku adresów internetowych; adres zostanie przeniesiony do nowego wiersza a poprzedni jak będzie wyglądał?
  4. justowanie bez dzielenia wyrazów nie wychodzi dobrze, pojawiają się białe korytarze, które odciągają uwagę od czytania; właściwe wyrównanie do obu krawędzi wymaga czegoś więcej niż bezmyślna maszyna która rozciągnie wyrazy na szerokość łamu

I na koniec kilka złotych myśli z komentarzy do notki Justowanie tekstu...:

  • justowany tekst męczy oczy, zarówno w wąskich jak i szerokich kolumnach, ogólnie w szerokich kolumnach łatwo zgubić linijkę
  • o ile treść przygotowuje się z głową to tekst trzyma flow i nie sypie się na lewo i prawo
  • nie o to chodzi czy Was to wkurza, ale o to, co jest wygodne
  • Raz wygląda lepiej, raz gorzej- chyba nie ma na to uniwersalnej metody.
  • Bo justować trzeba umieć
  • albo poszarpane w środku, albo po brzegu; które gówienko smaczniejsze?
  • Zgodzę się, że tekst szarpany z prawej czyta się łatwiej od dziurawego, tyle, że rezultat jest z reguły nieestetyczny.
  • Justowany tekst to szyk, elegancja i porządek.

No więc co smaczniejsze?

Jeżeli jesteś zdeterminowany wyrównywać tekst do obu krawędzi to wybieraj szablony o stałej szerokości łamu i przede wszystkim pisząc tekst zadbaj o to aby był on właściwie połamany. Zaznaczaj odpowiednimi niewidocznymi znakami miejsca gdzie wyraz może zostać złamany, używaj spacji niełamliwej aby zapobiec pozostawieniu niepotrzebnych resztek. Przygotuj treść notki do justowania bo taki sposób wyrównania tekstu podkreśla wszystkie niedoskonałości składu.

Przydatne wpisy:

sobota, 22 września 2007

Tło jest jednym z podstawowych cech decydujących o wyglądzie szablonu bloga. Może to być tylko kolor albo także obraz. W połączeniu z różnicami wielkości można uzyskać bardzo różne efekty przypisując elementom odpowiednie tło. Dodatkowo tło w postaci obrazu może zastąpić wiele różnych sztuczek.

Na początek najprostsze rozwiązania i cechy związane z tłem:

  • background - zapis skrótowy w kolejności: color, image, repeat, attachment, position

background

W rozwinięciu dokładniejsze wyjaśnienia każdej z cech. Pobieżnie omówiłam też wartości jakie te właściwości mogą przybierać. Wszystko to zobrazowane jest przykładami z szablonów udostępnionych przeze mnie. Na koniec każdej cech niewielka tabelka podsumowująca wyjaśnienia i umożliwiająca szybkie odnalezienie wartości dla danej cechy (czyli odpowiedz na pytanie co mamy wpisać przy pozycji obrazku aby wyświetlał się on tylko od połowy, tylko jeden raz i w prawym górnym roku).

piątek, 14 września 2007

Linki w tekście dodajemy poprzez znacznik a, posiadać on może kilka atrybutów z których jedynym niezbędnym jest href czyli atrybut definiujący adres strony lub miejsca, do których następuje odwołanie. Głównym celem linku jest przeniesienie w inne miejsce. W większości wypadków linki są w specjalny sposób wyróżnione z tekstu. Nawet jeżeli szablon tego nie zrobi zajmie się tym przeglądarka. Większość z nich podkreśla linki i zmienia ich kolor: niebieskie są linki nieodwiedzone, fioletowe odwiedzone, czerwone aktywne. Można to oczywiście zmienić sobie w ustawieniach przeglądarki ale to nie jest tematem dzisiejszej notki.

CSS bloksa: znacznik linku

W dalszej części wpisu znajdują się informacje o tym gdzie w szablonie opisywane są linki (jakie selektory), jakich cech najczęściej używa się do wyróżnienia linków, jakich pesudoklas używa się przy linkach. A na koniec kilka przykładów opisów linków z moich szablonów.

W związku z tym, że przeglądarka dodaje kilka cech wyglądu linkom a znacznik linku jest zazwyczaj najbliżej ciała to ustawienia przeglądarki będą brane pod uwagę jako ważniejsze od ogólnych ustawień dla tekstu wpisanych w szablonie. Dlatego konieczne jest dodanie opisu linków osobno.

Przykładowo tytuły naszych notek są linkami. Za wygląd tytułów odpowiedzialne są selektory .BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul ale nawet jeśli określimy dla nich kolor czy brak podkreślenia to o ile nie będzie w szablonie osobnego opisu linków to będą one miały wygląd przeglądarkowy.

sobota, 08 września 2007

KoloryCzasami warto poszukać małej pomocy w dziedzinie wyboru kolorów. Nasz zmysł estetyczny i ulubione kolory są oczywiście bardzo ważne ale czemu nie skorzystać ze sprawdzonych metod dopasowywania kolorów?

Kolorowe strony

W internecie jest wiele stron zawierających schematy, tabele bądź generatory kolorów. W zależności od celów jakim ma służyć kolor czy od Twoich metod pracy, możesz znaleźć stronę, która najbardziej będzie Ci odpowiadała.

  • ColorHelper bardzo wygodna stronka do sprawdzenia jak będą ze sobą wyglądać kolory; zamiast testować na blogu możesz popróbować na tej właśnie stronce; kolory możesz określać dla tła, tekstu a także linków; możesz wybrać kolor z palety albo samemu go zdefiniować w postaci HEX albo RBG
  • Tabela kolorów z szablon-blogowy.friko.pl – bardzo funkcjonalna, działa w obie strony – możesz szukać zarówno wskazując kolor jak i wpisując kod szesnastkowy; bardzo wygodna gdy szukasz koloru tła
  • Color Chart ze strony www.allfreebackgrounds.com - tym razem tabela kolorów w postaci tekstowej; dzięki temu możesz sprawdzić czytelność tekstu w danym kolorze
  • Generator gradientów i tablica kolorów z DetectZONE – można określić górną i dolną barwę a generator wyświetli kolory pomiędzy dzięki temu można znaleźć barwy harmonijnie przechodzące od jednego do drugiego koloru
  • Color Palette Generator z DeGraeve.com - fantastyczna strona; nie tyle generator harmonijnych schematów kolorystycznych co generator kolorów pasujących do obrazu; wpisujesz adres ilustracji - klikasz - i otrzymujesz dwie palety po pięć kolorów pasujących do Twojego obrazu (wersja przytłumiona i żywsza)

Schematy kolorów

Sporo jest także stron na których możesz wygenerować optymalne schematy kolorów. Jedne są bardzo proste, podają tylko kilka wartości inne, bardziej rozbudowane, dają nieco więcej możliwości. Zazwyczaj generatory prezentują kolory monochromatyczne (monotoniczne), analogiczne, dwie wersje komplementarnych (uzupełniających) i triady oraz tetrady kolorów.

  • color schemer ze strony www.allfreebackgrounds.com - prosty generator schematów kolorystycznych; kolor można podać w postaci HEX, RBG czy też HSL. Jeżeli jeszcze się nie zdecydowałeś na kolor możesz skorzystać z suwaków RG B lub też wybrać jeden z kolorów z tabeli Web Colors lub Named Colors (kolorów posiadających nazwę).
  • Color Wizard z www.colorsontheweb.com - podobny do poprzedniego generator podaje jednak więcej kolorów przez co daje lepsze możliwości; dodatkowo prezentuje koło barw tłumaczące zasady dobierania kolorów
  • Color Schemer Online z www.colorschemer.com - prosta wersja online świetnego generatora schematów; w wersji online komponuje on paletę 16 kolorów a także w prosty sposób umożliwia wygenerowanie nieco ciemniejszej albo jaśniejszej palety; kolor można wybrać z tabeli albo wpisać jego wartość HEX lub RBG
  • Color Scheme Generator 2 z wellstyled.com - całkiem fajny generator; przede wszystkim  przypadku schematów dopełniających rozszczepionych czy triad umożliwia zdefiniowania własnych odległości miedzy kolorami; dodatkowo wyświetla schematy w kilku wersjach: normalnej, pastelowej, ciemnopastelowej, jasnopastelowej, bardziej kontrastowej czy też wyblakłej (pale); i najciekawsza rzecz pozwala sprawdzić jak te kolory będą widziane przez osoby cierpiące na jakieś choroby czy upośledzenia związane z widzeniem kolorów (do wyboru masz 8 różnych wariantów)
  • Schemes z www.colorschemer.com - gotowe schematy kolorów - fantastyczna sprawa dla tych którzy uważają, że nie mają wyczucia kolorów
  • Palettes z www.colourlovers.com - świetna strona na której możesz znaleźć gotowe schematy jak i stworzyć własne

Inne strony:

  • ColorBlender.com
  • 4096 Color Wheel

Oczywiście jeżeli samemu poszukasz to znajdziesz jeszcze więcej stron z tabelami kolorów. Te które podałam mają służyć jedynie za przykład. Moje ulubione to aktualnie Color Palette Generator i Color Wizard.

piątek, 07 września 2007

Une_Fille5 szablony publikuje nieregularnie. Mimo iż blog ma już prawie 9 miesięcy szablonów jest zaledwie 21. Mimo to polecam, szczególnie ze względu na te trzy:

dalia oset gladiolus

Mała prośba od autorki szablonów:

Zostaw link do swojego bloga w komentarzach pod szablonem, który wybierzesz. Umieszczę go na tej stronie. Będzie mi miło, jeśli stronę tę polecisz swoim znajomym, a na swoim blogu umieścisz do niej link.

Stare szablony są raczej przeciętne. Nie wybijają się za bardzo ponad normę, po prostu kawałek całkiem niezłej pracy. Nowsze są zdecydowanie lepsze. A trzy zielone szablony, które tu pokazałam są niemal doskonałe. Kolorystyka dobrze dopasowana, gradient nieźle zrobiony, do tego nieruchome tło (zapewne zapisane w Body bo tło BlogGlownyBox jest inne) i przezroczystość całego Boxu z blogiem. Rewelacja.

Długo się zastanawiałam jakie znaleźć minusy tych trzech szablonów. Myślałam nad kolorami ale raczej zalecam pozostawienie oryginalnych bo są doskonale dopasowane. Odnośniki mają usunięte podkreślenie (nie mam nic przeciwko podkreśleniu ale irytuje mnie że jest automatyczne), czcionka czytelna, bez szeryfów, klawisze też dobrze zrobione, wszystko świetnie. Jedyne małe ale to niewielkie różnice pomiędzy wyświetlaniem szablonu w Microsoft Internet Explorer i Mozilla Firefox – ale to nic strasznego (bardzo się starałam żeby znaleźć cokolwiek). Nic więcej nie znalazłam. Polecam i z niecierpliwością czekam na nowe.

niedziela, 02 września 2007

Kontynuując wątek podjęty w poprzedniej notce zajmę się dzisiaj właściwościami tekstu. Poprzednio omówiłam text-align, text-transform i text-decoration. Dzisiaj zajmę się innymi elementami związanymi wyglądem tekstu.

  1. text-indent czyli wcinanie tekstu
    wartość wcięcia określa się najczęściej w pt, px i procentach nie zapomnij więc podać jednostki; najwygodniej to jednak zrobić w 'emach' dzieki czemu łatwo zachowac proporcje
  2. line-height czyli odstęp między wierszami (interlinia)
    jak wyżej wartość podaje się w procentach bądź liczbie (plus jednostka), możesz też napisać normal; automatycznie interlinia ustawiona jest zazwyczaj na wartości 120%;
  3. vertical-align czyli wyrównanie tekstu w pionie
    możesz określić wyrównanie za pomocą słownych wartości: baseline, sub (indeks dolny), super (indeks górny), top, text-top, middle, bottom, text-bottom; możesz także użyć wartości wyrażonej w procentach
  4. white-space czyli wyświetlanie spacji
    normal wyświetla kilka spacji obok siebie jako jedną (muszę się przyznać, że nie znoszę jak ktoś używa kilku spacji obok siebie żeby przesunąć tekst; najgorzej jest jak w zwykłych dokumentach tekstowych widzę trzydzieści spacji użytych po to aby przejść do następnej linijki albo na następną stronę – wrr)
  5. letter-spacing czyli odstęp między literami
    wartości: normal, dowolna długość (liczba plus jednostka)
    całkiem przydatny element; wydaje mi się że czasami lepiej użyć w wyróżnieniu odnośnika takiego rozstrzelenia niż na przykład większej czcionki (nie daj Boże żeby się jeszcze po najechaniu na nią kursorem zmniejszała – cały tekst zaczyna skakać)
  6. word-spacing czyli odstęp między wyrazami
    szerokość odstępu pomiedzy wyrazami: normal lub dowolna długość wyrażona w liczbie (plus jednostka)
    i to jest dobry sposób na zmianę sytuacji gdy uważamy że odstęp między wyrazami jaki daje jedna spacja jest za mały; najlepiej w takim przypadku użwyać jednostek wzglednych, łatwiej wtedy zachowac proporcje
  7. first-letter chyba wszystko jasne – pierwsza litera czyli inicjał
    jest to całkiem miły sposób (i nieco staroświecki) aby wyróżnić początek tekstu; nie polecam tego natomiast przy każdym akapicie (no chyba że notki są krótkie, nie więcej niż 2-3 akapity z których każdy dotyczy innego tematu – w ten sposób w książkach wyróżnia się początek nowego rozdziału a nie każdego akapitu i tego się trzymajmy)
sobota, 01 września 2007

Jest wiele właściwości które możemy opisać w CSSie. Niektóre są konieczne inne przydatne a jeszcze inne tak rzadko wykorzystywane, że można zastanawiać się po co właściwie one są. Dzisiaj opiszę kilka właściwości dotyczących edycji tekstu.

TEXT

  1. text-align czyli wyrównanie tekstu
    Są cztery rodzaje wyrównania: right (do prawej), left (do lewej), center (wyśrodkowanie), justfy (wyjustowane czyli wyrównane do obu krawędzi)
    Właściwość przydatna szczególnie jeżeli lubisz jak tekst jest równiutko dopasowany do obu krawędzi a Twój szablon konsekwentnie wyrównuje tylko do lewej. Oczywiście możesz zmieniać to przy każdej notce ale czy nie będzie prościej zrobić to w CSSie i po kłopocie?
  2. text-transform czyli wielkość liter
    Można podać cztery wartości wielkości liter (wielkości liter a nie wielkości czcionki): none (czyli żadna, litery będą takie jakie je napiszesz w edytorze), capitalize (czyli z dużej litery), uppercase (czyli dużymi literami, wersaliki), lowercase (małymi literami)
  3. text-decoration czyli dekorowanie tekstu
    Wartości: none (bez dekoracji), underline (podkreślenie), overline (nadkreślenie), line-through (przekreślenie), blink (miganie)
    W zasadzie polecam używanie tylko dwóch wartości: underline i none. Nadkreślenie jest bardzo niewygodne, sprawia błędne wrażenie jakby to tekst powyżej był podkreślony. Miganie jest bardzo denerwujące. Za dużo elementów ruchomych na stronie męczy i zamiast zachęcić do pozostania na stronie odwiedzający szybko ją opuści zirytowany tym że jakieś mrugacze odwracają jego uwagę od tego co czyta lub ogląda. Przekreślenie natomiast unieważnia tekst. Czyli jeżeli chcesz aby coś było przekreślone bo jest już nieaktualne ale warto żeby było nadal widoczne to używaj przekreślenia śmiało. Jeżeli jednak chcesz użyć przekreślenia jako dekoracji tytułu notki albo odnośnika czy nazwy kategorii to odradzam.
    I na koniec drobna uwaga o wartości none. Bardzo często linki są automatycznie udekorowane podkreśleniem (Np. automatycznie w przeglądarce) dlatego warto zaznaczyć w swoim CSSie przy znaczniku a (odpowiadającym za wygląd odnośników) że się nie chce podkreślenia – text-decoration:none.
Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...