O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 21 grudnia 2008

Święta już a kilka dni więc to ostatni moment na świąteczną zmianę wyglądu bloga. Dzisiaj mam trzy propozycje. Gotowe są już od mniej więcej tygodnia dostępne od kilku dni tylko napisać o tym nie bardzo mi się chciało. Nie wiem czy to świąteczne lenistwo czy jakąś bardziej ogólna przypadłość ale najważniejsze że dzisiaj się zmobilizowałam i przedstawiam trzy świąteczno-zimowe propozycje. Wszystkie trzy maja wąską szpaltę po prawej, są dość szerokie bo zmieszczą się tam w notkach ilustracje nawet 500px szerokości, są jasne o wyraźnym kontraście pomiędzy tekstem a tłem. Tematem pierwszych dwóch są święta, zarówno jako wydarzenie religijne jak i komercyjne. Trzeci jest nieco bardziej uniwersalny i tylko nawiązuje do zimowych klimatów.


1. Szablon świąteczny 04 - żółty betlejemski

szablon śwąteczny 04 - żółty betlejemski


2. Szablon świąteczny 05 - czerwono-zielony, pasiasty

Szablon śwąteczny 05 - czerwono-zielony, pasiasty

  • Tym razem nieco słabsze nawiązanie do projektów handmade. Od dłuższego czasu miałam ochotę na paskowany szablon, wydaje mi się że do ujęcia tematu świątecznego rodem z supermarketu świetnie pasują takie biało-czerwone paski
  • Dla zrównoważenia intensywnej czerwieni połączonej bardzo kontrastowo z bielą użyłam kilku odcieni zielonego – to spokojniejszy kolor a z drugiej strony wystarczająco wyrazisty aby nie dać się zdominować czerwieni.
  • Dodatki te same co poprzednio: zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod nazwą uStopka bo w ten właśnie sposób umieściłam tam informacje o szablonie

3. Szablon świąteczny 06 - zimowy szary

szablon śwąteczny 06 - zimowy szary

  • Tym razem obeszło się bez inspiracji handmade ale rzniez skorzystała z już istniejącego układu. Szablon ten korzysta z wzoru top 08 - Drawing Hands
  • Kolorystyka raczej przygaszona: szarość, brązy i beże. Nieco wyróżnia się na tym tle ciemna czerwień linków i świetliste płatki śniegu w topie.
  • Oczywiście opisałam skrypty i dodatki: zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod nazwą uStopka bo w ten właśnie sposób umieściłam tam informacje o szablonie
niedziela, 14 grudnia 2008

Mamy połowę grudnia więc myślę, że to dobry czas aby zacząć myśleć o świętach. Świąteczny konkurs Tchibo trwa w najlepsze, w supermarketach puszczają te wszystkie anglosaskie wesołe piosenki świąteczne więc zacznijmy zabawę w święta. Na początek proponuję przyjrzeć się dwóm szablon_teamowy tagom: święta i zima.

Dzisiaj dla przypomnienia trzy świąteczno-zimowe szablony na bloksa. Zielony i czerwony już były tutaj jednak niebieski mimo iż zasadniczo zeszłoroczny pojawił się tylko na szablon_team. Szablony są nieco odświeżone, opisałam w nich brakujące elementy tak więc wszystkie nowości, włącznie ze stroną statyczną, jakie pojawiły się w minionym roku szablony będą poprawnie wyświetlać. Dodałam też opis różnych dodatków i skryptów które usprawniają funkcjonalność bloga albo po prosu są ciekawe (zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu, udawana stopka). I ostatnia zmiana, w przypadku zielonego i niebieskiego chyba największa, mianowicie wybrałam inne czcionki do tych szablonów a w przypadku zielonego zmieniłam też nieco kolor.

szablon śwąteczny 03 - niebieski śnieżynkowy
szablon śwąteczny 03 - niebieski śnieżynkowy

szablon śwąteczny 02 - czerwony z reniferem
szablon śwąteczny 02 - czerwony z reniferem

szablon śwąteczny 01 - zielony z choinką
szablon świąteczny 01 - z zieloną choinką

 

Przypominam też pozostałe zeszłoroczne notki świąteczne:

czwartek, 11 grudnia 2008

Jest wiele rzeczy których na bloksie nie ma, są pewne ograniczenia techniczne które sprawiają, że szablony bloksowe składają się takich a nie innych elementów. Sensowny dostęp do html bloga jest marzeniem wielu i każdy ma chyba „listę życzeń” która zahacza o html. Nie jest jednak tragicznie, dysponując wiedzą i wyobraźnią można całkiem sporo rzeczy zrealizować nie wychodząc z ram bloksa. Jedną z tych rzeczy jest właśnie udawana stopka o którą kilka dni temu pytał się wojtekb.1. Zanim zacznie się w ogóle myśleć o jakiś rozwiązaniu problemu należy najpierw stwierdzić czy ten problem rzeczywiście istnieje. Jakich informacji brak na Twojej stronie? Czego dotyczą te informacje? Gdzie zazwyczaj się je umieszcza? Czy na prawdę potrzebujesz aby w stopce Twojego bloga pojawił się tekst? Można też spróbować inaczej: chcę mieć stopkę więc znajdę sobie informacje które tam umieszczę.

