O szablonach, ich projektowaniu i moich z tym zmaganiach...
wtorek, 29 listopada 2011

W moich szablonach często opisuję dodatkowe rzeczy. Są to nie tylko oryginalne wklejki ale także własne fragmenty kodu, które mają ułatwiać dodawanie różnych rzeczy i funkcjonalności do bloga.

kod divu o klasie boks

Kody można wklejać bez żadnych specjalnych starań ale przy minimalnej zmianie można sprawić, że wklejki będą wyglądały dokładnie tak jak trzeba czyli tak jak ty tego chcesz. Wystarczy taki dodawany kod ubrać w klasę, np tak:

<div class="boks">
Zawartość pojedynczego boksu. Może być dowolna, mogą to być przeróżne wklejki, pojedyncze paragrafy, listy etc.
</div>

A następnie w arkuszu stylów opisać wygląd tak jak się chce, np tak:

.boks {
margin:10px 0 20px 0; /* odstęp od otaczających elementów */
border-bottom:1px solid silver; /* ramka pod elementem */
background:white; /* kolor tła */
font-size:14px; /* rozmiar czcionki */
text-align:center; /* wycentrowanie zawartości */
}

W rozwinięciu dzisiejszej notki zajmę się HTMLową stroną kodu dodatków, wszystkim co wpiszesz w dodatkowe boksy. Opiszę jakie znaczniki preferuję, jak je dodaję i jakie cechy przypisuje im przeglądarka: div, span, p, h3. Taki mały przewodnik po HTML przydatny dla użytkowników blox.pl uwzględniający dziś głównie pojemniki na treść.

niedziela, 27 listopada 2011

Sezon świąteczno-urodzinowy rozpoczęty. Będzie teraz mniej czasu ale na szczęście przygotowałam kilka notek na zapas. Następna jeszcze przed środą. Dlaczego sezon świąteczno-urodzinowy? Moja siostra zawsze mówi, że dla niej sezon świąteczny rozpoczyna się dopiero po 23 listopada (moje urodziny, które obchodzę zawsze), dopiero wtedy jest w stanie zacząć myśleć o świętach. Ja tak nie mam bo jej urodziny są w połowie grudnia, podobnie jak mojej mamy, babci, ulubionej ciotki, siostrzeńca itd. Tuż przed świętami urodzinowe życzenia składam komuś co drugi dzień.


Kontynuując temat ilustrowanego przewodnika po bloksie, zainspirowanego dawnym wpisem DeBergeraca z animowanymi samouczkami dla początkujących dzisiaj przyszła pora na mapę prowadzącą do edycji CSS. W większości gdy piszę o jakiejś zmianie któryś raz z kolei, zapominam, że ktoś może czytać ten właśnie wpis na blogu jako pierwszy, że nie wie zupełnie co mam na myśli pisząc przejdź do arkusza stylów, albo wklej kod w polu na kod HTML.

Edytor CSS

Najdokładniej jak potrafię przedstawiam najbardziej oczywiste posunięcia. Mój blog jest o szablonach i ich robieniu. i najwyższa pora aby przedstawić krok zero czyli instrukcję jak trafić do tego arkusza stylów.

W skrócie to oczywiście:

Edycja bloga -> WYGLĄD -> EDYCJA CSS -> Edytor CSS

zapraszam jednak do rozwinięcia.

niedziela, 20 listopada 2011

Dzisiaj druga część wyjaśnień związanych z modułem specyfikacji CSS dotyczących tła i ramek. Kiedyś pisałam o tle (Określamy tło, część 1), bardzo pobieżnie co prawda ale ostatnio znacznie rozszerzyłam informacje w tamtej notce więc polecam zacząć od niej. Opisane są tam podstawowe cechy związane z tłem czyli kolor i obraz. Dzisiaj zaś zajmiemy się obramowaniem.

border

W rozwinięciu dokładniejsze wyjaśnienia każdej z cech. Skrótowo 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 co zrobić np aby ilustracja był obramowania fioletową przerywana linią).

poniedziałek, 14 listopada 2011

