wtorek, 30 października 2012

WordPress: Projektowanie własnego tematu WordPress, część 5

W poprzedniej części ukończyliśmy uzupełnianie szablonu nagłówka o elementy dynamiczne generowane przez silnik WordPress. Obecnie przystąpimy do uzupełniania szablonu stopki, która obecnie zawiera jedynie "czysty" html:

</div><!-- #main -->


    <div id="footer"> <!-- stopka -->

        <div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->


            <div id="footer-info">                
              <!-- #footer-info --> 

            </div>

        </div><!-- #footer-inner -->

    </div><!-- #footer -->
</div>

</body>
</html> 
 
Podobnie jak nagłówek stopkę uzupełnimy o kilka informacji dynamicznie generowanych przez środowisko WordPress. U góry stopki umieścimy link do strony głównej, bo linków wewnętrznych nigdy nie jest za wiele:)
W tym celu wykorzystamy wymienioną poprzednio funkcję bloginfo() która wywołana z parametrem 'url' zwróci adres strony głównej naszego bloga, zaś wywołana z parametrem 'name' zwróci jego nazwę.

Niżej wyświetlimy łącza do listy naszych stron (wp_list_pages('title_li=')) oraz kategorii (wp_list_categories('title_li=')), gdyż podobno im więcej crosslinków tym lepiej.

Jesli chodzi o funkcję wp_list_pages('title_li='), możemy ją sparametryzowac według naszego uznania, dla przykładu kiedy chcemy ograniczyć liczbę wyświetlanych stron do kilku najistotniejszych, możemy zrobić to w sposób następujący:

<?php wp_list_pages('include=1,5,8&title_li=' ); ?>


gdzie 1, 5 i 8 są identyfikatorami stron (page id). Funkcja akceptuje również wiele innych parametrów:

<?php $args = array(

    // parametry => wartosci domyślne parametrów

    'depth'        => 0,

    'show_date'    => '',

    'date_format'  => get_option('date_format'),

    'child_of'     => 0,

    'exclude'      => '',

    'include'      => '',

    'title_li'     => __('Pages'),

    'echo'         => 1,

    'authors'      => '',

    'sort_column'  => 'menu_order, post_title',

    'link_before'  => '',

    'link_after'   => '',

    'walker'       => '',

    'post_type'    => 'page',

    'post_status'  => 'publish' 

); ?>


z których warto wymienić
  • depth: określający maksymalny poziom zagłębienia do którego sięgamy w hierarchii stron  (0 = bez ograniczeń)
  • child_of: jeśli jest różny od zera, to wymusza wyświetlenie jedynie stron podrzędnych strony o podanym w tym parametrze identyfikatorze
  • exclude: lista identyfikatorów stron które mają zostać wykluczone
  • title_li: tytuł listy wyświetlanych stron
  • sort_column: sposób sortowania wyników funkcji.

Na samym dole stopki wyświetlimy łącza do kanałów RSS'owych serwujących nasze artykuły: bloginfo('rss2_url') oraz komentarze: bloginfo('comments_rss2_url').

Tak oto otrzymamy kompletna stopkę naszego bloga wzbogaconą o gromadkę linków:

</div><!-- #main -->

    <div id="footer"> <!-- stopka -->

        <div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->

            <p>

                <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">

                    <?php bloginfo('name'); ?>

                </a> jest blogiem o ...

            </p>

            <ul class="footerlinks">
                <?php wp_list_pages('title_li='); ?>
            </ul>

            <ul class="footerlinks">
                <?php wp_list_categories('title_li='); ?>
            </ul>

            <div id="footer-info">               
              <!-- #footer-info --> 
              Copyright by &copy; Windroos
            </div>

        </div><!-- #footer-inner -->

    </div><!-- #footer -->
 
 </div> 
 </body>

</html> 

Pełna treść artykułu

czwartek, 25 października 2012

WordPress: Projektowanie własnego tematu WordPress, część 4

Budujemy temat WordPress

W poprzedniej części rozpoczęliśmy budowę tematu WordPress. Nasze dalsze działania rozpoczniemy od uzupełnienia szablonu nagłówka header.php o kolejne potrzebne elementy.

Obecnie nasz nagłówek zawiera "czysty" html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>

<div id="container">

    <div id="header"><!-- nagłówek -->

        <div id="header-inner"><!-- wewnętrzny kontener nagłówka -->

            <div id="firma">
               <!-- #logo, miejsce na logo, znak firmowy itp -->
            </div>

            <div id="nav">
               <!-- #nav, nawigacja górna -->
            </div>

        </div>  <!-- #header-inner -->

    </div><!-- #header -->

    <div id="main">

