O szablonach, ich projektowaniu i moich z tym zmaganiach...
środa, 31 marca 2010

UWAGA. Szablon pod adresem http://filmowy02szablonkatemac.blox.pl przeszedł gruntowną przemianę i nie przypomina samego siebie sprzed lat. Ta notka zostanie zaktualizowana jak uznam szablon za skończony i wymyślę co dalej ze zmianami tu proponowanymi.


Kilka miesięcy temu pokazywałam jak zmienić jeden z blokowych szablonów w szablon kulinarny wymieniając w nim grafikę tytułową i kolory. Była to próba połączenia kilku instrukcji i wyjaśnień których wcześniej udzielałam, taka wizualizacja możliwości. Dzisiaj ponownie zmienię jeden z dostępnych od dawna szablonów w szablon kulinarny. Tym razem będzie to niezbyt lubiany przeze mnie drugi szablon filmowy Let’s make love. Szablon jest całkiem w porządku, jest w miarę sensowny i dość atrakcyjny jednak tworząc go chciałam pokazać, że istnieje inna możliwość jeżeli chodzi o umieszczanie grafiki w tle bloga. Dzisiaj odrobinę zmienimy wygląd tego właśnie szablonu.

Kate przedstawia kulinarny bloxSkładniki:

Sposób przyrządzenia:

1. Szablon: Let’s make love

Theme E - 1themeEWybrany szablon ładujemy na nasz blog. W tym przypadku będzie to szablon filmowy 02 Let’s make love zrobiony na bazie html ThemeE. Przed rozpoczęciem zmian upewnijcie się, że to ten szablon bazowy jest wybrany a w polu na arkusz CSS znajduje się arkusz szablonu filmowego. Jeżeli w którymś z przypadków jest inaczej i nie wiecie jak to zmienić proponuje przeczytać tą notkę o kopiowaniu szablonu.

2. Ilustracja: The Pie Hole & gimp

Gdzie pachną stokrotki (ang. Pushing Daisies)Zapewne większość osób prowadzących kulinarne blogi ma cała masę fajnych, apetycznych zdjęć (przy okazji jeżeli ktoś chciałby się podzielić jakimiś smacznymi ujęciami to poproszę - będę baaardzo wdzięczna, przydadzą mi się do szablonów kulinarnych). Ja taką bazą nie dysponuję tak więc dzisiejszy cel osiągnę korzystając ze zdjęć z serialu Gdzie pachną stokrotki, będzie to połączenie tematu filmowego i kulinarnego. Główny bohater serialu dysponuje dość niezwykłym darem ale dla dzisiejszego wpisu istotne jest to, że piecze ciasta.

Pomiędzy wąską a szeroką szpalta jest około 270px szerokości i o ile nie chcemy aby tło wyświetlało się też pod którąś ze szpalt należy do tej szerokości się ograniczyć. To jest wartość maksymalna, węższa ilustracja wyglądałaby nawet lepiej, pomiędzy szpaltami nie byłoby tak ciasno.

przedpoJa wybrałam sekwencję zdjęć. Tak było w przypadku szablonu z Monroe, tak jest i teraz. Będą to cztery powtarzające się zdjęcia. Oczywiście jeżeli będzie wam tak pasowało możecie przygotować dłuższą grafikę. Pamiętajcie tylko aby nie była zbyt ciężka. Moja sekwencja zawiera cztery fotki z serialu ubrane w niewielkie rameczki z cieniem. Jeżeli chcesz z nich skorzystać to zachęcam. Plik png bez fotek, z samymi ramkami można sobie skopiować i wkleić własne zdjęcia. Jeżeli nie wiesz jak to odsyłam do poprzedniej notki zawierającej dokładną instrukcję, tak dla zielonych.

Dysponując już odpowiednią grafiką (szerokość, wysokość, kolory, optymalizacja wielkości etc.) dodajemy ją do zasobów bloga. Nazwać ją można dowolnie, ta w szablonie z Monere nazywa się film02_repeat.jpg jeżeli tak nazwiecie swoją to pamiętajcie aby dodając ją do zasobów zaznaczyć opcje nadpisywania plików.

Wymienić zdjęcie nie jest trudno. Po pierwsze potrzebujemy adresu zdjęcia w zasobach. W moim przypadku jest on taki:
The Pie Hole - http://filmowy02szablonkatemac.blox.pl/resource/gastro02_repeat.jpg