Style kate mac rozwijają się całkiem sprawnie. Nie spieszę się tam i staram się wszystko robić dokładnie. Patrząc na dotychczasowe tempo nie ma co liczyć na więcej niż jeden szablon w miesiącu w trzech odmianach. Mogą być dodatkowe ale raczej do samodzielnego złożenia.

Skończyłam z subtelnymi projektami, w każdym bądź razie w ich podstawowej formie. Myślę natomiast o dodaniu im kilku tematów, już nawet do jednego wybrałam odpowiednią ilustrację: nożyczki. Wyjdzie z tego szablonik rękodzielniczo-scrapowo-krawiecki. Po subtelnych natomiast następują klasyczne. Już skończone i teraz tylko sprawdzam je i poprawiam niuanse. Następne po klasycznych też już są wymyślone i w części zrobione, będą bardzo szerokie, dla zdjęć w notkach i jeden z nich będzie miał wzorek jak z amerykańskich kopert, jeden będzie w mojej brązowo-magentowej kolorystyce ale dalej nie wiem jak je skończyć...


Ostatnia stylowa notka była bardzo rozbudowana ale mam nadzieję, że to nie zniechęci do wykorzystania informacji w niej zawartych. Wcześniej było o zmianie stronności co w nowym kodzie jest zatrważająco proste i o zmianie na jednokolumnowy co mi się całkiem podoba i zapewnia baaardzo dużo miejsca na ilustracje w notkach.

przeniesiony bezwzględnie szukaczOstatnia notka o subtelnym była jednak o różnych drobnych szczegółach: takich jak ukrycie archiwum czy przeniesienie szukacza nad notki. Takie instrukcje wielkości dwóch akapitów (trzech z kodem) łatwo zastosować i przydadzą się w przypadku każdego szablonu.

O ukrywaniu archiwum pisałam też w przypadku starego kodu. Kiedyś, już całkiem dawno temu.


Kończy się ta jasna, słoneczna jesień i zaczyna okres przed zimowy. Wyciągam wtedy ciepłe kapcie i każdego popołudnia palę świeczki. Za niedługo będzie można się rozejrzeć za świątecznym szablonem. Ja w tym roku nic nowego nie przygotuję. Myślałam aby w stylu szablonu 61 fall jesiennego zorbić taki sam śnieżynkowy. Może w przyszłym... W następnych aktualnościach przypomnę wpisy o szablonach zimowych i świątecznych a póki co może by tak coś poczytać przy szklance gorącej herbaty?

muzyczny 06 - zdjęcia deco szablon koci 05 - brązowy kulinarny 04 - czekoladowy handmade

kubrick 07 kolisty Trebuchet MS szablon ręczny 02 - łososiowy szablon ręczny 10 - Trick-or-treating

61 szablon fall jesienny kulinarny 03 - retro Vanilla Cake szablon ręczny 09 - zielonkawy


malinowe gaciePoczytać można też ciekawe blogi. Jeden z nich całkiem nowy choć zaskakująco wiekowy to malinowe gacie Łukasza. Ten szablon powstał daaawno temu. Jeżeli z Marcinem pracowaliśmy nad Karaibami pół roku to szablon Łukasza kończyłam mniej więcej wtedy gdy karaibski zaczynałam, a kiedy zaczęłam te gacie to nawet nie pamiętam.

Z blogiem Łukasza to był taki problem, że jeszcze w tedy nie istniał. Nie lubię robić szablonów dla blogów bez treści. Już nawet nie chodzi o to, że nie wiem o czym on będzie. Chodzi o to, że nie wiem jak on będzie wyglądał. Każdy ma inny sposób pisania notek. Tutaj dodaje entera, zdjęcia ustawia tak a nie inaczej, nie używa wcale linków, lubi dodawać wstęp wprowadzający w treść notki itd. Takie rzeczy trudno przewidzieć wcześniej więc pod tym względem taki dedykowany szablon ba pusty blog jest bardziej podobny do tych gotowych.