Na wstępie uzupełnimy go o deklarację wersji językowej strony która umieścimy wewnątrz znacznika <html>:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Kolejnym krokiem będzie uzupełnienie sekcji head strony w tym meta tagów odpowiedzialnych za definiowanie tytułu, linków do arkuszów stylu itp. W tym celu sekcję <head></head> uzupełnimy w nastepujący sposób:

<head profile="http://gmpg.org/xfn/11">
    <title><?php
        if ( is_single() ) { single_post_title(); }      
        elseif ( is_home() || is_front_page() ) { 
          bloginfo('name'); print '. '; bloginfo('description'); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { 
          bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
        elseif ( is_404() ) { bloginfo('name'); print '.  Nie znaleziono'; }
        else { bloginfo('name');}
    ?></title>
     
    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; 
       charset=<?php bloginfo('charset'); ?>" />

   <meta http-equiv="description" content="<?php bloginfo('description'); ?>" />
     
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
     
    <?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
     
    <?php wp_head(); ?>
     
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" 
        title="<?php printf( 'Ostatnie posty z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" 
        title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />  
</head>

Znacznik title został uzupełniony kodem php który w zależności od typu strony generuje tytuł na podstawie atrybutów systemowych WordPressa. Dla przykładu dla stron wyszukiwania w tytule poza nazwą bloga (funkcja bloginfo(name);) pojawi się wpis Wyniki wyszukiwania dla oraz zawartość szukanej frazy (funkcja wp_specialchars($s);).

Trzeba tu koniecznie napisać kilka słów o funkcji bloginfo(). Funkcja ta służy do pobierania niektórych atrybutów systemowych WordPressa (głównie z profilu użytkownika i sekcji ustawień podstawowych systemu) i będzie często wykorzystywana we wszystkich szablonach, które zechcecie stworzyć.

W kolejnych wierszach mamy dynamicznie wygenerowane wartości metadanych dla meta tagów content-type i description, następnie zaś link do arkusza stylów.

Kolejny "tajemniczy" wiersz pozwala zainicjować skrypt ładujący wątki komentarzy dla stron, na których komentarze występują.

Funkcja wp_head(); w kolejnym wierszu jest hakiem  który potrzebny jest po to, aby pluginy wyświetlane w dalszej części strony mogły za jego pośrednictwem załadować w nagłówku niezbędne im do funkcjonowania elementy (style, skrypty javascript).

Na koniec mamy odnośniki do RSS oraz pingback (pingback informuje o tym, że ktoś dodał linka do naszego bloga lub wpisu.)

W efekcie wprowadzonych modyfikacji nasz szablon nagłówka wygląda tak oto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
    <title><?php
        if ( is_single() ) { single_post_title(); }      
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print '. '; bloginfo('description'); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
        elseif ( is_404() ) { bloginfo('name'); print '.  Nie znaleziono'; }
        else { bloginfo('name');}
    ?></title>
     
    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />    
    <meta http-equiv="description" content="<?php bloginfo('description'); ?>" />     
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
     
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
     
    <?php wp_head(); ?>
     
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" 
       title="<?php printf('Ostatnie posty z %s',  esc_html( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" 
       title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />  
</head>

<body>

<div id="container">

    <div id="header"><!-- nagłówek -->

        <div id="header-inner"><!-- wewnętrzny kontener nagłówka -->

            <div id="firma">
               <!-- #logo, miejsce na logo, znak firmowy itp -->
            </div>

            <div id="nav">
               <!-- #nav, nawigacja górna -->
            </div>


        </div>  <!-- #header-inner -->

    </div><!-- #header -->

    <div id="main">

O ile sekcja head dokumentu html wygląda na ukończoną, o tyle kontenery które przygotowaliśmy na informacje w nagłówku strony są nadal puste. Najwyższy czas je uzupełnić.

Na poczatek w sekcji firma umieścimy warunkowy link do naszej strony głównej:
<div id="firma">

   <?php if ( !is_home() && !is_front_page() ) { ?>

       <div id="home-link">
          <a href="<?php bloginfo( 'url' ) ?>" title="<?php bloginfo( 'name' ) ?>" rel="home">
             <?php bloginfo( 'name' ) ?>
          </a>
      </div>

   <?php } ?>

</div> 

Kolejnym elementem niezbędnym na każdej stronie jest menu. Aby załadować w nagłówku menu WordPress skorzystamy z wbudowanej funkcji wp_page_menu(); Funkcja przyjmuje m.in. parametr pozwalający określić sposób uporządkowania wyświetlanych opcji menu oraz parametr pozwalający określić nazwę klasy CSS która zostanie przypisana głównemu kontenerowi menu. Dla przykładu:

wp_page_menu(array( 'menu_class' => 'page-navi', 'sort_column' => 'menu_order' )); 

Wywołanie powyższej funkcji umiescimy wewnątrz kontenera o identyfikatorze nav. Ostatecznie więc szablon nagłówka strony przybierze formę:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
    <title><?php
        if ( is_single() ) { single_post_title(); }      
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print '. '; bloginfo('description'); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
        elseif ( is_404() ) { bloginfo('name'); print '.  Nie znaleziono'; }
        else { bloginfo('name');}
    ?></title>
     
    <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />    
    <meta http-equiv="description" content="<?php bloginfo('description'); ?>" />     
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
     
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
     
    <?php wp_head(); ?>
     
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" 
       title="<?php printf('Ostatnie posty z %s',  esc_html( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" 
       title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />  
</head>

<body>

<div id="container">

    <div id="header"><!-- nagłówek -->

        <div id="header-inner"><!-- wewnętrzny kontener nagłówka -->

            <div id="firma">

               <?php if ( !(is_home() || is_front_page()) ) { ?>

                  <div id="home-link"> 
                     <a href="<?php bloginfo( 'url' ) ?>" title="<?php bloginfo( 'name' ) ?>" rel="home"> 
                        <?php bloginfo( 'name' ) ?> 
                     </a> 
                 </div>

               <?php } ?>

            </div> 

            <div id="nav">
               <?php wp_page_menu(array( 'menu_class' => 'page-navi', 'sort_column' => 'menu_order' )); ?>
            </div>

        </div>  <!-- #header-inner -->

    </div><!-- #header -->

    <div id="main">

Na kolejnym etapie budowy tematu WordPress przystąpimy do uzupełniania stopki strony o elementy generowane przez silnik CMSa.

WordPress: Projektowanie własnego tematu WordPress, część 3

Od teorii do praktyki

W tym miejscu na moment porzucimy omawianie zasad działania WordPressa. Znamy już podstawową strukturę tematów, składających się na nie szablonów oraz funkcję najciekawszego mechanizmu systemu, czyli pętli.

Jak już wiemy "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."

Czas najwyższy aby zderzyć teorię z rzeczywistością. Wyobraźmy sobie, że docelowa struktura naszej strony www wyglądać będzie następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>

<div id="container">

    <div id="header"><!-- nagłówek -->

        <div id="header-inner"><!-- wewnętrzny kontener nagłówka -->

            <div id="firma">
               <!-- #logo, miejsce na logo, znak firmowy itp -->
            </div>

            <div id="nav">
               <!-- #nav, nawigacja górna -->
            </div>

        </div>  <!-- #header-inner -->

    </div><!-- #header -->


    <div id="main">

        <div id="container">

            <div id="content">
               <!-- #content, główny kontent strony --> 
            </div>

        </div><!-- #container -->

        <div id="primary" class="widget-area">

        </div><!-- #primary .widget-area -->

        <div id="secondary" class="widget-area">

        </div><!-- #secondary -->

    </div><!-- #main -->
 
    <div id="footer"> <!-- stopka -->

        <div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->
 
            <div id="footer-info">                
              <!-- #footer-info --> 
            </div>

        </div><!-- #footer-inner -->

    </div><!-- #footer -->
</div>

</body>
</html>

Jak widać nasza strona jest dokumentem xhtml (transitional, ponieważ jest to obecnie najlepiej "sprawujący się" format dla WordPress),  a składa się ogólnie mówiąc z nagłówka i stopki z kilkoma elementami wewnętrznymi oraz z głównego "kontenera" na treść w postaci div'a o identyfikatorze "main". Słowo kontener użyte zostało w tym kontekście nieprzypadkowo. Zobaczymy zaraz, że większość widocznych na listingu elementów typu div pełni funkcję kontenerów na fragmenty kodu xhtml które generował będzie silnik WordPress.

Div "main" zawiera między innymi kontener na zasadniczą treść strony (div o identyfikatorze "content") oraz dwa kontenery na widgety. Wygląd oraz położenie tych elementów na stronie określimy w arkuszu stylów CSS, obecnie zaś wystarczy wiedzieć, iż wyświetlone zostaną one w 3 kolumnach. Element #content umieszczony został jako pierwszy w przedstawionej strukturze, gdyż rozwiązanie takie jest najbardziej przyjazne wyszukiwarkom (zasadnicza treść umieszczona przed widgetami, czyli pod kątem pozycjonowania mniej istotną zawartością).

Szablony fragmentów strony

Nasza wzorcowa struktura strony musi zostać obecnie przełożona na formę zrozumiałą dla WordPressa. W tym celu podzielmy wzorcowy html na fragmenty które odpowiadać będą fragmentom strony w ramach tematu (WordPress theme).

Na pierwszy ogień weźmiemy nagłówek i stopkę. Szablon nagłówka strony utworzymy poprzez "wycięcie" z wzorca fragmentu kodu xhtml rozpoczynając od znacznika <html> (a właściwie deklaracji DOCTYPE) poprzez nagłówek html'a, znacznik <body> po otwierający główny kontener znacznik <div id="main"> włącznie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>

<div id="container">

    <div id="header"><!-- nagłówek -->

        <div id="header-inner"><!-- wewnętrzny kontener nagłówka -->

            <div id="firma">
               <!-- #logo, miejsce na logo, znak firmowy itp -->
            </div>

            <div id="nav">
               <!-- #nav, nawigacja górna -->
            </div>

        </div>  <!-- #header-inner -->

    </div><!-- #header -->

    <div id="main">

Otrzymany w ten sposób szablon zapisujemy pod nazwą header.php. Podobnie czynimy tworząc szablon stopki. Kopiujemy kod html poczynając od znacznika zamykającego kontener główny a kończąc na tagu zamykającym dokument:

</div><!-- #main -->
 
    <div id="footer"> <!-- stopka -->

        <div id="footer-inner"><!-- #footer-inner, wewnętrzny kontener stopki -->
 
            <div id="footer-info">                
              <!-- #footer-info --> 
            </div>

        </div><!-- #footer-inner -->

    </div><!-- #footer -->
</div>

</body>
</html>

Otrzymany w ten sposób szablon zapisujemy jako plik footer.php.

Kolejnym naszym krokiem powinno być stworzenie pliku index.php. Jak łatwo się domyślić, jego treść uzyskujemy kopiując pozostały we wzorcu nieskopiowany dotychczas kod:

        <div id="container">

            <div id="content">
               <!-- #content, główny kontent strony --> 
            </div>

        </div><!-- #container -->

        <div id="primary" class="widget-area">

        </div><!-- #primary .widget-area -->

        <div id="secondary" class="widget-area">

        </div><!-- #secondary -->

Aby szablon miał szanse działać, plik index.php uzupełniamy kodem php odpowiedzialnym za ładowanie nagłówka i stopki:

        <?php get_header(); ?> 
 
        <div id="container">

            <div id="content">
               <!-- #content, główny kontent strony --> 
            </div>

        </div><!-- #container -->

        <div id="primary" class="widget-area">

        </div><!-- #primary .widget-area -->

        <div id="secondary" class="widget-area">

        </div><!-- #secondary -->
 
        <?php get_footer(); ?> 

W ten sposób uzyskaliśmy główny plik szablonu, od załadowania którego silnik WordPress rozpoczyna procedurę aplikowania wskazanego tematu. Jednakże budowa szablonu bynajmniej nie kończy się w tym miejscu, zaś kolejnym etapem naszych działań będzie uzupełnienie szablonów nagłówka i stopki o kolejne niezbędne elementy.

Ciąg dalszy wkrótce ...

Pełna treść artykułu

sobota, 20 października 2012

Matematyka i Web Design: liczby Fibonacci'ego

Zrozumienie czym jest ciąg Fibonacci'ego wymaga od nas "cofnięcia się" do czasów kursu matematyki w szkole średniej (na pierwszym roku studiów?). To oczywiście żart, zakładam bowiem, że teoria ciągów nie jest nikomu obca.

Ciąg Fibonacci'ego to ciąg liczb naturalnych określony rekurencyjnie w sposób następujący:


Rys. definicja ciągu Fibonacci'ego

Innymi słowy, ciąg składa się z elementów (dla n>1) których wartość jest sumą dwóch poprzednich składników. Pierwszych piętnaście wartości ciągu to: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377.

Ciąg zawdzięcza swoją nazwę matematykowi z Pizy, Leonardowi, który pod nazwiskiem Fibonacci wydał w 1202 roku słynną księgę Liber Abaci. Ojciec Leonarda nosił przydomek Bonacci, stąd syn został Fibonaccim (filius Bonacci - syn dobrotliwego).

Ciąg Fibonacciego wiąże się z takimi koncepcjami matematycznymi jak:
  • Złoty podział odcinka stworzony po raz pierwszy przez Euklidesa
  • Złoty podział prostokąta(złoty prostokąt)
  • Złoty kąt
  • Złota spirala i spirala fibonacciego
  • Elipsa logarytmiczna
Koncepcja złotego podziału popularna już w starożytności znacznie wyprzedziła czasy Fibonacciego. Nie zmienia to jednak faktu, iż w wyniku podzielenia każdej z liczb ciągu przez jej poprzednik otrzymuje się iloraz oscylujący wokół 1,618 - liczby złotego podziału. W miarę zwiększania się liczb zmniejszają się odchylenia od tej wartości. Dokładna wartość granicy jest złotą liczbą:

Φ= 5+12 = 1,6180339887498948482...

Za średniowiecznym włoskim matematykiem Lucą Pacioli przyjęto, że będąca miarą złotego podziału liczba Φ przybliżana jest z dokładnością do trzech miejsc po przecinku . Stąd też w opracowaniach często podaje się, że Φ=1,618.

Liczba  Φ posiada wiele ciekawych własności matematycznych, na przykład:

Φ= 1+ 1+ 1+ 1+ ... = 1+ 1 1+ 1 1+ 1 1+ 1 1+ 1 ... = 1,6180339887498948482...

Złoty prostokąt to prostokąt którego krawędzie pozostają w złotym stosunku. Okazuje się, że po dorysowaniu doń kwadratu o boku równym dłuższemu bokowi prostokąta otrzymuje się nowy, większy złoty prostokąt. Stąd stosunek długości boków wyraża się zależnością:

Φ= ab = a+ba = 1,6180339887498948482...

Odpowiednio w drugą stronę, odcinając od złotego prostokąta kwadrat o boku równym krótszemu bokowi prostokąta otrzymuje się prostokąt, którego boki nadal pozostają w złotym stosunku.
Powtarzając te czynności otrzymuje się kolejne coraz większe lub coraz mniejsze złote prostokąty.

Rys. Złoty prostokąt (źródło: wikipedia.org)

Złotym kątem jest kąt środkowy oparty na mniejszym z dwóch łuków powstałych w wyniku złotego podziału okręgu ( w przybliżeniu jest to 137,5 stopnia). Iloraz miary tego kąta i jego dopełnienia do kąta pełnego jest równy złotej liczbie (stąd nazwa). Jeśli jako a oznaczymy łuk na którym oparty jest złoty kąt, jako b jego dopełnienie do 360 stopni, zaś jako c obwód okręgu, to otrzymamy zależność:

Φ= ab = ca = 1,6180339887498948482...


Rys. Złoty kąt (źródło: wikipedia.org)

Złoty kąt pełni ważna rolę w teorii ulistnienia jako kąt dywergencji (kąt, jaki tworzą między sobą promienie biegnące od osi łodygi do 2 kolejno tworzonych liści). Bracia Bravais badając rośliny zauważyli, że najczęściej występującym kątem dywergencji jest złoty kąt.

Złota spirala i spirala fibonacciego są spiralami których proporcje są oparte o proporcje serii złotych prostokątów. Spirale konstruujemy wrysowując je w kwadraty o długościach boków proporcjonalnych do wartości kolejnych liczb ciągu. Złota spirala jest właściwie serią ćwierć okręgów wpisanych w kwadraty. które z kolei zostały wpisane w złote prostokąty jak widać to na poniższym rysunku


Rys. Złota spirala

Obie spirale zbliżone są proporcjami, jednakże złota spirala jest spiralą logarytmiczną, zaś spirala fibonacciego nie. Kształty spiralne zbliżone do wymienionych spotykane są niezwykle często w przyrodzie. Wymienić tu można:
  • kształt muszli ślimaka
  • kształt ramion galaktyk, w tym drogi mlecznej
  • kształt wirów huraganów i tornad
Złota elipsa to elipsa której osie pozostają w złotej proporcji. Nikogo zapewne nie zdziwi, iż jest ona uważana za najbardziej proporcjonalną figurę tego typu i także posiada wiele ciekawych właściwości geometrycznych.

Liczby Fibonacciego pojawiają się w tak wielu sytuacjach i zjawiskach, że wydaje się to zupełnie nieprawdopodobne. Ciąg fibonacciego opisuje np. liczbę pędów rośliny jednostajnie przyrastających w kolejnych latach. W słoneczniku możemy zaobserwować dwa układy linii spiralnych, wychodzących ze środka. Liczba linii rozwijających się zgodnie z ruchem wskazówek zegara wynosi 55 natomiast 34 skręconych w przeciwną stronę. Takie same spirale można zaobserwować na wielu innych roślinach ( np. kalafior, ananas). Liczby spiral występujących w tych roślinach są kolejnymi liczbami Fibonacciego.

Liczby Fibonacciego były i są stosowane w wielu aspektach działalności i twórczości człowieka. W XX wieku ciąg Fibonacciego stosowany był przez niektórych kompozytorów do proporcjonalnego porządkowania rytmu lub harmonii. Na ciągu Fibonacciego zbudowane jest między innymi Trio klarnetowe Krzysztofa Meyera. Złote proporcje wywodzące się z ciągu Fibonacciego wykorzystano w starożytności podczas wznoszenia piramidy Cheopsa w Gizie oraz Partenonu w Grecji.
Wartości oraz proporcje wywodzące się z ciągu Fibonacciego wykorzystuje się współcześnie w wielu dziedzinach związanych z projektowaniem. Web Design jest dziedziną gdzie również warto rozważyć ich stosowanie. W jednym z moich poprzednich artykułów pisałam o złotym podziale w projektowaniu stron internetowych. Ale też pozostałe opisane konstrukty matematyczne wykorzystać możemy projektując grafikę stron internetowych.

Z uwagi na swoje cechy w tym przypisywaną im "naturalność" złoty podział, złoty prostokąt oraz złota spirala znajdują swoje szerokie zastosowanie w dziedzinie niezwykle bliskiej projektowaniu stron www, a mianowicie w fotografii, gdzie należą do kanonu komponowania zdjęć.

Dzieje się tak, ponieważ umysł ludzki postrzega proporcje opisane liczbami Fibonacciego jako wyjątkowo eleganckie i klasyczne. Projektant jest w gruncie rzeczy ograniczony jedynie własną kreatywnością jeśli chodzi o wykorzystanie zasad klasycznych proporcji. Najczęściej wartości wynikające ze stosunku kolejnych liczb Fibonacciego stosuje się do obliczania rozmiaru poszczególnych bloków strony. Nie chodzi tutaj o to, aby rozmiary bloków strony były dokładnie równe kolejnym liczbom z ciągu Fibonacciego, możemy zastosować odpowiedni przelicznik. Tak czy inaczej bowiem uzyskamy w ten sposób odpowiednie proporcje elementów.

Dla przykładu w wielu swoich projektach korzystam z proporcji wyliczonych z ciągu fibonacciego budując elementy siatki na której opieram kompozycję całej witryny.

Trzeba przy tym pamiętać, iż opieranie proporcji elementów strony o proporcje złotych prostokątów czy podobne konstrukcje wiąże się z pewną umownością. O ile strony internetowe ze swojej natury posiadają określoną szerokość, o tyle długość strony jest zwykle płynna i dostosowuje się do rozmiarów zawartości (na przykład ilości tekstu). Możemy jedynie zadbać, aby proporcje elementów widocznych w danej chwili na ekranie były odpowiednio zestawione.

Ciąg dalszy nastąpi...

sobota, 13 października 2012

Jak budować własny Fan page

W kolejnej części cyklu artykułów o Fan pages na Facebooku spróbujemy przyjrzeć się temu, jak zorganizować własną stronę fanów.
Przy pomocy Facebook’a można zrobić niemalże wszystko. Poza komunikowania się z przyjaciółmi, Facebook pozwala grać w gry, organizować imprezy, umawiać sesje zdjęciowe, dzielić się filmami czy muzyką. Media społecznościowe mogą być potężnym narzędziem promocyjnym, dlatego warto aby właściciele firm również przyłączali się do tego szaleństwa. W poprzednim artykule na temat Fan pages pisałam o tym bardziej szczegółowo.
Wracając do Fan page, stworzenie własnej strony jest łatwe i nie wymaga szczególnych kompetencji technicznych. Jednak aby Twój „Fanpejdż” miał szansę odnieść sukces, trzeba zadbać o kilka istotnych szczegółów.

Dobra strona startowa
Landing page” czyli strona startowa jest pierwszą rzeczą, jaką użytkownik widzi na Twoim Fan page. Pierwsze wrażenie jest bardzo istotne, gdyż może go ono przekonać potencjalnego fana do pozostania na stronie, a co więcej do tego by ją „polubił”. Dlatego trzeba mieć bardzo dobrą stronę docelową. Ważna jest grafika, ogólny wygląd strony. Możesz też osiągnąć wyjątkową i przekonującą stronę przy użyciu odpowiednich aplikacji. Dodając do nich odpowiednią treść w sposób pozytywny pobudzisz zainteresowanie użytkownika.

Pamiętaj o wizerunku firmy
W Twoim Fan page wyróżniać się będą przede wszystkim dwie ilustracje, ale wszystkie inne fotografie które zamieszczasz muszą budować pozytywny wizerunek firmy. Na stronie startowej warto podać dane teleadresowe firmy, tak aby Twoi potencjalni Klienci wiedzieli gdzie znaleźć Cię w realu.

Dobra nazwa strony
Nazwa jest bardzo istotna. Dobierz ją tak, aby była łatwa do zapamiętania. Prawdopodobnie najlepszym pomysłem będzie użycie w nazwie Twojej firmy. Warto postarać się tak skonstruować nazwę aby odnieść jakieś korzyści w zakresie indeksowania strony przez wyszukiwarki, z drugiej jednak strony nazwa nie może być zbyt nachalną reklamą, przeładowaną dodatkowo słowami kluczowymi. Pamiętaj że nazwa Fan page pojawiać się będzie w razie aktualizacji na profilach Twoich klientów, a nic tak bardzo nie drażni jak wiadomości opatrzone „spamerskimi” tytułami. Jest to najszybsza droga do tego, aby użytkownik przestał je czytać i wyrzucił je ze swojego pulpitu.

Pełna treść artykułu

czwartek, 11 października 2012

Dlaczego warto mieć Fan page

Zapewne wielu z nas zna osoby spędzające na Facebooku całe dnie. Takie zjawisko jak i samą popularność Facebooka można rozpatrywać wielostronnie, gdy jednak spojrzeć na nie chłodno z pozycji właściciela firmy czy też pracownika działu marketingu, to łatwo zauważyć rodzące się okazje. Facebook oferuje nam darmowe narzędzie marketingowe z którego żal nie skorzystać.
Jeśli więc masz firmę a nie masz jeszcze Fanpage, to tracisz bezpowrotnie okazję darmowej reklamy, tracisz po prostu wielu potencjalnych klientów.

Oto kilka powodów, dla których powinieneś jak najszybciej utworzyć Facebook Fan Page:

Po pierwsze i najważniejsze,  obecnie Facebook chwali się niemal miliardem użytkowników na całym świecie. Czy w świetle tej wiadomości trzeba dodatkowo tłumaczyć dlaczego warto reklamować się na Facebooku? Szczególnie gdy to nic nie kosztuje?

Fan page na Facebooku zapewnia stałą interakcję z klientem. Jeśli osoba "polubi" Twoją stronę, to jednocześnie zapisuje się na informacje o aktualizacji Twojego "fanpejdża". Gdy tylko wprowadzisz na stronie nowe informacje, informacja o tym zostanie przekazana Twoim potencjalnym klientom.

Interakcje mogą być znacznie głębsze. Jeśli ktoś lubi twój Fan page, to jednocześnie udostępnia Ci możliwość korzystania ze wspólnych narzędzi komunikacyjnych. Od momentu gdy ktoś Cię polubi, otrzymujesz możliwość komunikowania się z nim poprzez dyskusje, ankiety itp.

Łatwość poszerzania bazy klientów to także kolejna zaleta Fan page. Gdy rozsądnie prowadzisz swojego "fanpejdża", umieszczasz na nim artykuły czy filmy, to mogą one być (i zwykle są) udostępniane przez tych którzy lubią Twoją stronę kolejnym użytkownikom bez Twojego udziału. Dzięki temu pochodzące od Ciebie materiały są promowane i rozpowszechniane rękami Twoich Klientów. Facebook to doprawdy genialne narzędzie marketingowe.

W końcu świat reklamy ewoluuje w kierunku reklamy sprofilowanej pod zainteresowania klienta. A mechanizmy Facebooka dostarczają klientom takich reklam które współgrają z ich zainteresowaniami. W końcu znajomi dzielą się między sobą tym, co jest zgodne z zainteresowaniami czy potrzebami obu stron.

Pełna treść artykułu



wtorek, 9 października 2012

"Landing page"

Hasło „landing page” oznacza pierwszą stronę witryny, stronę na której najczęściej „lądują” internauci. Wszystkie witryny i portale internetowe, nawet jeśli nie są zaprojektowane w wyjątkowy sposób, mają swoją landing page.
Landing page (strona docelowa) ma istotny wpływ na wizerunek każdej witryny, a szczególnie witryny e-commerce. Słabo zaprojektowane mogą wpływać negatywnie na rozwój firmy w internecie, przemyślane strony tego typu mogą zwiększyć ruch na stronie, sklepie, zachęcając do akcji i podejmowania dalszych działań. Przyczyniają się tym samym do sukcesu strony firmowej.
Najważniejszym miernikiem skuteczności „landing page” jest tzw. "współczynnik odrzuceń" jest to procent użytkowników, którzy natychmiast opuszczają witrynę bez żadnego innego kliknięcia. Ilość odrzuceń jest odwrotnie proporcjonalna do skuteczności strony docelowej. Wysoki wskaźnik odrzuceń zasadniczo oznacza, że strona docelowa nie jest na tyle przekonująca dla odwiedzających, aby wykazali większe zainteresowanie nią lub podejmowali na niej inne działania. Normalnie, strona główna jest podstawową stroną docelową większości typowych witryn, jednakże coraz częściej właściciele stron umieszczają „landing page” poza stroną główną i to z dobrym skutkiem.
Większość użytkowników woli pomijać informacje, które są dla nich nieistotne. Chcą otrzymać dokładnie to czego poszukują czyli „landing page”, która dostarcza dokładnie tych poszukiwanych informacji. Unikają tym samym straty czasu spowodowanej koniecznością klikania ze strony na stronę. Strony docelowe spełniają swoje zadanie, gdy właściciel zdaje sobie sprawę z tego jaki rodzaj użytkowników jest na nią kierowanych, wie co odwiedzający musi kliknąć aby znaleźć się na jego stronie. Przykład: Potencjalny klient po kliknięciu w reklamę produktu nie chce przechodzić przez szereg stron aby znaleźć informacje o produkcie. Chce te informacje otrzymać po jednym kliknięciu.
Nie wszyscy odwiedzający szukają tych samych informacji, jedni mogą kliknąć na Twój link po przeczytaniu artykułu, który udostępniłeś w przeglądarce podczas gdy drudzy dotrą do strony po wejściu na Twoją reklamę. Dla każdego szczególnego gościa można zaprojektować landing page, która zaspokoi jego potrzeby i zawiera informacje których poszukuje.
Landing pages powinny być poddane ocenie ich efektywności. Opisany wcześniej wskaźnik odrzuceń jest kluczowym miernikiem ale nie jedynym. Innym miernikiem jest sukces tzw. „kolejnej akcji”, może to być zakup produktu, uzyskanie większej ilości informacji, zapisanie się na darmowe testy produktu itd. Możemy określić tzw. współczynnik konwersji poprzez podzielenie liczby podejmujących działania na liczbę odwiedzających. Typowy współczynnik konwersji wynosi 3 do 5 procent dla wiodących stron oraz 1 do 2 procent dla stron e-commerce. Twoja witryna osiągnie sukces jeśli otrzymasz wynik dwukrotny.
Pojęciem, które jest nieodłącznym elementem tworzenia skutecznych stron docelowych jest tzw. "wyrównanie". Jest to połączenie między źródłem (skąd użytkownik przychodzi) i strony docelowej. Im bardziej są związane, tym wyższy sukces konwersji.
Dobrym przykładem jest baner reklamowy konkretnego produktu z firmy kosmetycznej. Kliknięcie w baner reklamowy i skierowanie użytkownika bezpośrednio na „landing page” z opisem dokładnie tego produktu, daje to bardzo wysoki współczynnik konwersji.
DOBRA LANDING PAGE POWINNA BYĆ:
Wiarygodna
Strona musi zyskać zaufanie odwiedzającego poprzez wiarygodny wygląd. Usuń wszystko, co może spowodować negatywne skojarzenia w świadomości użytkowników, takie jak:
-brak informacji kontaktowych
-błędy gramatyczne i literówki
-potoczne wyrażenia
-rozciągnięta, toporna grafika
-zbyt dużo czcionek typu serif ( np. Times New Roman )
Przekonująca
Twoja strona musi być w stanie przekonać gości, że produkt lub usługa może pomóc im osiągnąć ich cel. Pamiętaj, o tym co jako pierwsze przyciągnęło gości do Twojego produktu, więc możesz zrozumieć, czego odwiedzający szuka.
Rozpoznawalna
Twoja strona musi wywołać w odwiedzającym myśl „To jest dokładnie tom czego szukam!” zaraz po załadowaniu.
Zachęcająca do akcji
Musisz nałożyć nacisk na podjęcie akcji przez użytkownika, podczas gdy jest on na stronie docelowej.
JAK ZAPROJEKTOWAĆ SKUTECZNĄ STRONĘ DOCELOWĄ.
Oto główne zasady, które prowadzą użytkownika w procesie tworzenia skutecznej strony docelowej:
Czytaj dalszy ciąg artykułu