Następnie odszukujemy miejsce w CSS gdzie opisane jest zdjęcie jako tło. Zazwyczaj, gdy zdjęcie jest pod tytułem będzie to selektor #BlogTytulBox. Tym razem nasze zdjęcie ma pojawić się na całym blogu, do tego nie tylko w części z notkami ale i w tej z tytułem. Dlatego właśnie tło jest umieszczone przy selektorze #BlogGlownyBox

#BlogGlownyBox {
WIDTH: 995px;
MARGIN: 0px auto;
background: url(/resource/film02_repeat.jpg) 180px top repeat-y;
position: relative;
}

Zastępujemy adres wywołania zdjęcia. Możemy podać cały począwszy od http albo w wersji skróconej podając tylko odwołanie do zasobów (resource) i nazwę pliku (wraz z rozszerzeniem).

W tym konkretnym szablonie ilustracje pojawiają się też koło komentarzy. Działając tak jak poprzednio zmieniamy i te grafiki.

  • Powinny być nieduże: 32x32px i dwie (może być ewentualnie jedna)
  • Dodajemy je do zasobów.
  • Kopiujemy adresy.
  • Wklejmy w odpowiednim miejscu w arkuszu stylów.

.Infopar {
background: url('/resource/01.jpg') left top no-repeat;
}
.Infoniepar {
background: url('/resource/02.jpg') left top no-repeat;
}

3. Kolory

Wybrałam takie zdjęcia, które będą się komponowały z aktualnymi kolorami szablonu. To było najprostsze rozwiązanie choć kolory nie są idealne. W przypadku szablonu kulinarnego przydałyby się nieco bardziej apetyczne. Proponuję skorzystać z różnego rodzaju generatorów po to aby uzyskać właściwy schemat kolorów. Pamiętajcie, że wybrany kolor użyty w tekście będzie wyglądał jaśniej a jako tło ciemniej.

W filmowym 02 użyłam dwóch odcieni niebieskiego: #5F98C6 (ciemniejszy jako link) i #ABC9E1 (jaśniejszy jako hover). Oraz czerwonego do wyróżnienia tytułów notek i ilustracji: #B52A23.

Do hurtowej wymiany numerów kolorów proponuję użyć funkcji znajdź i zastąp dostępnej chyba we wszystkich edytorach tekstu (Ctrl+F).

4. Czcionka

Tytuł serialu napisany jest w grafice czcionką szeryfową, szablon filmowy zaś wykorzystywał krój pozbawiony szeryfów. Postanowiłam to zmienić. Proponuję ponownie skorzystać z funkcji znajdź (Ctrl+F) ale tym razem zastępować już wygodniej nam będzie ręcznie. Automat wyszuka nam wszystkie miejsca gdzie wywoływane są nazwy fontów: szukamy FONT-FAMILY: i zamieniany odpowiednio nazwy. Ja wybrałam Georgię czyli wpisuję Georgia, serif;

I gotowe. Teraz wasza kolej.

kulinarny - Let's Make Pie
pobierz zip z pilkami i instrukcją»

UWAGA!!! Szablon pod adresem http://filmowy02szablonkatemac.blox.pl przeszedł diametralną zmianę. Ta notka dotyczy tylko przerabiania grafiki ale powiązana jest z następną, która umieszcza już ją we wspomnianym szablonie.


Gdzie pachną stokrotki (ang. Pushing Daisies)Jedne szablony łatwiej przerobić inne trudniej. Te które mają jakieś ramki graficzne, ozdobniki, różnobarwne tła itd. trudniej znoszą przeróbki. Nie mówię, że się nie da ale szukam tutaj najprostszych rozwiązań i dlatego na kulinarne proponuje przerabiać szablony w których zmiany łatwo przeprowadzić. Czasami jednak, mimo iż łatwo, bez programu do obróbki graficznej się nie obejdzie. W następnej natce opiszę szablon dla którego teraz przerobimy grafikę.

ramkiZakładam, że prowadzący blogi kulinarne mają własną bazę świetnych zdjęć. W przerabianym szablonie filmowym 02 można będzie wykorzystać kilka z nich. Przygotowałam szkielet dla czterech, które będą się powtarzać w pionie. W związku z tym, że nie dysponuję własnymi kulinarnymi zdjęciami postanowiłam pójść drogą połączenia tematów kulinarnego i filmowego i wykorzystałam zdjęcia z serialu Gdzie pachną stokrotki. Zrobiłam też plik png w którym zostawiłam wszystkie ustawienia dotyczące cienia czy ramek a zdjęcia usunęłam - to mój dzisiejszy szkielet. Można do niego wstawić własne zdjęcia korzystjąc z programu graficznego w którym można pracowac na warstwach -  w tym przypadku z całą pewnościa świetnie się sprawdzi gimp ale zapewne jest wiele równie dobrych jeśli nie lepszych programów.

