O szablonach, ich projektowaniu i moich z tym zmaganiach...
środa, 29 lutego 2012

HTML podręcznikZnaczniki budują strony internetowe. Oczywiście strona nie musi być napisana w języku HTML, są liczne inne sposoby ale z punku widzenia tego blogu nieistotne. Tak się składa, że bloksowe blogi posługują się językiem XHTML. Wystarczy zajrzeć do źródła strony i tam zaraz na początku będą informacje o typie dokumentu. Bloksy to XHTML.

Znaczniki układają treść w odpowiednie formy, mówią one przeglądarce jaki to rodzaj treści tak aby mogła ona zdecydować o sposobie wyświetlania. Najprościej wyjaśnić to na podstawie ilustracji czy linku. Kontynuując temat z poprzedniej podręcznikowej notki dzisiaj przejdę do bardziej konkretnego przykładu i opiszę co nieco jeden ze znaczników: odnośnik.

Znacznik linku, budowa, atrybuty, możliwości opisu wyglądu

Linki to okna naszego HTMLowego domku. Pozwalają one zobaczyć coś więcej, rozszerzyć nieco temat i powiązać go z innymi elementami w sieci. Odpowiednikiem linków w wersji papierowej są przypisy. W najlepszym razie są one na tej samej stronie co treść do której są przypisane i od razu można podejrzeć ogólny kierunek w którym przypis ma nas prowadzić. Zazwyczaj jednak nie zawierają rozszerzającej treści tylko informują, że ona istnieje i znajduje się w określonej pozycji książkowej. Jeżeli chcesz się dowiedzieć czegoś więcej musisz zacząć od znalezienia następnej książki. W Internecie jest dużo łatwiej wystarczy kliknąć. I na tym właśnie moim zdaniem polega cała magia użyteczności linków.

W dzisiejszej notce opiszę budowę znacznika linku, które jego części są niezbędne, które mile widziane i całkiem przydatne a które to raczej osobliwość. Te części to oczywiście atrybuty ale o tym wiesz już z poprzedniej notki.

środa, 22 lutego 2012

Kolejna nowość i ciekawostka z zasobów specyfikacji CSS3, moduł tła i ramek. Tym razem będzie to cień. Nie planowałam tak dokładnie i po kolei opisywać tego modułu ale akurat tak się złożyło więc nie ma co się sprzeciwiać skoro wychodzi naturalnie.

box-shadow

Domyślnie mówiąc cień chodzi nam o cień zewnętrzny i tak też ta cecha jest interpretowana można jednak dodawać także cień wewnętrzny, który odpowiednio spreparowany może dawać wrażenie, że element jest zagłębiony. Bardzo rozmyty cień wewnętrzny da natomiast wrażenie gradientu na krańcach elementu. Cień to tylko możliwość i w zależności od twojej wyobraźni możesz go wykorzystać do wielu różnych celów. Dzisiejsza notka powie ci, które wartości odpowiedzialne są za jakie zmiany tej cechy.

W dalszej części notki opisuję także prefiksy czyli przeglądarkowy myk, który pozwala wykorzystać cechę nawet jeżeli przeglądarka jest stara. Na koniec dodaję kilka przykładów z życia wziętych, nic radykalnego bo zazwyczaj nie chcę opierać całego wyglądu na cesze, która jest stosunkowo nowa a przez to nie do końca dostępna dla wszystkich oglądających szablon.

niedziela, 12 lutego 2012

Niektóre zmiany są trudne do przeprowadzenia. Ciężko jest zmienić klimat szablonu na którego charakter składają się głównie grafiki w tle, jest on dosłownie zszyty na wymiar i tyle (chociaż CSS 3 daje aktualnie dodatkowe możliwości, które eliminują konieczność wykorzystania precyzyjnie zaprojektowanych ilustracji do tła). Są jednak szablony nieco luźniejsze. Owszem mają grafiki ale są one powtarzalne. Owszem mają ozdoby ale są one tworem kodu i w każdej chwil można wykorzystać je do nieco innych celów albo nieznacznie zmienić.

szablon dashed zmiana kolorów

Jednym z takich szablonów jest dashed. Największą jego ozdobą jest kolor więc bardzo łatwo zmienić taki wyróżnik. Co lepsze przypisany jest on tylko linkom (wszystkim za wyjątkiem tytułu bloga i notek) więc ewentualną zmianę przeprowadza się w jednym miejscu. Banalnie proste, nieprawdaż?

Instrukcja najprostsza.

1. Przechodzimy do edycji kodu szablonu (WYGLĄD->EDYCJA CSS)

2. Odszukujemy w szablonie kolor, który chcemy zmienić, np. kolor linków

3. Otwieramy przeglądarkową wyszukiwarkę (Ctrl+F) i wpisujemy tam wybrany kolor.

4. Numer zmienianego koloru zastępujemy w arkuszu numerem nowego wybranego koloru.

5. Upewniamy się, że kolor, którego chcemy się pozbyć nie pojawia się ponownie w szablonie, korzystając z wyszukiwarki przeglądarki.

Klikamy zapisz i gotowe