Informacje w stopce

Przyjrzyjmy się więc różnym stopkom.  Po pierwsze stopka może być elementem czysto dekoracyjnym. Jeżeli nie potrzebujemy aby informacje zawarte w stopce były htmlem to równie dobrze, bez kombinowania, możemy je zapisać w grafice i tą grafikę przypisać do istniejącego w większości szablonów elementu #Stopka. Fajne stopki na bloksie robi taisha, są przede wszystkim elementem dekoracyjnym ale pełnią też rolę informacyjną pokazując adres strony autorki szablonu.

Stopka z łabędziem Stopka z kaczką
dirty stopka 094 stopka z murem
Stopka z murem stopka z ornamentem
Stopka z myszką Stopka z myszką
Stopka z ołówkiem Stopka z młynkiem

Przyjmijmy jednak, że stopka informuje o czymś i to w sposób aktywny bo poza tym, że pokazuje tekst pozwala go też skopiować, uczynić hiperłączem itd. Tekst jest możliwy do odczytania dla wszelkiego rodzaju botów, zarówno tych które przeszukują sieć pod kątem treści i powiązań jak i tych które mają ułatwiać życie osobom mającym utrudniony dostęp do treści. Jakie wiec informacje powinny znaleźć się w stopce?

Najprościej rzecz ujmując te których szuka tam czytelnik, czyli przede wszystkim informacje o stronie i jej właścicielu. Przykładowo:

  • about
  • kontakt
  • rss
  • design
  • copyright
  • home
  • top.

Tworzymy zawartość udawanej stopki

W zasadzie w udawanej stopce można umieścić wszystko. Z technicznego punktu widzenia tworzenie zawartości stopki nie różni się niczym od tworzenia elementu TrzeciaSzpalta. Po prostu zapisujemy informacje ubierając je w tagi html. Tym razem raczej nieprzydatne będą tagi listy (no chyba że ktoś chciałby stworzyć bardziej rozbudowane menu) ale pozostałe podstawowe elementy się przydadzą. Przede wszystkim powinniśmy stworzyć element blokowy w którym znajdzie się cała nasza udawana stopka i który będziemy następnie pozycjonować na stronie. Nazwać go można dowolnie ale najlepiej tak aby łatwo go było rozpoznać. Nie może to być Stopka ponieważ taki element już na stronie istnieje. Proponuję z angielskiego footer, bottom albo w stylu bloksowym PodBlog czy StopkaTresc. Ja swoją stopkę nazwę uStopka.

<div id="uStopka">
<!-- tutaj znajdzie się treść menu stopki -->
</div>

Teraz potrzebujemy stworzyć nasze menu. Nie powinno być zbyt długie. Tylko najpotrzebniejsze rzeczy wiążące się z informacjami o stronie. Jeżeli element jest dobrze widoczny w innym miejscu na blogu nie ma większego sensu umieszczać go ponownie w stopce.

1. powrót na początek strony – top

<a href="#NadTytul">top</a>

Link przewijający na początek jest całkiem przydatny gdy wpisów jest sporo albo gdy sa bardzo długie. Słowo przewijające stronę do początku może być dowolne. Nie całkiem  przekonana wybrałam angielskie słowo top z dwóch powodów: jest do pewnego stopnia zrozumiałe bez względu na język którym się posługujemy i jest bardzo krótkie (niesamowita zaleta angielskich słów to ich długość – świetnie nadają się do przekazania lakonicznych informacji – może piękne nie są ale wystarczająco funkcjonalne).

Warto zwrócić uwagę na różnicę pomiędzy linkiem home a linkiem top. Home czyli powrót na stronę główną bloga przeładuje stronę – blog zacznie się od nowa wczytywać. Celem linku top jest coś innego, nie przeładowuje on strony a jedynie przewija ją do początku (do góry). Jest to dość przydatne gdy wpisów na blogu jest bardzo dużo bądź są bardzo długie. Jedyną uciążliwością takiego rozwiązania może być to, że przycisk wstecz w przeglądarce nie działa całkiem tak jakbyśmy tego oczekiwali bo gdy klikniemy w link top to mimo iż pozostajemy dalej na tej samej stronie to przycisk wstecz skieruje nas na dół strony tam gdzie jest link który kliknęliśmy. Dzieje sie tak dlatego, ze choć strona jest ta sama to jej adres nieznacznie się zmienił.