Szybki kurs jak w Gimpie wstawić zdjęcia do ramki.

1. Otwieramy w programie nasz szkielet. Z przyborników z narzedziami niezbędny jest ten podstawowy, przydałby sie też ten z warstwami ale nie jest niezbędny i postataramy się dzisiaj poradzić sobie bez niego.

Otwieramy w programie nasze ramki przybornik z warstwami

2. Otwieramy w programie pierwsze zdjęcie. Kopiujemy je (Crtr+C albo Edycja -> skopiuj) i wklejamy do pliku z ramkami jako nową warstwę (Edycja -> Wklej jako -> Nowa warstwa).

Musimy przede wszystkim zmienić kolejność warstw. Jeżeli włączony jest przybornik z warstwami to tylko kursorem jak palcem przesuamy nową warstę niżej. Ale skoro mieliśmy sobie radzić bez przybornika z warstwami więc obniżamy warstę korzystając z menu Warstwa -> Stos -> Obniż warstwę.

Obniżamy warstwę

3. Teraz warstwa z ramkami jest na wierzchu ale uwaga w dalszym ciągu edytujemy warstwę ze zdjęciem. Moje zdjęcie jest zdecydowanie za duże i ma niewłaściwe proporcje. Zaczniemy od zmniejszenia go troszeczkę. Zdjęcie Charlotte "Chuck" Charles miało wymiary ok 600x800px. Jest za szerokie ale chcę też je nieco inaczej wykadrować tak więc zmniejszm je tylko troszeczkę (pamietaj o zachowaniu proporcji zdjęcia). Następnie korzystając z narzędzia przesunięcia (niebieska poczwórna strzałka) ustawiam sobie zdjęcie w ramce.

Zmniejszanie zdjęcia Presuń zdjęcie

W dalszym ciagu jest sporo za duże. Ale kadr który sobie wymyśliłam jest już w ramce więc nie bedziemy skalować a przycinać. Korzystając z narzędzia zaznaczania prostokatnego zaznaczam obszar zdjęcia a następnie wybieram Warstwa -> kadruj według zaznaczenia.

zdjęcie w całości jest za duże kadrowanie

W ten sam sposób dodajemy kolejne zdjęcia. Omijamy punkt pierwszy i drugi poniweaż teraz skopiowane zdjęcia wklejają się nam na naszym poprzednim zdjęciu a pod plikiem z ramkami.

Ned Charlotte Olive Snook

Jak wypełnimy wszystkie ramki i mamy gotowy plik. Pozostaje go tylko zapisać. Wybieramy Plik -> Zapisz jako... (Shift+Ctrl+S). Możemy zachować nazwę i rozszerzenie ale trzeba uważać  na wielkośc pliku - mi wyszedł zdecydowanie zbyt duży: prawie 400KB. Proponuje zapisać go jako jpg o sporej kompresji choć radziłabym ostrożnie bo gimp całkiem sporo zubaża kolory. Przy 85% otrzymuję jakieś 50-60KB.

Gotowe. Możemy zamknąć program i przejść do wprowadzania zmian w szablonie.

wtorek, 30 marca 2010

Nieoczekiwanie pojawiła się na blogu dłuższa przerwa. Spowodowana była ona wieloma powodami ale jeden z nich może być szczególnie interesujący dla was, zaglądających tu na mojego bloga, chcących pozmieniać sobie wygląd swojego szablonu. Ten powód to nowy, testowy kod bloksowych blogów. Rzecz na tyle wydała mi się ciekawa, że entuzjastycznie postanowiłam się z nią zapoznać. Nadal jest interesująco ale jestem już zdecydowanie mniej entuzjastyczna.

Kod bez tabel

Podstawową zaletą nowego kodu jest brak tabel. Dotychczas układ dwukolumnowy w szablonie utrzymywały tabele. W nowym szablonie układ zależy od kodu CSS, na podstawie jednego kodu html można stworzyć zarówno szablon z wąską szpaltą po lewej jak i po prawej. Bez arkusza stylów nowy szablon ma tylko jedną kolumnę.

Kod z listami