W dalszej części wpisu dokładny opis całego procesu dla tych co miewają wątpliwości. A na koniec prezent: kolorowy dashed czyli gotowe kody ze zmienionymi kolorami. Wystarczy zastąpić nimi kod pobranego szablonu i gotowe.

Kolorowy Dashed

środa, 08 lutego 2012

Myślałam o różnych rodzajach spisu treści. Układam poszczególne notki w grupy i staram się aby miały zawsze chociaż jeden wspólny tag. Poprawiając notki dzielę je na wstęp i treść bo planuję zwiększyć liczbę wpisów na stronie głównej co powinno przyśpieszyć i ułatwić przeglądanie całego bloga. Szablony są podzielone wg kolorów, czcionek czy ozdób na stronie delicious bo siedem tagów pod pojedynczą notką to trochę mało a delicious pozwala mi nie tyle podlinkowywać notki o szablonach (choć i tak można by było) co od razu blogi z szablonami.

To czego od dawna brakowało na tym blogu to porządny spis treści. Powinien w zasadzie być zrobiony tematycznie ale zamierzam zrobić małą rewolucję w kategoriach tak aby podział był bardzie zrozumiały (przykładowo szablony trzykolumnowe trafią do wspólnej kategorii z pozostałymi bo w większości nie wymagają specjalnego traktowania, za to przeróbki szablonowe dostaną własną kategorię bo na razie w zależności od tego czego dotyczy zmiana to są one porozrzucane po trzech kategoriach).

Dlatego zdecydowałam się na spis chronologiczny, który pomoże mi w sprawnym reorganizowaniu bloga. Na razie na jednej stronie spisu umieściłam po sto lików ale ledwo co się one mieszczą w notce ze względu na wszystkie te opisy i objaśnienia. Dlatego też przy najbliższej okazji ograniczę ich liczbę do dziewięćdziesięciu na stronę.


1-100 | 101-200 | 201-300


Sporo notek jest tam przekreślonych, to są te do których jeszcze się nie dobrałam a planuję. Ich treść nie tyle jest nieaktualna co planuję ją uzupełnić o nowe, pełniejsze informacje, które z biegiem lat zdobyłam.

Podobnie szablony. Wszystkie moje szablony, poza może dziesięcioma prostymi, są aktualne ale zamierzam wzbogacić je o górne menu i jakieś propozycje zmian nadających bardziej indywidualny charakter. Część z nich już zmieniona jest, te obok nazwy szablonu w spisie treści mają też obrazek favikonki umieszczonej na blogu z szablonem.

Spis treści

Ten spis jest chyba na razie bardziej dla mnie ale może komuś się przyda. Gdy wprowadzę trochę więcej zmian w notkach i podzielę wpis pomiędzy większą liczbę stron, tak już na stałe, to podlinkuję go na stronie głównej na stałe.

niedziela, 05 lutego 2012

Reliefowe szablony nie są doskonałe. Brakuje im nieco miękkości, czegoś przyjaznego i osobistego. Uznałam je jednak za skończone bo tą osobistość ma zapewnić użytkownik szablonu. Taki szeroki projekt pasuje tylko do treści wizualnych z niewielkimi opisami więc nie wiedząc co na blogu się znajdzie nie chciałam za bardzo nadawać mu tematu czy stylu.

Połączony efekt szablonu i własnej ilustracji wychodzi natomiast doskonale co mogę potwierdzić własnym doświadczeniem bo na dwóch swoich innych blogach wykorzystałam karminowy i amerykański.

Ilustracje tytułowe na poniższych zrzutach są zupełnie przykładowe i nawet ich w szablonie nie umieszczałam.


07 reliefowy beżowo karmazynowy

Szablon 07 reliefowy, beżowo-karminowy,
na nowym kodzie, dla blogów na blox.pl. -935px- 


08 reliefowy amerykański

08 szablon reliefowy, czerwono-niebieski,
na nowym kodzie, dla blogów na blox.pl. -935px- 


09 szablon reliefowy, czarny

09 szablon reliefowy, czarny,
na nowym kodzie, dla blogów na blox.pl. -935px- 


Wszystkie one są na nowym kodzie, mają wszystkie elementy wąskiej szpalty zarówno na stronie głównej jak i stronach z pojedynczymi wpisami tylko, że jest ona umieszczona pod treścią główną. Udało mi się znaleźć sposób na konkretne określenie jej szerokości przy jednoczesnym elastycznym umieszczeniu dolnego tła, które rośnie wraz z treścią poboczną. Kod do górnego menu mają opisany ale w szablonach na nowym kodzie dodaję mu nieco inny identyfikator (#menu-top).

Nie przygotowałam wersji w pełni dwukolumnowej ale za to zrobiłam coś na kształt... Dla każdego z szablonów przygotowałam trzy wersje z bezwzględnie wypozycjonowanymi elementami z treści pobocznej, są to odpowiednio kategorie, zakładki bądź dodatki. Należy być tylko ostrożnym po przy takim pozycjonowaniu może się pojawić problem na stronie z pojedynczym wpisem gdy ten będzie krótszy niż element pozycjonowany.

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...