Jeżeli chodzi o treść to autor zawsze może mi opowiedzieć o czym blog będzie. I zapewniam was, że Łukasz opowiada wspaniale. Piłką nożną się raczej nie interesuję ale jego entuzjazm, szczere podejście, otwartość, romantyczne spojrzenie na piłkę to wszystko mnie zachwyca. Ten szablon zrobiony jest właśnie z tego zachwytu. Łukasz miał bardzo konkretną wizję tego co chce otrzymać, malinowy jest tego fundamentem, ale pozwolił mi wtrącić moje trzy grosze i jeżeli coś mu odradzałam to brał pod uwagę moją opinię. Współpraca była bardzo przyjemna i mam nadzieję, że niedługo będę mogła zaprezentować wam jej drugie dziecko. Na razie zapraszam na MALINOWE GACIE i wraz z wami czekam na następne wpisy.


Pora na podsumowanie fejsbuklakowej ankiety. Zamykam ją (w środę wieczorem) bo pytania które tam zadałam nie całkiem były trafne. Jasne, ciekawi mnie jak używacie facebooka i czy używacie go w ogóle (bo jest czas kiedy modne jest zakładanie konta i jest czas kiedy modne jest kontestowanie serwisu, mam wrażenie, że od dłuższego czasu jesteśmy już w tej drugiej fazie). W ankiecie wzięło udział ponad 20 osób z czego połowa nie wchodzi w interakcje z fejsbookiem, albo nie ma tam w ogóle konta albo nie klika żadnych lajków. Druga połowa klika lajki ale w większości dotyczące tylko konkretnych rzeczy. Coś jak przyklejenie naklejki "to jest całkiem niezłe", uproszczony rodzaj komunikacji ale mówiąc szczerze całkiem niezły. Jest też kilka osób, które używają facebooka trochę tak jak ja netvibesa, jako złożonej przez siebie gazety gdzie pojawiają się treści (a w zasadzie linki do treści), które sami wybrali.

Takie są moje wnioski czy rzeczywiście trafne to już inna sprawa.

facebookI tak naprawdę to właśnie o tą ostatnią odpowiedz mi chodziło. Ciekawiło mnie czy subskrybujecie treść via strony facebookowe więc mogłam tak zadać pytanie albo je rozszerzyć i zapytać się jak lubicie być informowani nowych treściach na blogu (ja preferuję rss a w drugiej kolejności chyba bloksowe boczne rameczki z linkami). Może jeszcze kiedyś je zadam więc bójcie się moi mili, czas ankiet jeszcze się nie skończył.

Istotna dla mnie ankieta o krojach będzie przez cały czas otwarta. Ankieta o treści mojego bloga, które kategorie preferujecie jest motywująca więc jak ktoś ma ochotę ponownie udzielić odpowiedzi to nie mam nic przeciwko. Sama ostatnio zaznaczyłam kategorie do których najbardziej lubię tworzyć treść. Jak ktoś ma ochotę na nową ankietę to mam mały problem z jednym szablonem, nie mogę zdecydować się na ornamenty do niego. Ta ankieta pewnie się tu pojawi i poproszę was o radę ale na razie mam ciekawsze rzeczy do opisywania w notkach więc ankieta wisi sobie nieporuszona w serwisie polldaddy.


I na koniec czy zauważyliście zmianę na bloksie? Nie wiem czy jest ich więcej ale dwie rzuciły mi się w oczy.

Po pierwsze blox występuje w wersji mobilnej. A w zasadzie bloksy występują w wersji mobilnej co jest rewelacyjnym rozwiązaniem bo chyba już od roku zastanawiam się nad mediami (@media w znaczeniu arkuszami stylów dla różnych nośników: ekranu, drukarki, smartfona). Chciałabym tylko aby istniała możliwość wybrania dwóch rzeczy: jasności i koloru wyróżnienia. To pierwsze to tylko luźna sugestia bo i tak wybrałabym ciemny tekst na jasnym tle ale zakładam, że np dla czytelników wo ciemne tło jest wręcz rodzajem tradycji. Kolor wyróżnienia natomiast byłby prostym lecz rewelacyjnym sposobem indywidualizacji nawet gdyby lista kolorów była ograniczona (np. tak jak podstawowe kolory w edytorze notek, jest ich tam ze 30-40). Takim kolorem wyświetlałyby się linki i może tło nagłówka czyli to co jest teraz niebieskie (dobrze, że chociaż niebieski jest całkiem atrakcyjny).