Spora część elementów w nowym szablonie uszeregowana jest dzięki znacznikom list. Wykorzystywane są dwa rodzaje list: wypunktowana i definicyjna. Sam pomysł spodobał mi się bardzo, szczególnie wykorzystanie list definicyjnych. Dużo mniej podoba mi się już liczba tych list, ich mega zagnieżdżenie w sobie w odniesieniu to głównej treści i znacznie skromniejsze wykorzystanie w przypadku treści pobocznych (wąskiej szpalty). Przykładowo link do kategorii umieszczony pod notką jest chyba jednym z najbardziej „zagnieżdżonych” elementów:

div div div div ul li dl dd ul li div dl dd ul li

(i znów wyjaśnienie: nie twierdze, że poprzednio było mniej elementów, choć przypuszczam, że nawet uwzględniając znaczniki tabel było trochę luźniej)

Choć użycie list nadaje całości pewną hierarchiczność: elementy są częścią jednych list, zawierają się w innych, są podzespołami pewnych całości. To jednak ta całość wychodzi mocno zagmatwana. Możliwe, że to tylko ja, laik w tym temacie, nie łapię istotności takich rozwiązań. Do tego klasy i identyfikatory przypisane są czasami do nieco innych elementów (w zasadzie znaczników bo zanim dojdziemy do elementu mamy po drodze kilka znaczników).

Nie mam zamiaru twierdzić, że rozwiązanie jest bez sensu bo to nieprawda. Ta mega hierarchiczność ma sens ale mam wrażenie, że tego wszystkiego jest trochę za dużo.

Znaczniki nagłówków

W dużo większym stopniu niż w przypadku starych szablonów wykorzystywane są znaczniki nagłówków. Jest ich sporo co samo w sobie nie jest ani wadą ani zaletą. Jak w większości wypadków chodzi o sposób wykorzystania a nie o liczbę. Wydaje mi się, że znaczniki nagłówków mogłyby być lepiej zastosowane, zresztą sami zobaczcie:

h1 – nazwa bloga

h2 – etykieta szerokiej szpalty czyli na stronie głównej słowo wpisy, po wybraniu konkretnej kategorii lub tagu nazwa tej kategorii czy tagu, na stronie z pojedynczym spisem słowo wpis; etykiety w wąskiej szpalcie czyli słowa: archiwum, kalendarz, wyszukiwarka, tagi, kategorie, autorzy, ostatnie notki, zakładki, kanał informacyjny

h3 – tytuły poszczególnych notek i etykiety folderów z zakładkami

h4 – etykiety szczegółów i opcji notek; etykieta trackback i komentarze na stronie z pojedynczą notką

h5 – etykieta autora komentarza

Sporo, prawda... Nie wiem czy to dobrze czy źle. Nigdy nie pisałam strony, nie interesowałam się tym jak powinien wyglądać poprawny kod, nie znam też wytycznych odnośnie zastosowania znaczników nagłówków. Jednym słowem nie mam pojęcia o czym tu piszę ale... Po części całość wydaje się być sensowna, poszczególne „h” przypisane są do grup etykiet o podobnym charakterze. To czego mi tu najbardziej brak to uwzględnienia różnicy pomiędzy ważnością wąskiej i szerokiej szpalty. Z powyższego wynika, że ważniejsza jest etykieta „kalendarz” niż tytuł notki. Nie wdaje się być to właściwe. Wolałabym aby różnica ważności pomiędzy wąską a szeroką szpaltą nie przejawiała się tylko w nazwaniu identyfikatora szerokiej szpalty „treść-główna” a wąskiej „treść-poboczna”.

Z rzeczy widocznych dla wszystkich od razu gołym okiem

  • zerknijcie na info pod notką, jest zdecydowanie dużo bardziej szczegółowe; każdy element dysponuje własną etykietą co mi nawet pasuje, zawsze wydawało mi się, że przy linku do kategorii powinna się pojawić etykieta „kategoria”; co do reszty nie mam zdania choć muszę przyznać, że info pod notką podzielone na dwie części: opcje i szczegóły jest teraz dość rozbudowane ale to kwestai estetyki czyli de facto tego co sobie z tym zrobisz w css;

  • to czego w infie nie widać a co jest to tytuły notek (nie widac bo jest ujęte w znaczniki elementów liniowych span a te zaś są ukryte przy wykorzystaniu właściwości css); w ogóle tytuły notek i blogu pojawiają się na blogu baaaaaardzo często; zgaduję, że ma to związek z wyszukiwarkami...

  • kolejność elementów w wąskiej szpalcie się zmieniła; wyszukiwarka wylądowała dużo wyżej, podobnie tagi, przeniesiono do wąskiej kategorie (nie dajcie się zmylić testowemu szablonowi niebieskiemu – kategorii wcale nie ma w szerokiej); te zmiany nawet mi się podobają... to co mnie czasami irytowało czyli archiwum jako pierwsze pozostało – chronologia dla mojego bloga ma totalnie drugorzędne znaczenie, wydaje mi się, że tak jest w przypadku wszystkich tematycznych blogów; archiwum owszem, musi istnieć ale żeby od razu na pierwszym miejscu stawiać chronologię... ważniejsza wydaje mi się tematyka czyli tagi lub kategorie; a jeżeli już chronologia ma mieć takie znaczenie to wolałabym aby lista miesięcy była zwinięta do niewielkiego paska lat

  • poza kategoriami przeniesiono tez do wąskiej RSS; dla mnie bomba ale przydałaby się możliwość udostępnienia w takim kontenerze nie tylko kanału RSS Wpisów

