O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 22 lutego 2009

Rzadko robię szablony w których krojem do pisania notek jest czcionka szeryfowa. Z tego powodu m.in. postanowiłam wykorzystać całkiem dobry wzór jakim jest szablon Times New Roman i powielić go w kilku wersjach kolorystycznych. Już w pierwszej notce są dwa ale w gruncie rzeczy dość podobne do siebie: intensywne, kolorowe.


42 szablon granatowy
Szablon 42 Times, granatowo-beżowy,
na starym kodzie, dla blogów na blox.pl. -550px-



43 szablon granatowy
Szablon 43 Times, czarno-turkusowy,
na starym kodzie, dla blogów na blox.pl. -550px-



44 szablon granatowy
Szablon 44 Times, żółto-fioletowy,
na starym kodzie, dla blogów na blox.pl. -550px-



45 szablon granatowy
Szablon 45 Times, bordowo-beżowy,
na starym kodzie, dla blogów na blox.pl. -550px-



Szablony pasują do różnych tematów. W 2012 zmieniłam im nieco kod pozbywając się zbędnych grafik ale zachowując niemal identyczny wygląd. Jedyna zmiana to dodatkowe, nieco bardziej ozdobne tło dla wyszukiwarki.

sobota, 21 lutego 2009

Jest wiele rodzajów plików graficznych, niektóre cieszą się większą popularnością niż inne. O jednych można powiedzieć, że są lepszym rozwiązaniem od drugich ale najważniejsze jest chyba aby wybrać taki rodzaj który zagwarantuje nam maksymalny efekt przy minimalnych kosztach. W odniesieniu do plików graficznych efektem jest oczywiście jakość a kosztami rozmiar pliku. Dzisiaj postaram się nieco przybliżyć tematykę różnych rodzajów plików graficznych.

Rodzaje grafiki komputerowej

W najprostszym podziale moglibyśmy wymienić dwa rodzaje grafiki: grafikę rastrową i grafikę wektorową.

W grafice rastrowej obrazy tworzone są z położonych regularnie, obok siebie pikseli. Jest to rodzaj siatki odpowiednio pokolorowanych punktów. Takie grafiki nazywane są mapami bitowymi (lub bitmapami). Po powiększeniu takiej bitmapy widać punkty z których składa się obraz.

Do najpopularniejszych formatów grafiki rastrowej należą .GIF, .JPEG i .PNG

W grafice wektorowej obraz opisany jest za pomocą figur geometrycznych umiejscowionych w matematycznie zdefiniowanym układzie współrzędnych. W tym przypadku obraz jest zbiorem prostych, łuków, krzywych, okręgów, wielokątów itp. W przeciwieństwie do grafiki rastrowej grafika wektorowa jest skalowalna, oznacza to, że obrazy wektorowe można powiększać oraz zmieniać ich proporcje bez uszczerbku na jakości. Grafikę wektorową można bez większego problemu przekształcić w bitmapę podając jedynie docelową rozdzielczość obrazu rastrowego – w drugą stronę nie jest już tak prosto i rzadko kiedy uzyskuje się odpowiednie wyniki.

Wiele programów do tworzenia grafiki ma wewnętrzne formaty zapisu grafiki wektorowej przykładowo: .AI – Adobe Ilustrator, .CDR – Corel Corporation. Obecnie popularność zdobywa promowany przez W3C (jedną z największych organizacji zajmujących się standardami w Internecie) format SVG. Obsługiwany jest on w przeglądarkach: Amaya (której rozwój wspiera W3C), Mozilla Firefox (od wersji 1.5), Konqueror, Opera, (od wersji 8 beta 3). Aby używać SVG w innych przeglądarkach potrzebna jest odpowiednia wtyczka.

Orc - Raster vs Vector comparison, created by Nil Einne. Illustrates the difference between a vector image and a raster image.
Ilustracja będąca własnościa publiczną, umieszczona w repozytorium Wikimedia Commons