Druga zmiana dotyczy już tylko szukacza. Dotychczas wyświetlał się tylko na stronie głównej bloga teraz podobnie jak lista ostatnich notek pojawia się także na stronie z pojedynczym wpisem i komentarzami do niego ale już nie na stronie statycznej. Więc wszędzie tam gdzie szukacz był przenoszony na górę wąskiej szpalty może wystąpić problem z nachodzeniem na siebie elementów. Tak jak jest to teraz u mnie ale mówiąc szczerze to chyba niewielka cena za szukacza. Ta zmiana mi się podoba, więc +10 dla bloksa za nią.

poniedziałek, 07 listopada 2011

Tematem dzisiejszej notki są rodzaje krojów (dla purystów: nie rodzaje czcionek czy fontów bo to bardziej techniczne zagadnienie). Zacznijmy od cytatu z wikipedii:

Krój pisma to charakterystyczny obraz kompletu znaków pisma o jednolitych podstawowych cechach graficznych: stylu, rytmie, proporcji, dukcie, układzie lub kształcie szeryfów, właściwościach optycznych (czytelności) itp. Może mieć wiele odmian, nawet znacznie różniących się od kroju podstawowego, lecz nadal zachowujących w sposób konsekwentny podstawowe założenia graficzne danej rodziny krojów.

Czyli krój to inaczej wygląd liter, coś co większość nazwałaby zapewne po prostu czcionką nie wnikając w purystyczne rozróżnienia. Kroje można podzielić na klika grup, może być też kilka różnych rodzajów podziału.

szablony różnymi komercyjnymi fontami

W rozwinięciu wpisu antykwy podzielone wg wyglądu: jedno/dwuelementywe, szeryfowe/bezszeryfowe, proporcjonalne/nieproporcjonalne. Pisanki, pismo gotyckie, ksenotypy. Opis wyglądu, cechy charakterystyczne i najważniejsze przykłady (Times, Bodoni, Courier, Arial, Rockwell).

W drugiej części dokładniejszy opis poszczególnych grup wydzielonych na podstawie wyglądu i pochodzenia: antykwa renesansowa, antykwa barokowa, antykwa klasycystyczna, egipcjanka, grotesk. Wszystkie z dokładnymi ilustracjami i przykładami.

środa, 02 listopada 2011

Chyba wreszcie skończyłam z subtelnymi szablonami. Zrobiłam trzy bardzo ładne gotowe projekty, każdy w nieco innym stylu i kolorze a mimo to niemal identyczne. Do każdego z trzech dodałam alternatywne ilustracje tytułowe tak, że jeżeli komuś przeszkadzają niebieskie piksele czy różowe kwiaty może sobie swobodnie wymienić top na bardziej jednolity czy uniwersalny. Napisałam tez notki, które opisują bardzo łatwe zmiany w szablonie: zmianę stronności czy zmianę na szablon jednokolumnowy. W niektórych proponowanych przeze mnie zmianach wystarczy słowo left zamienić na right czy dopisać jedną cechę więcej aby dokonać całkiem istotnej zmiany.


01 szablon subtelny, różowo-oliwkowy

Szablon subtelny 01 - różowo-oliwkowy,
na nowym kodzie, dla blogów na blox.pl. -590px- 


02 szablon subtelny, niebieski

Szablon subtelny 02 - niebieski,
na nowym kodzie, dla blogów na blox.pl. -590px- 


03 szablon subtelny, zgaszony pistacjowy

Szablon subtelny 03 - zgaszony pistacjowy,
na nowym kodzie, dla blogów na blox.pl. -590px- 


Wszystkie one są na nowym kodzie, mają wszystkie elementy wąskiej szpalty zarówno na stronie głównej jak i stronach z pojedynczymi wpisami. Kod do górnego menu mają opisany ale w nowych szablonach dodaję mu nieco inny identyfikator. Dodatkowe elementy w wąskiej szpalcie nie są jak w starych szablonach dodawane ni z gruszki ni z pietruszki ale mają własny kontener i klasę. Jeżeli sam szablon to za mało to przydadzą się jeszcze te wpisy:

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