Na razie może wystarczy o nowym szablonie. To nie wszystkie moje spostrzeżenia ale na początek wystarczy. W zasadzie piszę ta notkę żeby odhaczyć temat na liście i przejść do dalszych notek. Poczekamy i zobaczymy co się z nowego kodu wykluje. Mam jeszcze sporo zaczętych szablonów robionych na starym kodzie i nie zamierzam tego zmieniać. Nie planuję też tłumaczyć starych szablonów pod nowy kod choć nie wykluczam wyjątków w postaci moich ulubionych szablonów czy też szablonów najbardziej popularnych.

Lista notek na najbliższy czas wygląd mniej więcej tak:

  • kolejny szablon zmieni się w kulinarny, może nawet dwa: jeden filmowy i jeden świąteczny
  • poprawki w szablonach kulinarnych, filmowych i rękodzielniczych
  • nowy szablon kulinarny
  • nowy, potrójny szablon rękodzielniczy (z ornamentami)

Mam jeszcze sporo szablonów, poprawek, wyjaśnień do napisania więc może poprzestanę na tych czterech grupach.

Seriale Brytyjskie

marsRazem z Patrykiem zmieniliśmy wygląd jego bloga dotyczącego, jak nazwa mówi: seriali brytyjskich i muszę się przyznać, że przy okazji się wciągnęłam. Oglądałam wcześniej brytyjskie produkcje ale przeważnie były to seriale kostiumowe (oczywiście podstawą jest rewelacyjna Duma i uprzedzenie; ostatnio podobało mi się bardzo Cranford więc też polecam). To w co się wciągnęłam to bardziej „współczesne” produkcje. Aktualnie uważam Life on Mars za jeden z najlepszych seriali jakie oglądałam, jest intensywny, zwarty, ma koniec i początek, świetnych bohaterów, klimat, interesującą muzykę. Moim zdaniem jest fantastyczny.

czwartek, 04 marca 2010

Na blogach prowadzonych w serwisie blox.pl szablonem jest tylko opis wyglądu strony czyli kaskadowy arkusz stylów (CSS). Nie należy mylić CSS z HTML czyli zawartością strony. CSS opisuje jak ma wyglądać HTML gdy przeglądarka wyświetli stronę w oknie. Kopiując szablon kopiujesz zewnętrzny arkusz stylów (CSS). Poprzez ten właśnie arkusz użytkownicy mogą dzielić się swoimi szablonami.

Samo skopiowanie szablonu jest bardzo proste i automatyczne. Drobne problemy mogą pojawić się w momencie gdy zechcemy coś pozmieniać na blogu zaraz po skopiowaniu szablonu. W dzisiejszej notce poza Ilustrowanym przewodnikiem po bloksie (wybieranie szablonu, kopiowanie szablonu) prezentującym dokładnie proces kopiowania szablonu znajdą się też informacje o możliwym skopiowaniu szablonu na inny serwis - jak najbardziej pozwalam ale wymaga to zawsze napisania nowego kodu więc nie bardzo polecam.

Wybierz szablon dla twojego bloga

Nie ma natomiast w tym wpisie informacji o błędach kopiowania i możliwościach ich uniknięcia. Jeżeli w poszukiwaniu pomocy w tej dziedzinie tu zajrzeliście to odsyłam do nowszych notek albo do strony skrótowo odpowiadającej na najczęściej zadawane pytania odnośnie kopiowania szablonu (znajdują się tam też linki do notek pełniej wyjaśniających wszelkie wątpliwości).

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