wtorek, 21 sierpnia 2012
Strona internetowa Klubu Malucha Bajeczna Akademia
Chcę się pochwalić miłym dla oka projektem strony internetowej przedszkola Bajeczna Akademia. Oprawę przygotowałam przy użyciu bardzo fajnego GPLowego narzędzia MyPaint które świetnie sprawdza się przy pracy z tabletem graficznym.
Matematyka i Web Design: Złoty Podział
Boska proporcja (łac. divina proportio) zwana również złotym podziałem (łac. sectio aurea) jest znaną już w starożytności koncepcją matematyczną która zyskała wyjątkową popularność w czasach renesansu. Uczeniu i artyści owych czasów uważali, iż złoty podział niesie ze sobą aspekty magiczne wyzwalając zgoła boskie moce. Stąd setki
lat temu modnym a nawet koniecznym było stosowane boskiej proporcji w architekturze, rzeźbie
i malarstwie. Abstrahując od zjawisk nadprzyrodzonych należy jednak zgodzić się z faktem, iż dzieła projektowane w zgodzie ze złotym podziałem są przyjemne w odbiorze i zawierają pewną nieuchwytną aurę, która każe nam widzieć je jako klasyczne. Mówi się, że proporcja ta cieszy oko, a umysł przyjmuje ją jako coś
naturalnego i harmonijnego. Nie od parady już w starożytności boskiej proporcji przypisywano wyjątkowe walory estetyczne.
Jako stała wyrażająca matematyczną zasadę jedności i harmonii złoty podział definiowany jest jako podział odcinka na dwie części tak, by stosunek długości dłuższej z nich do krótszej był taki sam, jak całego odcinka do części dłuższej. Innymi słowy: długość dłuższej części ma być średnią geometryczną długości krótszej części i całego odcinka:
Nim zasada złotego podziału została przeniesiona do sztuki jako podstawą piękna i harmonii, pierwotnie była zauważona w przyrodzie ( m.in. muszla ślimaka czy główka słonecznika ).
Jak wspomnieliśmy, złoty podział ma za zadanie wprowadzić harmonijne proporcje, które z kolei pozwalają na uzyskanie przejrzystości i swego rodzaju klasycznego piękna. Każdy z nas dąży podświadomie do doskonałości i równowagi, a złoty podział pomaga je uzyskać. Stąd też wydaje się naturalnym zastosowanie zasad boskiej proporcji przy projektowaniu stron internetowych. W efekcie powinniśmy otrzymać komfortowe w odbiorze strony www. Trzeba pamiętać przy projektowaniu że złoty podział dotyczyć powinien nie tylko układu całej witryny, ale tez poszczególnych jej elementów, jak kolumny tekstu, grafiki czy zdjęcia.
Tak w projektowaniu stron www jak wcześniej w sztuce i architekturze stosować będziemy szczególną formę złotego podziału zwaną zasadą złotego prostokąta. W złotym prostokącie stosunek dłuższego boku do krótszego jest równy złotej proporcji, zaś sam prostokąt prostokąt może być rozcięty na kwadrat i mniejszy prostokąt o tych samych proporcjach co rozcinany.
Przeprowadźmy teraz proste ćwiczenie. Załóżmy że efektywny rozmiar naszej nowo projektowanej strony www wynosi 960px. Jeśli zechcemy podzielić stronę na kolumny oparte na zasadach boskiej proporcji, to ich rozmiar wyliczymy bardzo prosto z proporcji. Podzielimy 960 na 1.618, aby uzyskać wartość szerokości naszej szerszej kolumny reprezentowanej przez zmienną a. W naszym przypadku 960 / 1.618 da nam 593px. Korzystanie z uzyskanego wyniku obliczymy szerokość mniejszej kolumny odejmując 593 od 960 (960 - 593 = 367). Jeśli chcemy sprawdzić nasze obliczenia możemy sumę 593 +367 (960) podzielić przez wyliczoną szerokość większej kolumny to jest 593, co da nam około 1.618.
Idąc dalej drogą złotego podziału, możemy wyobrazić sobie kolejne kroki w których każdy z sektorów strony kolejno dzielimy na mniejsze elementy tak, aby nadal zachować boską proporcję. Trzeba koniecznie zauważyć, iż w ten sposób uzyskamy długości krawędzi poszczególnych elementów których relacja jest podobna do relacji elementów ciągu Fibonacciego (w ciągu Fibonacciego każda liczba ciągu Fibonacciego pomnożona przez liczbę Fi= 1,6180339887 daje nam kolejną liczbę tego ciągu). Koncepcję designu stron www w oparciu o liczby z ciągu Fibonacciego postaram się opisać w którymś z przyszłych postów.
Rys. złoty podział odcinka (źródło: wikipedia.org)
Jako stała wyrażająca matematyczną zasadę jedności i harmonii złoty podział definiowany jest jako podział odcinka na dwie części tak, by stosunek długości dłuższej z nich do krótszej był taki sam, jak całego odcinka do części dłuższej. Innymi słowy: długość dłuższej części ma być średnią geometryczną długości krótszej części i całego odcinka:
Rys. proporcja elementów odcinka (źródło: wikipedia.org)
Rys. złota liczba (źródło: wikipedia.org)
Nim zasada złotego podziału została przeniesiona do sztuki jako podstawą piękna i harmonii, pierwotnie była zauważona w przyrodzie ( m.in. muszla ślimaka czy główka słonecznika ).
Jak wspomnieliśmy, złoty podział ma za zadanie wprowadzić harmonijne proporcje, które z kolei pozwalają na uzyskanie przejrzystości i swego rodzaju klasycznego piękna. Każdy z nas dąży podświadomie do doskonałości i równowagi, a złoty podział pomaga je uzyskać. Stąd też wydaje się naturalnym zastosowanie zasad boskiej proporcji przy projektowaniu stron internetowych. W efekcie powinniśmy otrzymać komfortowe w odbiorze strony www. Trzeba pamiętać przy projektowaniu że złoty podział dotyczyć powinien nie tylko układu całej witryny, ale tez poszczególnych jej elementów, jak kolumny tekstu, grafiki czy zdjęcia.
Rys. złoty prostokat (źródło: wikipedia.org)
Tak w projektowaniu stron www jak wcześniej w sztuce i architekturze stosować będziemy szczególną formę złotego podziału zwaną zasadą złotego prostokąta. W złotym prostokącie stosunek dłuższego boku do krótszego jest równy złotej proporcji, zaś sam prostokąt prostokąt może być rozcięty na kwadrat i mniejszy prostokąt o tych samych proporcjach co rozcinany.
Przeprowadźmy teraz proste ćwiczenie. Załóżmy że efektywny rozmiar naszej nowo projektowanej strony www wynosi 960px. Jeśli zechcemy podzielić stronę na kolumny oparte na zasadach boskiej proporcji, to ich rozmiar wyliczymy bardzo prosto z proporcji. Podzielimy 960 na 1.618, aby uzyskać wartość szerokości naszej szerszej kolumny reprezentowanej przez zmienną a. W naszym przypadku 960 / 1.618 da nam 593px. Korzystanie z uzyskanego wyniku obliczymy szerokość mniejszej kolumny odejmując 593 od 960 (960 - 593 = 367). Jeśli chcemy sprawdzić nasze obliczenia możemy sumę 593 +367 (960) podzielić przez wyliczoną szerokość większej kolumny to jest 593, co da nam około 1.618.
Idąc dalej drogą złotego podziału, możemy wyobrazić sobie kolejne kroki w których każdy z sektorów strony kolejno dzielimy na mniejsze elementy tak, aby nadal zachować boską proporcję. Trzeba koniecznie zauważyć, iż w ten sposób uzyskamy długości krawędzi poszczególnych elementów których relacja jest podobna do relacji elementów ciągu Fibonacciego (w ciągu Fibonacciego każda liczba ciągu Fibonacciego pomnożona przez liczbę Fi= 1,6180339887 daje nam kolejną liczbę tego ciągu). Koncepcję designu stron www w oparciu o liczby z ciągu Fibonacciego postaram się opisać w którymś z przyszłych postów.
Rys. spirala fibonacci'ego (źródło: wikipedia.org)
Wracając do zaego podziałsady złotego podziału chcę przy okazji zaprezentować kalkulator złotego podziału który pomoże wam szybko i sprawnie wyliczyć wymiary sekcji strony www na podstawie jej wyjściowego rozmiaru przy jednoczesnym zachowaniu "boskich proporcji".
Kalkulator znajdziecie na stronie http://www.windroos.pl/strony/kalkulator-zlotego-podzialu.php
niedziela, 19 sierpnia 2012
Przeliczanie jednostek CSS 3.0 - funkcja calc()
W uzupełnieniu do artykułu "px – em – % – pt - in -mm - cm - czyli jak określać rozmiar w CSS" w którym pisałam na temat jednostek jakimi określamy rozmiary w CSS chcę chcę napisać kilka dodatkowych słów na temat, który jest jak najbardziej powiązany, a mało spopularyzowany.
Przy okazji, zanim jednak przejdziemy dalej, przypominam adres kalkulatora jednostek CSS który można znaleźć tutaj.
Temat który zamierzam poruszyć dotyczy dotyczy możliwości przeliczania wartości liczbowych, w tym właśnie jednostek CSS, wewnątrz arkusza stylów.
Aktualna specyfikacja CSS definiuje wyrażenie funkcyjne calc() które może być niedocenionym narzędziem w pracy każdego web developera, pozwala bowiem wykonywać obliczenia bezpośrednio w CSS bez konieczności korzystania ze skryptów javascript. Przytoczmy tutaj oryginalny opis zaczerpnięty ze specyfikacji:
The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time> or <number> values are allowed.
Jak widać funkcja calc() pozwoli nam wykonywać proste obliczenia arytmetyczne: dodawanie, odejmowanie, mnożenie i dzielenie, co więcej zaś potrafi obsługiwać różnego typu wartości, a więc interpretować jednostki i co za tym idzie dokonywać ich konwersji. Do dyspozycji mamy w naszych wyrażeniach jednostki takie jak: piksele, procenty, em, rem i inne. Stąd dopuszczalne jest np. wyrażenie:
Zgodność z przeglądarkami
Pewnie będziecie zaskoczenie, ale funkcję calc() obsługują już praktycznie wszystkie wiodące przeglądarki. Obsługuje ją InternetExplorer w wersji 9, Firefox od wersji 4 udostępniał własną implementację calc() pod postacią -moz-calc(). Chrome także posiada własną wersję o nazwie -webkit-calc().
Przy okazji, zanim jednak przejdziemy dalej, przypominam adres kalkulatora jednostek CSS który można znaleźć tutaj.
Temat który zamierzam poruszyć dotyczy dotyczy możliwości przeliczania wartości liczbowych, w tym właśnie jednostek CSS, wewnątrz arkusza stylów.
Aktualna specyfikacja CSS definiuje wyrażenie funkcyjne calc() które może być niedocenionym narzędziem w pracy każdego web developera, pozwala bowiem wykonywać obliczenia bezpośrednio w CSS bez konieczności korzystania ze skryptów javascript. Przytoczmy tutaj oryginalny opis zaczerpnięty ze specyfikacji:
The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time> or <number> values are allowed.
Jak widać funkcja calc() pozwoli nam wykonywać proste obliczenia arytmetyczne: dodawanie, odejmowanie, mnożenie i dzielenie, co więcej zaś potrafi obsługiwać różnego typu wartości, a więc interpretować jednostki i co za tym idzie dokonywać ich konwersji. Do dyspozycji mamy w naszych wyrażeniach jednostki takie jak: piksele, procenty, em, rem i inne. Stąd dopuszczalne jest np. wyrażenie:
div {
width: calc(100% - 20px);
}
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
}
div.myclass{
width: calc(100% - 20px*2 - 8px*2);
}
Zgodność z przeglądarkami
Pewnie będziecie zaskoczenie, ale funkcję calc() obsługują już praktycznie wszystkie wiodące przeglądarki. Obsługuje ją InternetExplorer w wersji 9, Firefox od wersji 4 udostępniał własną implementację calc() pod postacią -moz-calc(). Chrome także posiada własną wersję o nazwie -webkit-calc().
czwartek, 16 sierpnia 2012
WordPress: Projektowanie własnego tematu WordPress, część 2
The Loop
Pętla jest najciekawszym elementem konstrukcyjnym WordPress. Wszystko zaczyna się w niej od zapytania (które określa, które wiadomości lub strony należy pobrać), a kończy się instrukcją PHP "endwhile". To co pomiędzy nimi zależy od Ciebie. Samodzielnie możesz określić sposób i zakres wyświetlanych informacji, metadanych, pól niestandardowych itp. Można ustawić wiele pętli i zapytań na jednej stronie, na przykład w single.php można mieć jedną pętlę generującą całą zawartość jednego postu a w kolejnej pętli wyszukiwać i wpisywać tytuły i miniatury pokrewnych postów.
Zgodnie z dokumentacją Pętla musi być umieszczona w index.php i każdym innym szablonie wykorzystywanym do prezentowania postów (artykułów).
Pętla powinna zaczynać się tak:
Wewnątrz pętli można używać predefiniowanych funkcji zwanych w WordPress Template Tag'ami. Oto niektóre z nich:
Kwerenda
Jak wspomnieliśmy pętla zaczyna się zapytaniem. Pierszą rzeczą jaka rzuca się w oczy jest jednak brak jakiejkolwiek jawnej instrukcji kwerendę wywołującej. O ile łatwo się domyślić, że kwerenda wykonywana jest niejawnie a jej odpalenie załatwia za nas silnik WordPressa, o tyle trudniej się domyslić skąd WordPress "wie" jakie zapytanie ma wykonać. Odpowiedź jest bardzo prosta, zapytanie wykonuje się "niejawnie" na podstawie parametrów przekazywanych w HTTP request. Kwerenda sql budowana jest ogólnie mówiąc na bazie informacji o rodzaju strony (właściwie rodzaju szablonu strony), informacji o kategorii lub identyfikatorze posta.
Co jednak, jeśli zdecydujemy się wymusić "ręcznie" wykonanie innego niż domyślne zapytania? Możemy użyć w tym celu funkcji:
Należy przy tym pamiętać, że metoda ta nie jest zalecana i powinniśmy korzystać z niej w ostateczności. Jeśli użyjesz query_posts() w swoim kodzie to wywołasz tym samym drugie zapytanie na bazie danych, ponieważ tak czy inaczej przy wywołaniu szablonu WordPress automatycznie wykona najpierw domyślną kwerendę. Trzeba też pamiętać o wywołaniu:
wp_reset_query()
po tym gdy zakończymy wykorzystywanie query_posts() w naszym kodzie.
Preferowanym acz nieco trudniejszym rozwiązaniem pozwalającym na wykonanie kastomowego zapytania w miejsce kwerendy domyślnej jest na przykład zmodyfikowanie zawartości requestu przy wykorzystaniu odpowiedniego filtru, wykorzystanie funkcji parse_query() lub pre_get_posts().
Pełną dokumentację powyższych funkcji znajdziecie tutaj: http://codex.wordpress.org/Template_Tags/query_posts
Wielokrotne zapytania na stronie
Często przydatna jest możliwość wykonania na jednej stronie wielu osobnych zapytań. Jeśli dla przykładu potrzebujemy wyświetlić obok treści posta linki do postów o podobnej tematyce - musimy wykonać większą liczbę na jednej stronie.
Zanim wykonamy większą liczbę zapytań musimy wiedzieć, że cytowane wyżej funkcje have_posts() i the_post() są po prostu wrapperami dla odpowiednich metod obiektu $wp_query. I tu pojawia się problem. Otóż na stronie mamy tylko jedna instancję domyślnego obiektu $wp_query.
Aby mimo togo ograniczenia wykonać wiele kwerend musimy przed wykonaniem kolejnego zapytania "obrobić" wyniki poprzedniego, a następnie wywołać rewind_posts() w celu zresetowania licznika pętli a następnie query_posts() w celu wykonania nowego zapytania.
Jeśli natomiast oryginalny obiekt zawierający wyniki zapytania jest nam niezbędny, to jedynym wyjściem pozostaje stworzenie nowego obiektu WP_Query. Odpowiedni kod mógłby wyglądać tak:
Oryginalna treść artykułu
Ciąg dalszy cyklu ...
Pętla jest najciekawszym elementem konstrukcyjnym WordPress. Wszystko zaczyna się w niej od zapytania (które określa, które wiadomości lub strony należy pobrać), a kończy się instrukcją PHP "endwhile". To co pomiędzy nimi zależy od Ciebie. Samodzielnie możesz określić sposób i zakres wyświetlanych informacji, metadanych, pól niestandardowych itp. Można ustawić wiele pętli i zapytań na jednej stronie, na przykład w single.php można mieć jedną pętlę generującą całą zawartość jednego postu a w kolejnej pętli wyszukiwać i wpisywać tytuły i miniatury pokrewnych postów.
Zgodnie z dokumentacją Pętla musi być umieszczona w index.php i każdym innym szablonie wykorzystywanym do prezentowania postów (artykułów).
Pętla powinna zaczynać się tak:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>na koniec zaś mamy:
<?php endwhile; else: ?>
<p><?php _e('Przepraszamy !!! Brak jest danych spełniających kryteria wyszukiwania.'); ?></p>
<?php endif; ?>
Wewnątrz pętli można używać predefiniowanych funkcji zwanych w WordPress Template Tag'ami. Oto niektóre z nich:
- the_title - zwraca tytuł postu
- the_excerpt - zwraca fragment artykułu
- the_content - zwraca pełną zawartość posta
- the_category - zwraca kategorie posta
- the_author - zwraca autora
- the_date - zwraca datę wiadomosci
- inne znaczniki (jest wiele innych tagów które można użyć w pętli)
Kwerenda
Jak wspomnieliśmy pętla zaczyna się zapytaniem. Pierszą rzeczą jaka rzuca się w oczy jest jednak brak jakiejkolwiek jawnej instrukcji kwerendę wywołującej. O ile łatwo się domyślić, że kwerenda wykonywana jest niejawnie a jej odpalenie załatwia za nas silnik WordPressa, o tyle trudniej się domyslić skąd WordPress "wie" jakie zapytanie ma wykonać. Odpowiedź jest bardzo prosta, zapytanie wykonuje się "niejawnie" na podstawie parametrów przekazywanych w HTTP request. Kwerenda sql budowana jest ogólnie mówiąc na bazie informacji o rodzaju strony (właściwie rodzaju szablonu strony), informacji o kategorii lub identyfikatorze posta.
Co jednak, jeśli zdecydujemy się wymusić "ręcznie" wykonanie innego niż domyślne zapytania? Możemy użyć w tym celu funkcji:
query_posts()
Należy przy tym pamiętać, że metoda ta nie jest zalecana i powinniśmy korzystać z niej w ostateczności. Jeśli użyjesz query_posts() w swoim kodzie to wywołasz tym samym drugie zapytanie na bazie danych, ponieważ tak czy inaczej przy wywołaniu szablonu WordPress automatycznie wykona najpierw domyślną kwerendę. Trzeba też pamiętać o wywołaniu:
wp_reset_query()
po tym gdy zakończymy wykorzystywanie query_posts() w naszym kodzie.
Preferowanym acz nieco trudniejszym rozwiązaniem pozwalającym na wykonanie kastomowego zapytania w miejsce kwerendy domyślnej jest na przykład zmodyfikowanie zawartości requestu przy wykorzystaniu odpowiedniego filtru, wykorzystanie funkcji parse_query() lub pre_get_posts().
Pełną dokumentację powyższych funkcji znajdziecie tutaj: http://codex.wordpress.org/Template_Tags/query_posts
Wielokrotne zapytania na stronie
Często przydatna jest możliwość wykonania na jednej stronie wielu osobnych zapytań. Jeśli dla przykładu potrzebujemy wyświetlić obok treści posta linki do postów o podobnej tematyce - musimy wykonać większą liczbę na jednej stronie.
Zanim wykonamy większą liczbę zapytań musimy wiedzieć, że cytowane wyżej funkcje have_posts() i the_post() są po prostu wrapperami dla odpowiednich metod obiektu $wp_query. I tu pojawia się problem. Otóż na stronie mamy tylko jedna instancję domyślnego obiektu $wp_query.
Aby mimo togo ograniczenia wykonać wiele kwerend musimy przed wykonaniem kolejnego zapytania "obrobić" wyniki poprzedniego, a następnie wywołać rewind_posts() w celu zresetowania licznika pętli a następnie query_posts() w celu wykonania nowego zapytania.
Jeśli natomiast oryginalny obiekt zawierający wyniki zapytania jest nam niezbędny, to jedynym wyjściem pozostaje stworzenie nowego obiektu WP_Query. Odpowiedni kod mógłby wyglądać tak:
<?php $custom_query = new WP_Query('category_name=my_category&posts_per_page=20');
while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
<!-- Tutaj umieszczamy kod generujący kod HTML dla elementu pobranego z pętli... -->
endwhile; ?>
Oryginalna treść artykułu
Ciąg dalszy cyklu ...
środa, 15 sierpnia 2012
WordPress: Projektowanie własnego tematu WordPress, część 1
Zanim przystąpimy do budowy własnych skórek WordPressa musimy zrozumieć zasady ich funkcjonowania. Rozpocznijmy jednak od nazewnictwa. W oryginalnej dokumentacji WordPress mówi się o tematach (Wordpress Themes) natomiast w języku polskim tematy WodPressa nazywa się częściej motywami lub skórkami. W swoim artykule będę używać terminów temat, motyw bądź skórka zamiennie jedynie z powodów "gramatycznych", zaś znaczenie wszystkich terminów będzie zawsze identyczne. W artykułach które można znaleźć w polskim internecie można się spotkać także z określeniem szablon (template) które autorzy rozumieją także jako temat. Jest to błędna konwencja, o tym co to jest template napiszemy za chwilę.
Temat WordPressa składa się z kilkunastu (lub więcej) plików, które wspólnie definiują wygląd i funkcjonalność każdej strony CMS'a. Każdy motyw może być zupełnie inny, może też oferować unikalną funkcjonalność która w znacznej mierze zależy jedynie od fantazji projektanta. Poprawnie zapisany motyw może być dynamicznie, w dowolnym momencie zaaplikowany lub zastąpiony innym przez administratora systemu.
Pliki wchodzące w skład tematu to przede wszystkim:
Jak wspomnieliśmy poza definiowaniem wyglądu fragmentów stron istnieją szablony definiujące wygląd kategorii całych stron. Zawierają one instrukcje grupujące szablony fragmentów w większą całość. Podstawowe szablony tego typu to:
Jak to działa?
Na przykład, jeśli wyświetlany ma być pojedynczy post, wywoływana jest funkcja is_single () która sprawdza czy istnieje plik single.php. Jeśli zwraca ona 'true' treść posta wyświetlana jest za pomocą szablonu single.php, jeśli zaś 'false' do wyświetlenia posta wykorzystany zostanie domyślny szablon index.php.
Za zbudowanie samego HTMLa strony odpowiada kod znajdujący się w pliku szablonu (u nas single.php) który wywołuje z kolei między innymi szablony definiujące sposób budowy fragmentów stron takich jak header.php czy footer.php.
Oryginalna treść artykułu
Ciąg dalszy cyklu ...
Temat WordPressa składa się z kilkunastu (lub więcej) plików, które wspólnie definiują wygląd i funkcjonalność każdej strony CMS'a. Każdy motyw może być zupełnie inny, może też oferować unikalną funkcjonalność która w znacznej mierze zależy jedynie od fantazji projektanta. Poprawnie zapisany motyw może być dynamicznie, w dowolnym momencie zaaplikowany lub zastąpiony innym przez administratora systemu.
Pliki wchodzące w skład tematu to przede wszystkim:
- szablony (template) - pliki szablonów są podstawowym składnikiem każdej strony WordPressa. Jak elementy puzzli poszczególne szablony składane są dynamicznie przez silnik systemu w całą stronę w odpowiedzi na żądanie wyświetlenia jej wysłane przez klienta. Niektóre szablonów (na przykład nagłówka i stopki) są wykorzystywane na wszystkich stronach, podczas gdy inne są używane tylko w specyficznych warunkach.
- arkusze stylów
- opcjonalny plik funkcji functions.php
- pliki definiujące podstawowe typy stron (szablony stron)
- grafiki, pliki javascript itp.
Rys. Temat składa się z szablonów kontrolujących konkretne fragmenty strony
Podstawowe szablony przewijające się przez większość tematów WordPressa to:
- header.php - globalny szablon odpowiadający za wygląd nagłówka i nawigacji na wszystkich stronach systemu. Plik zawiera/generuje także podstawowe HTML strony począwszy od tagu <html> poprzez <head></head> i <body>
- sidebar.php - kolumna boczna (pasek boczny) stron. Jeśli potrzebujemy wielu pasków bocznych, sposób ich generacji definiujemy w functions.php. Zawartość pasków bocznych definiujemy z panelu administracyjnego Wordpress dodając odpowiednie widgety.
- footer.php - szablon stopki zawierający końcowe tagi </body></html>
- loop - tak zwana pętla odpowiada za prezentację elementów generowanych "w pętli". Typowa pętla to lista postów na blogu.
Rys. Temat może zawierać też pliki definiujące wygląd pewnych kategorii stron
Jak wspomnieliśmy poza definiowaniem wyglądu fragmentów stron istnieją szablony definiujące wygląd kategorii całych stron. Zawierają one instrukcje grupujące szablony fragmentów w większą całość. Podstawowe szablony tego typu to:
- index.php - podstawowy plik skórki WordPress. Odpowiada za domyślny wygląd strony i jest wymagany gdy motyw definiuje własne (kastomowe) szablony. Jeśli nie zdefiniowano home.php, to odpowiada także za wygląd strony startowej.
- home.php - plik indeksu definiuje startową stronę z motywu WordPress. Domyślnie zawiera pętlę wyświetlającą najnowsze posty na blogu.
Konfiguracja zwartości strony home.php możliwa jest poprzez panel administracyjny, opcja wp-admin -> Ustawienia->Czytanie. Można tam też wskazać alternatywną, statyczną stronę startową.
Jeśli używamy statycznej pierwszej strony to szablon definiuję wygląd strony prezentującej najnowsze posty. - single.php - odpowiada za wygląd pojedynczych postów. Technicznie single. php zawiera zwykle pętlę, która generuje kwerendy zwracające tylko jeden post i wyświetla je
- single-<rodzaj-postu>
.php - niestandardowyszablon przeznaczony dla pojedynczych postów określonego typu. - page.php - odpowiada za wygląd pojedynczych typowych stron
- inne kategorie stron - w razie potrzeby można zdefiniować szablony dla poszczególnych typów stron w ramach motywu. Wystarczy wtedy skopiować plik page.php pod inną nazwą i dokonać odpowiednich zmian w jego treści zaś na początku pliku należy dodać wpis:
<?php
/* Nazwa Motywu: Nazwa (Kategorii) Strony */
?> - archive.php - szablon przeznaczony do wyświetlania tzw. archiwów, czyli elementów takich jak tagi, kategorie itp.
- 404.php - używany gdy WordPress nie może znaleźć postu lub strony i próbuje wyświetlić odpowiednią informację na ten temat.
- comments.php - szablon komentarzy,
- front-page.php - szablon strony startowej, jest on używany tylko w przypadku korzystania ze statycznej strony startowej,
- category.php - szablon kategorii,
- tag.php - szablon tag,
- taxonomy.php - szablon terminu,
- author.php - szablon strony autor,
- date.php - szablon data / czasu,
- search.php - szablon z wynikami wyszukiwania. Używany gdy jest przeprowadzane wyszukiwanie,
- attachment.php - szablon załącznika. Używany podczas oglądania jednego załącznika,
- image.php - szablon obrazu załącznika. Używany podczas wyświetlania pojedynczego obrazu załącznika.
Jak to działa?
Na przykład, jeśli wyświetlany ma być pojedynczy post, wywoływana jest funkcja is_single () która sprawdza czy istnieje plik single.php. Jeśli zwraca ona 'true' treść posta wyświetlana jest za pomocą szablonu single.php, jeśli zaś 'false' do wyświetlenia posta wykorzystany zostanie domyślny szablon index.php.
Za zbudowanie samego HTMLa strony odpowiada kod znajdujący się w pliku szablonu (u nas single.php) który wywołuje z kolei między innymi szablony definiujące sposób budowy fragmentów stron takich jak header.php czy footer.php.
Oryginalna treść artykułu
Ciąg dalszy cyklu ...
wtorek, 14 sierpnia 2012
px – em – % – pt - in -mm - cm - czyli jak określać rozmiar w CSS
Rozmiar czcionki, czy też ogólniej, elementu (obiektu) HTML, za pomocą CSS można definiować na kilka sposobów oraz przy użyciu kilku dostępnych jednostek. Każdy z wybranych sposobów, oraz każda z jednostek ma jednak inne cechy i zastosowania. Która metoda jest najlepsza? To zależy:
Predefiniowane słowa kluczowe
Jednym z najprostszych sposobów jest definiowanie rozmiaru czcionki za pomocą predefiniowanych słów kluczowych. Atrybut font-size może uzyskiwać wartości takie jak xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
W odróżnieniu od pozostałych słowa kluczowe smaller i larger ustawiają rozmiar relatywny w stosunku do definicji font-size dla nadrzędnego obiektu HTML:
em
Jednostka em jest konstrukcją dosyć abstrakcyjną i początkowo trudną do zrozumienia. 1em jest równa obecnemu rozmiarowi czcionki danego elementu.
Jeśli taki rozmiar nie został jawnie zadeklarowany w CSS dokumentu, to domyślnie wynosi on dla większości przeglądarek 16px. Jeśli ustawisz rozmiar czcionki na 20px, to w efekcie 1em = 20px. Historycznie wartość "EM" opiera się na szerokości wielkiej litery M.
W czasach gdy królowała przeglądarka IE6 stosowano jednostkę em gdyż jako jedyna podlegała skalowaniu. Dzisiaj wszystkie popularne przeglądarki (MSIE od wersji 7.0) nie mają już z tym żadnych problemów, dlatego skalowalność tekstu nie jest już argumentem za jej stosowaniem.
Em służy do ustalania rozmiaru nie tylko czcionek, jest jednostką miary którą można wykorzystać do definiowania innych rozmiarów (wysokość, szerokość, etc). Stosuje się ją obecnie tam, gdzie potrzebna jest elastyczność definiowanych rozmiarów, co oznacza, że kiedy zmienisz rozmiar czcionki automatycznie kaskadowo zmienią się rozmiary wszystkich elementów, o ile tylko zdefiniowane były w em. Em przydaje się też tam, gdzie potrzebujesz bezpośrednio powiązać szerokość obiektu z rozmiarem czcionki.
Najbardziej popularną metodą w pracy z em jest ustawienie rozmiaru czcionki w ciele dokumentu na 62,5% (10px). Korzystanie z 10 jako mnożnika jest znacznie łatwiejsze niż przy użyciu 16. W ten sposób, aby uzyskać rozmiar czcionki np. 22px wystarczy ustawić font-size: 2.2em.
Korzystanie z em jako podstawowej jednostki niesie ze sobą też pewne pułapki.
Nie zawsze wartość rozmiar w em da się przeliczyć na piksele z odpowiednią dokładnością. Na ekranie monitora wszystkie elementy są wyświetlane zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być przeliczona na piksele. Czasami może się okazać, że przeliczona wartość nie jest liczbą całkowitą, a ponieważ pikseli ekranowych nie można podzielić, to nastąpi automatyczne zaokrąglenie. Nie ma jednak żadnej pewności, w jaki sposób zostanie to wykonane: w dół, w górę, czy zgodnie z zasadami matematyki, a czasem nawet jeden piksel różnicy może być granicą dobrej czytelności tekstu.
Kolejne niebezpieczeństwo to fakt "kaskadowości" em. Każda wartość em jest wyliczana w stosunku do rozmiaru rodziców w drzewie DOM. Jeśli używasz em jest tak prostej zamiany na wartości pikseli, może to powodować problemy. Na przykład, możesz ustawić font-size twoich "P" (akapit) i "span" na 1.4em. W momencie, gdy w treści strony umieścisz <span> wewnątrz <p> to faktyczny rozmiar czcionki wewnątrz elementu span zostanie wyliczony jako 1.4 x 1.4, a wyświetlony tekst znajdujący się wewnątrz <span> będzie znacznie większy niż tekst akapitu.
Nie odradzam korzystania z jednostek em, gdyż są w niektórych sytuacjach niezastąpione. Na pewno jednak trzeba wiedzieć kiedy należy ich unikać.
%
To jak działają procenty jest dość oczywiste. Jeśli rodzic w drzewie DOM strony ma rozmiar czcionki 20px a dziecko ma rozmiar czcionki 50%, to efektywny rozmiar zostanie wyliczony na 10px. Procenty mają tę sama naturę co jednostki em, a więc są względne oraz "kaskadowalne". Tak więc % dzielą wszystkie wady i zalety jednostek em.
pt
Jednostka pt została zaczerpnięta wprost z typografii "papierowej" i odnosi się wprost do rozmiaru widocznego na wydruku. 72pt = jeden cal. Ponieważ na ekranie nie faktyczny rozmiar tego co widzimy zależny jest w pełni od ustawionej rozdzielczości ekranu oraz ew. ustawień aplikacji, to stosowanie jednostek takich jak pt (oraz cal, milimetr, centymetr) nie ma kompletnie sensu.
Jednostki pt stosuje się w arkuszach CSS tylko dla elementów które mają być drukowane (przy użyciu klauzuli @media print).
in, mm, cm
Podobnie jak pt tradycyjne jednostki miary (cal, milimetr, centymetr) stosujemy tylko do definiowania wyglądu wydruków. W CSS 1in = 2.54cm.
px
Piksele są naturalną miarą wielkości dla wszystkiego co jest wyświetlane na monitorze. Jeśli potrzebujesz precyzyjnego sterowania rozmiaru czcionki czy dowolnego innego obiektu to określenie wartości w px jest doskonałym wyborem. Na ekranie komputera nie ma nic bardziej dokładne od pojedynczego piksela. Pikseli należy unikać jedynie definiując wygląd wydruków. Problemy ze skalowaniem tekstu którego rozmiar został podany w pikselach, należą już do przeszłości - aktualne wersje wszystkich popularnych przeglądarek bez problemu sobie z tym radzą.
Inne jednostki
Poza podstawowymi specyfikacja CSS definiuje także kilka innych, zwykle mniej używanych ale wartych wymienienia jednostek:
Konwersja wartości wyrażonych w różnych jednostkach
Często zdarza się, że potrzebujemy przeliczyć wartości wyrażone w różnych jednostkach miary dostępnych w CSS. Aby nie robić tego "na piechotę" proponuję skorzystać z kalkulatora który zamieściliśmy na naszej stronie internetowej:
http://www.windroos.pl/strony/kalkulator-jednostek-css.php
Predefiniowane słowa kluczowe
Jednym z najprostszych sposobów jest definiowanie rozmiaru czcionki za pomocą predefiniowanych słów kluczowych. Atrybut font-size może uzyskiwać wartości takie jak xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
W odróżnieniu od pozostałych słowa kluczowe smaller i larger ustawiają rozmiar relatywny w stosunku do definicji font-size dla nadrzędnego obiektu HTML:
<div style="font-size: medium"> <p> Lorem ipsum dolor sit amet, <span style="font-size: larger"> consectetur adipisicing </span> elit, sed do eiusmod tempor incididunt </p> </div>Słowa kluczowe pozwalają zachować zgodność strony z wieloma przeglądarkami, są bowiem poprawnie implementowane przez praktycznie wszystkie z nich. Nie oferują jednak szczególnie subtelnej kontroli nad typografią, ponieważ wybór predefiniowanych rozmiarów jest dość ograniczony. Co więcej sposób ten nie nadaje się do ustalania rozmiarów innych, poza fontami, elementów strony.
em
Jednostka em jest konstrukcją dosyć abstrakcyjną i początkowo trudną do zrozumienia. 1em jest równa obecnemu rozmiarowi czcionki danego elementu.
Jeśli taki rozmiar nie został jawnie zadeklarowany w CSS dokumentu, to domyślnie wynosi on dla większości przeglądarek 16px. Jeśli ustawisz rozmiar czcionki na 20px, to w efekcie 1em = 20px. Historycznie wartość "EM" opiera się na szerokości wielkiej litery M.
W czasach gdy królowała przeglądarka IE6 stosowano jednostkę em gdyż jako jedyna podlegała skalowaniu. Dzisiaj wszystkie popularne przeglądarki (MSIE od wersji 7.0) nie mają już z tym żadnych problemów, dlatego skalowalność tekstu nie jest już argumentem za jej stosowaniem.
Em służy do ustalania rozmiaru nie tylko czcionek, jest jednostką miary którą można wykorzystać do definiowania innych rozmiarów (wysokość, szerokość, etc). Stosuje się ją obecnie tam, gdzie potrzebna jest elastyczność definiowanych rozmiarów, co oznacza, że kiedy zmienisz rozmiar czcionki automatycznie kaskadowo zmienią się rozmiary wszystkich elementów, o ile tylko zdefiniowane były w em. Em przydaje się też tam, gdzie potrzebujesz bezpośrednio powiązać szerokość obiektu z rozmiarem czcionki.
Najbardziej popularną metodą w pracy z em jest ustawienie rozmiaru czcionki w ciele dokumentu na 62,5% (10px). Korzystanie z 10 jako mnożnika jest znacznie łatwiejsze niż przy użyciu 16. W ten sposób, aby uzyskać rozmiar czcionki np. 22px wystarczy ustawić font-size: 2.2em.
Korzystanie z em jako podstawowej jednostki niesie ze sobą też pewne pułapki.
Nie zawsze wartość rozmiar w em da się przeliczyć na piksele z odpowiednią dokładnością. Na ekranie monitora wszystkie elementy są wyświetlane zawsze przy użyciu pikseli, a więc każda jednostka ostatecznie i tak musi być przeliczona na piksele. Czasami może się okazać, że przeliczona wartość nie jest liczbą całkowitą, a ponieważ pikseli ekranowych nie można podzielić, to nastąpi automatyczne zaokrąglenie. Nie ma jednak żadnej pewności, w jaki sposób zostanie to wykonane: w dół, w górę, czy zgodnie z zasadami matematyki, a czasem nawet jeden piksel różnicy może być granicą dobrej czytelności tekstu.
Kolejne niebezpieczeństwo to fakt "kaskadowości" em. Każda wartość em jest wyliczana w stosunku do rozmiaru rodziców w drzewie DOM. Jeśli używasz em jest tak prostej zamiany na wartości pikseli, może to powodować problemy. Na przykład, możesz ustawić font-size twoich "P" (akapit) i "span" na 1.4em. W momencie, gdy w treści strony umieścisz <span> wewnątrz <p> to faktyczny rozmiar czcionki wewnątrz elementu span zostanie wyliczony jako 1.4 x 1.4, a wyświetlony tekst znajdujący się wewnątrz <span> będzie znacznie większy niż tekst akapitu.
Nie odradzam korzystania z jednostek em, gdyż są w niektórych sytuacjach niezastąpione. Na pewno jednak trzeba wiedzieć kiedy należy ich unikać.
%
To jak działają procenty jest dość oczywiste. Jeśli rodzic w drzewie DOM strony ma rozmiar czcionki 20px a dziecko ma rozmiar czcionki 50%, to efektywny rozmiar zostanie wyliczony na 10px. Procenty mają tę sama naturę co jednostki em, a więc są względne oraz "kaskadowalne". Tak więc % dzielą wszystkie wady i zalety jednostek em.
pt
Jednostka pt została zaczerpnięta wprost z typografii "papierowej" i odnosi się wprost do rozmiaru widocznego na wydruku. 72pt = jeden cal. Ponieważ na ekranie nie faktyczny rozmiar tego co widzimy zależny jest w pełni od ustawionej rozdzielczości ekranu oraz ew. ustawień aplikacji, to stosowanie jednostek takich jak pt (oraz cal, milimetr, centymetr) nie ma kompletnie sensu.
Jednostki pt stosuje się w arkuszach CSS tylko dla elementów które mają być drukowane (przy użyciu klauzuli @media print).
in, mm, cm
Podobnie jak pt tradycyjne jednostki miary (cal, milimetr, centymetr) stosujemy tylko do definiowania wyglądu wydruków. W CSS 1in = 2.54cm.
px
Piksele są naturalną miarą wielkości dla wszystkiego co jest wyświetlane na monitorze. Jeśli potrzebujesz precyzyjnego sterowania rozmiaru czcionki czy dowolnego innego obiektu to określenie wartości w px jest doskonałym wyborem. Na ekranie komputera nie ma nic bardziej dokładne od pojedynczego piksela. Pikseli należy unikać jedynie definiując wygląd wydruków. Problemy ze skalowaniem tekstu którego rozmiar został podany w pikselach, należą już do przeszłości - aktualne wersje wszystkich popularnych przeglądarek bez problemu sobie z tym radzą.
Inne jednostki
Poza podstawowymi specyfikacja CSS definiuje także kilka innych, zwykle mniej używanych ale wartych wymienienia jednostek:
- rem - "root em", bardzo ciekawa i warta zapamiętania jednostka. Równa się wartości "font-size 'na elementu głównego strony. Rozmiar rem elementów potomnych jest wyliczany relatywnie do font-size elementu głównego, nie zaś elementu nadrzędnego jak dla em.
- ex - jednostka "relatywna" podobna do em, wartościowo równa tzw. x-height czcionki. X-height równa się zwykle wysokości małej litery x, ale jeśli czcionka bieżącego elementu nie zawiera litery x, to x-height mimo to może być wyliczony na podstawie odpowiedniej metryki zdefiniowanej dla czcionki, ewentualnie na bazie wielkości litery o. Jeśli i to nie jest możliwe, zakłada się że 1ex=0.5em.
- ch - jednostka "relatywna" bazująca na wysokości cyfry 0 (U+0030)
- pc - jednostka absolutna, 1pc = 12pt
- vw - (viewport) jednostka "procentowa" mająca potężne możliwości, niestety na razie zaimplementowana całościowo tylko w Chrome. 1vw zdefiniowana jest jako "1% of width of the initial containing block".
- vh - podobnie jak wyżej, 1vh jest równa 1% szerokości bloku zawartości.
- vmin - jak wyżej, vmin jest wartością mniejszej z liczb vh lub vw.
Konwersja wartości wyrażonych w różnych jednostkach
Często zdarza się, że potrzebujemy przeliczyć wartości wyrażone w różnych jednostkach miary dostępnych w CSS. Aby nie robić tego "na piechotę" proponuję skorzystać z kalkulatora który zamieściliśmy na naszej stronie internetowej:
http://www.windroos.pl/strony/kalkulator-jednostek-css.php
niedziela, 8 lipca 2012
Znalezione w sieci
Bardzo ciekawy artykuł nawiązujący do tematyki którą podejmowałam w kilku artykułach dotyczących typografii znalazłam dzisiaj po takim oto adresem:
http://www.twardoch.com/download/zielgruz/
Uważam że jest on warty przeczytania nawet w ostatnio dręczące nas upały.
http://www.twardoch.com/download/zielgruz/
Uważam że jest on warty przeczytania nawet w ostatnio dręczące nas upały.
Subskrybuj:
Posty (Atom)