Dziś jednak zajmiemy się grafiką rastrową, która cieszy się dużo większą popularnością na stronach internetowych.

JPEG (ang. Joint Photographic Experts Group – Wspólna Grupa Ekspertów Fotografii)

Format JPEG (w zasadzie chodzi o format JFIF który stanowi rozszerzenie wobec standardu JPEG ale posługuje się rozszerzeniem jpeg i jpg więc często jest traktowany jako synonim) najlepiej sprawdza się w przypadku fotografii czy obrazów zawierających więcej niż 256 kolorów. Obrazy zapisywane z rozszerzeniem jpg są kompresowane co oznacza, że pewne informacje o obrazie ulegają stracie i ilustracja traci na jakości (często ta utrata szczegółów jest niezauważalna). Przy dużej kompresji obrazu wyraźnie widać efekt blokowy charakterystyczny dla tego typu kompresji.

Standard kompresji statycznych obrazów rastrowych, przeznaczony głównie do przetwarzania obrazów naturalnych, charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali.

JPEG - jakość maksymalna JPEG - jakość średnia JPEG – kompresja 100%
Ilustracja podstawowa wyraźne zakłócenia i przekłamania w kolorach Widoczne silne "pocięcie" obrazu na kwadraty
jakość maksymalna - przybliżenie 200% jakość średnia - przybliżenie 200% kompresja 100% - przybliżenie 200%

JPEG
jakość maksymalna
4 5024 bajtów (4,39KB)

JPEG
jakość średnia
1 2981 bajtów (1,26KB)

JPEG
kompresja 100%
442 bajtów

GIF (ang. Graphics Interchange Format)

Format pliku graficznego z kompresją bezstratną stworzony w 1987 r. Format GIF wyświetla maksymalnie 256 kolorów (czyli w przypadku zapisywania w tym formacie obrazów stworzonych przy użyciu większej ilości kolorów jak by nie było następuje strata – gif jest więc bezstratny tylko dla prostych obrazów). W plikach z rozszerzeniem .gif można umieszczać przezroczystość, nadają się też do drobnych animacji.

Najlepiej wykorzystywać je w przypadku obrazów o dużej płaszczyźnie tego samego koloru czy też posiadającego ostre krawędzie które powinny być zachowane.

gif przezroczyste tło
brak obsługi kanału alfa
ostre krawędzie
GIF
2 712 bajtów
(2,64KB)
gif - przybliżenie 200%

PNG (ang. Portable Network Graphics)

Rastrowy format plików graficznych oraz system bezstratnej kompresji danych graficznych. Format PNG jest podobny do formatu GIF pod tym względem, że akceptuje przezroczystość i najlepiej sprawdza się w przypadku obrazów o jednolitych kolorach. Przewagą PNG jest obsługiwanie stopniowanej przezroczystości (tzw. kanału alfa). Niestety starsze wersje Microsoft Internet Explorera (MSIE albo jeszcze krócej IE - starsze czyli te przed siódmą) nie obsługują przezroczystości alfa.

Format PNG zalecany jest przez konsorcjum W3C jako najlepszy format grafiki dla sieci WWW.

png stopniowa przezroczystość tła
PNG
6 344 bajtów
(6,19KB)
png - przybliżenie 200%

Wybierając rodzaj pliku graficznego pamiętaj aby tak określić jego parametry aby uzyskać najlepszy kompromis pomiędzy jakością obrazu a wielkością pliku.

 

Źródła i dodatkowe informacje:

  • Wikipedia: GIF, JPEG, PNG, SVG
  • pornel: PNG – Jak i dlaczego używać
  • hawro.wordpress.com: .png - w praktyce
  • Magazyny Internetowe: Formaty graficzne: PNG - nieużytek czy spełnienie marzeń webmasterów?
piątek, 13 lutego 2009