Aby uzyskać efekt przewinięcia a nie przeładowania strony pod słowem top powinniśmy ukryć link do elementu znajdującego się na górze strony (czyli poraz zerknąć do źródła strony). Świetnie się do tego nada element blokowy NadTytul, nie zawiera żadnych treści i jest umieszczony nad tytułem. Niestety nie na każdym blogu ten element się znajdzie. Szablony na bloksie różnią się swoimi htmlami, różnice są mniej lub bardziej widoczne ale istnieją więc należy na nie zwrócić uwagę i w miarę możliwości wykorzystać zalety każdego szablonu. Z powodu braku elementu NadTytul zapis ten nie zadziała w przypadku szablonów: Niebieski, Klasyczny, Theme A, Theme C, Theme F, Theme G, Theme I. W takim przypadku proponuję linkować do elementu zawierającego tytuł bloga czyli #BlogTytulBox

2. licencja treści bloga

<a href="mailto:szablonykatemac@gmail.com">&copy kate_mac</a>

Treść bloga na licencji <a href="http://creativecommons.org/licenses/by/2.5/pl/">cc-by</a> udostępnia <a href="mailto:szablonykatemac@gmail.com">kate_mac</a>

Zalecam racjonalne podejście do tematu i nie wklejanie na blogu copyright. Po pierwsze istnieje coś takiego jak dozwolony użytek i prawo cytatu więc generalnie każdy może korzystać z treści bloga więc może lepiej określić jaki sposób korzystania jest dozwolony niż zastrzegać wszelkie prawa. Polecam wszelkie copyleft, licencje projektu GNU (GNU-GPL, GNU-FDL, FAL) czy też jedną z licencji Creative Commons. Pamiętajmy, że szeroko rozmumiana kultura powinna być dostępna. Zresztą tak jest kojarzona sieć. Przykładowo treści na stronie zespołu prezydenta-elekta Baraka Obamy są udostępnione na licencji CC-by. Jeżeli jednak zdecydujesz się na copyright to nie próbuj udawać znaku © poprzez umieszczanie litery c w nawiasach (c) – to nie jest znak copyright. Rozumiem, że tak jest najprościej ale to będzie tylko litera c w nawiasach. Znaki specjalne wpisuje się korzystając ze specjalnych kodów. Strony na blox.pl używają kodowania znaków iso-8859-2 można więc skorzystać z tabeli kodów i wybrać kod numeryczny. Polecam jednak korzystanie z encji są prostsze do zapamiętania a tym samy wygodniejsze. Można też przy ich użyciu zapisywać znaki których nie ma w standardzie iso-8859-2. (Szczerze uwielbiam standarty ISO - czy wiecie, że nawet papier toaletowy ma rozmiar zgodny ze standartami? - cudowne)

3. informacje o autorstwie szablonu

Z oczywistych względów umieszczam w stopce informacje o projekcie strony. Bardziej odpowiada mi taki sposób niż mój różowy button więc najprawdopodobniej wymienię go właśnie na informacje w udawanej stopce.

design by <a href="http://szablonykatemac.blox.pl/html">kate_mac</a>

Teraz wystarczy odpowiednio połączyć wszystkie części i stworzyć sensowne menu. Podany poniżej przykład całości kodu może być stosowany w przypadku większości moich szablonów.

<div id="uStopka">
<a href="#NadTytul">top</a> |
Szablon udostępniony na licencji <a href=" http://creativecommons.org/licenses/by/2.5/pl/">cc-by</a> popełniła <a href="http://szablonykatemac.blox.pl/html">kate_mac</a>
</div>

Pozycjonujemy udawaną stopkę

Teraz pora na odpowiedni CSS. Aby umiejscowić stopkę na dole strony wykorzystamy pozycjonowanie względnie bezwzględne. Oznacza to że elementowi nadrzędnemu musimy określić pozycjonowanie jako względne a naszemu nowemu elementowi bezwzględne – dokładnie tak samo jak w przypadku elementu TrzeciaSzpalta. Dla wszystkich elementów wklejanych w polu na kod html elementem nadrzędnym będzie #BlogBodyBox i następnie #BlogGlownyBox dlatego właśnie przy jednym z tych selektorów należy określić cechę position jako relative.

#BlogGlownyBox {
position:relative;
}

Teraz możemy spokojnie wypozycjonować absolutnie nasz nowy element. Jedyną różnicą w stosunku do pozycjonowania trzeciej szpalty będzie fakt iż element umieszczamy względem dolnej a nie górnej krawędzi bloga. Tak samo możemy zmienić lewą na prawą krawędź jeżeli tak będzie lepiej pasowało do szablonu.

#uStopka {
position:absolute;
bottom:10px;
left:20px;
}

To są wystarczające elementy do umiejscowienia elementu teraz można jeszcze dodać opis wyglądu tekstu. Przykładowo nasza stopka mogłaby wyglądać tak:

#uStopka {
position:absolute;
bottom:10px;
left:20px;
font-size: 90%;
color:#999;
}

I gotowe.

Źródła i dodatkowe informacje:

  • www.smashingmagazine.com: CSS-Based Footers: Modern Solutions
  • www.smashingmagazine.com: Footers In Modern Web Design: Creative Examples and Ideas
  • www.smashingmagazine.com: A Short Story About “Back To Top” Links
  • Elements of Design: Footers Design Showcase (76 examples)
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...