UWAGA: Szablony przeszły bardzo duże zmiany więc ta notka jest już nieaktualna i z czasem na jej miejscu pojawi się inna zaktualizowana treść.


W tym roku moje nastroje związane z porą roku są zupełnie inne niż zazwyczaj. Nie jestem typem którego dopada depresja jesienna, zazwyczaj nie mam nic przeciwko zimie to słońce mnie męczy a na wiosnę dopada mnie zniechęcenie. W tym roku jest odwrotnie, nie mogę się doczekać słońca i od samego początku mam dość zimy. Podobnie odwrotna jest moja reakcja na walentynki. Zupełnie mi nie przeszkadzają... jeżeli jest jakaś intensywna reklamowa otoczka wokół nich to ja jej nie odczuwam. Chyba właśnie dzięki temu, że nie ma wokół mnie tak dużo marketingowych serduszek sama miałam ochotę wykorzystać ten motyw. Tak więc z okazji zbliżających się walentynek inicjuję serię serdecznie. Zaplanowanych mam już dziewięć szablonów z tej serii i każdy z nich jest już zaczęty. Na chwilę obecną skończone są pierwsze dwa, oba nawiązują do stylu rękodzielniczego. Następne pojawią się dopiero po walentynkach dlatego że nie chcę aby były kojarzone tylko z nimi.

1. Serdeczny 01 - Czerwony handmade

szablon na bloga

2. Serdeczny 02 - Purpurowy z ramkami

szablon na bloga

  • nawiązanie do projektów z serii rękodzielniczej jest raczej słabe
  • szablon jest mono-kolorystyczny w tonacji purpurowej (lubię takie nazwy kolorów: purpurowy, wrzosowy, lawendowy; kolory nie mają jasnych definicji tak więc pozwalam je sobie nazywać tak jak mi się w danej chwili podoba)
  • w winiecie szablonu wykorzystałam grafiki umieszczone w serwisie flickr na licencji cc-by: autorem zdjęć jest bymanu: Heart no. 1, Heart no. 2
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, 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 identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie)
piątek, 06 lutego 2009

Lubię kalendarze na pulpit. Raczej trudno sensownie mi wyjaśnić dlaczego bo w gruncie rzeczy są bardzo mało użyteczne… ale są ładne więc nie będę wnikać w przyczyny mojej sympatii. Lutowe kalendarze obrodziły na Smashing Magazine w liczbie siedemdziesięciu. Spora ich część, jak można by się tego spodziewać, nawiązywała do najbardziej popularnego lutowego „święta” czyli walentynek. Ssceptyczna wobec ton różu i czerwoności w kształcie serduszek nie oparłam się jednak kilku sympatyczniejszym pomysłom. Dzisiaj więc w formie ciekawostki polecam dziewięć walentynkowych kalendarzy ze Smashing Magazine.

28 Days by K. RuttenMended heart by Aaron L. Valentine’s Day febrUary
by Jonathan Haggard
28days
Mended
febrUary
I Love You More than My Laptop by Ronald Bien PunlaMy Valentine by Eloise HaLove Knows No Boundaries by Vlad Gerasimov
Laptop
Valentine
Boundaries
The Heart Month
by Ana Fernandes
Love by Travis PersonRetro Wash by William Law
Month
Love
Retro

Dużo ciekawsze wydają sie jednak tapety bardziej uniwersalne, pasujące w zasadzie do dowolnego miesiąca.

Z odrobiną chińskiej kaligrafii, z ekologicznym przesłaniem, z designerskim humorem a la #wstydliwewyznania, dla miłośników kotów, minimalizmu czy starych fotografii - polecam.

Calligraphy by David SutoyoThe Trees by Kasra Safavinia
calligraphytrees
Comic Sans by Håvard BergersenCats by Jana Jelovac
comic_sanscats
Minimal Month by Tom JohnsonTormentas by Seth Nickeson
minimaltormentas
środa, 04 lutego 2009

Odkąd piszę na bloga na bloksie to marzą mi się tagi. Dla prywatnego bloga wystarczyłyby mi multikategorie ale biorąc pod uwagę, że dużo bardziej prawdopodobne są tagi w przypadku bloga szablonowego zawsze myślałam słowach-kluczach. Cierpliwość jest zdecydowanie moją mocną stroną a więc nie rezygnuję z czekania na tagi będące częścią bloksa niemniej jednak postanowiłam swoje szablony otagować. (No dobrze prawda jest taka, że w chwili obecnej mam inny pomysł na nawigację po blogowych wpisach więc na tagach mi specjalnie nie zależy. Cierpliwym powiem, że dwa lata temu mówiło się, że tagi będą póki co ich nie widać.)

Chmurka tagów szablonowych z delicious.comW skrajnej prawej szpalcie pojawiła chmurka tagów delicious i chciałabym wytłumaczyć na czym polega przydatność delicious dla szablonykatemac.blox.pl oraz jak szukający szablonu dla siebie mogliby z tej chmurki skorzystać.

Własne zakładki tworzę na delicious od 2007 roku i dość szybko pojawiła się myśl aby wzorem Eskey’a delicious wykorzystać też na potrzeby bloga. Niestety choć konto „szablonowe” założyłam już rok temu to jednak nie bardzo mogłam się zdecydować na to co i jak będę tagować. Tagowanie zarówno notek jak i szablonów było mało przejrzyste tak więc w chwili obecnej tagi dotyczą tylko szablonów a notki poczekają na bloksowy system tagów.

Korzystanie z zakładek delicious

Dzisiaj nie będę pisać o zakładaniu konta, tworzeniu własnych zakładek czy dodawaniu wklejki z tagami na bloga. Tymi tematami świetnie zajął się Eskey o czym pisałam już bardzo dawno temu. Tym razem skupię się tylko i wyłącznie na zakładkach szablonykatemac. Na początek najlepiej będzie podać odpowiedzi na kilka pytań.

Jakie linki dodaję do tagów szablonowych?

Przede wszystkim otagowane zostały wszystkie moje szablony. W miarę możliwości starać się będę nowe szablony opisywać tagami na bieżąco i aktualnie. Poza delicious każdy szablon też jest opisany na lnkologii dla bloga szablon_team.

Dodatkowo stworzyłam tag «cudze.polecam». Zebrane są w nim linki do wszystkich notek na blogu w których polecałam czyjeś szablony czy robiłam różnego rodzaju zestawienia. W zasadzie tag ten powinien pokrywać się z kategorią Szablony polecane.

Jakie słowa-klucze przypisuję szablonom?

Każdy szablon opisaną ma stronność (w rozumieniu umiejscowienie wąskiej szpalty) tak więc mamy szablony prawo- i lewostronne. Drugim zespołem podstawowych tagów jest kolor tła i tekstu: gdy notka pisana jest ciemną czcionką na jasnym tle to jest to wtedy szablon jasny, gdy jaśniejszy tekst umieszczony jest na ciemnym tle mamy wtedy szablon ciemny.

Ostatnią grupą tagów są słowa związane z kolorem i tematem szablonu. Każdy szablon staram się opisać dwoma kolorami nie każdy jednak ma temat tak więc prościej szukać szablonów po kolorach.

Jak wygodnie używać del.icio.us?

Zaletą szukania według słów kluczowych na delicious jest to, iż można je łączyć dzięki czemu kryterium szukania jest bardziej selektywne. Zamiast przeglądać wszystkie szablony prawostronne warto dodać dodatkowy tag który zawęzi obszar poszukiwań. Dodając słowo pomarańczowe otrzymuję 4 szablony zamiast początkowych 91. Dodawać słowa kluczowe można poprzez wybranie jednego z listy ReletedTags po lewej stronie albo poprzez wpisanie nazwy tagu na pasku obok już wybranych tagów (pasek u góry nad lista linków)

 

A teraz coś dla tych co potrzebują paluszkiem ;)

tagi related
Dodawanie kolejnych tagów poprzez wybór z listy Releted Tags.

tagi cancel
Rozszerzanie zakresu poprzez rezygnacje z jednego tagów

tagi typed
Dodawanie dodatkowego tagu poprzez wpisanie jego nazwy

niedziela, 01 lutego 2009

Szablon dla budowniczych to jedna z tych rzeczy którymi zajmowałam się ostatnio z doskoku. Z Anią umówiłyśmy się już dawno, że zrobię budowniczym nowy wygląd. Kiedy to było nie powiem bo aż wstyd się przyznać jak dawno. Wreszcie w trakcie świąt udało się zdobić ogólny zarys szablonu a ostatnio go skończyć tak więc od kilku dni u budowniczych można oglądać poza zdjęciami z budowy także nowy szablon.

Teren budowy, wsztęp wskazany

Kolorystyka bloga obraca się wokół dwóch barw: wyrazistej czerwieni i dość charakterystycznej szarości. Trudno powiedzieć jaka była ogólna koncepcja szablonu na początku gdyż całość bardzo rozciągnęła się w czasie i coś o czym mówiłyśmy na początku przez długi czas potem było nieaktualne by na koniec powrócić. W każdym bądź razie takie odnoszę wrażenie.

#332211 #444444 #61564D #6B5F56 #994433 #D20000 #ffffff

Ania początkowo prosiła o szablon pasujący do stylu z plakatów budowniczych petrelu. Raczej tego celu nie osiągnęłam z wielu różnych przyczyn na omawianie których szkoda tracić czas. Szablon oparłam na projekcie top 07 - New Tech Earth stąd też i ten bardzo wyrazisty czerwony. Dlaczego akurat na tym? Przede wszystkim dlatego, że to był szablon z którego budowniczowie korzystali gdy Ania do mnie napisała. Mimo iż szablon różni się od New Tech Earth to mimo wszystko zachował w sobie sporo klimatu pierwowzoru.

Drugim elementem „klimatotórczym” tył tytuł bloga który postanowiłam potraktować dosłownie stąd też  na blogu trzeba uważać by nie potknąć się o deski czy ubrudzić farbą.

Na blogu jest kilka dodatków o które prosili budowniczowie lub które poleciłam jako w miarę proste rozwiązanie. Przede wszystkim stworzyłam miejsce z linkami dla chętnych do zapisania się na subskrypcję. Przydałoby się na bloksowych blogach jedno miejsce gdzie można by znaleźć informacje o blogu czy jego autorze. Drugą rzeczą było zwinięcie archiwum. Nie było to konieczne gdyż budowniczowie piszą zaledwie cztery miesiące niemniej jednak przyzwyczaiłam się do takiego właśnie wyglądu archiwum. Dalej poszły dwa specyficzne dodatki, po pierwsze agregator newsów ze stron o tematyce budowlano-wnętrzarskiej, po drugie wklejka z fotoforum.

Agregator dodawałam już wcześniej – to jest ten sam skrypt co u Maćka Kuźmicza na blogu. Z fotoforum miałam styczność po raz pierwszy i choć generalnie wklejce zarzucić nic nie mogę (nie znam się) to jednak przeszkadzało mi oczywiście, że wygląd ma już zdefiniowany tak więc kilka klików w klawiaturę zmieniło nieco tytuł wklejki (przy okazji wydaje mi się, że od linku do strony głównej FotoForum ważniejszy powinien być link do albumu budowniczych ale nie w postaci +więcej).

No i to by było na tyle jeśli chodzi o budowniczych. Nie pozostaje mi nic innego jak zachęcić was do śledzenia poczynań Ani i Wojtka.

1 2 3 6
5 4 7 8
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...