Vivee - wordpress, webmastering, grafika i fotografia » Webmaster http://vivee.info Blog o wordpress, webmasteringu, grafice i fotografii. Sat, 01 Jan 2011 22:14:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery Cycle http://vivee.info/2011/01/01/jquery-cycle/ http://vivee.info/2011/01/01/jquery-cycle/#comments Sat, 01 Jan 2011 22:14:10 +0000 agressiva http://vivee.info/?p=2125 jQuery Cycle to jedna z wielu ogólnodostępnych wtyczek, która pozwala nam zastosować na naszej stronie obecnie najpopularniejszy element - slider.
W porównaniu do innych gotowych rozwiązań pozwala nam dobrać wiele efektów przejścia obrazów - od tradycyjnego przenikania po bardziej złożone zmiany z wykorzystaniem zmiany położenia lub nawet wielkości zamieszczonych obrazków.

Jeszcze jedną jego zaletą jest rozbudowana dokumentacja i ogromna ilość podanych przykładów wdrożenia.
Oto strona oficjalna wtyczki: jQuery Cycle Plugin

demopobierz

jQuery Cycle

Instalacja:

Aby zainstalować ten plugin przede wszystkim musimy w sekcji kodu zamieścić bibliotekę jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

A także główny skrypt jQuery Cycle:

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

Podałam tutaj odnośniki zewnętrzne, ale oczywiście wtyczkę możecie pobrać ze strony autora: jQuery Cycle Plugin - Download

Ponadto należy zamieścić skrypt, w którym bardzo łatwy sposób określimy jaki efekt chcemy zastosować w swoim sliderze:

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                //zdefiniowany efekt
        });
});
</script>

$('.slideshow') - nazwa diva, w którym umieszczamy slider

Struktura:

Jako, że jest to slider do zdjęć, to jego struktura ogranicza się do diva głównego oraz samych obrazków:

<div class="slideshow">
        <img src="img1.png" alt="" height="300" width="800" />
        <img src="img2.png" alt="" height="300" width="800" />
        <img src="img3.png" alt="" height="300" width="800" />    
</div>

Efekty

Przedstawię Wam kilka efektów jakie możemy uzyskać dzięki jQuery Cycle
Aby zastosować określony efekt należy w sekcji zamieścić odpowiedni kod i ewentualnie dostosować go do indywidualnych potrzeb:

1. Fade - czyli tradycyjne przenikanie:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade',
                speed: '2500',
        });
});
</script>

2. Scrolldown - przewijanie z góry na dół:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade',
                speed: '2500',
        });
});
</script>

3. Zoom:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
fx:    'zoom',
sync:   0,
delay: -4000
        });
});
</script>

4. Shuffle - przekładanie się zdjęć:
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx:    'shuffle',
    delay: -4000
        });
});
</script>

5. Scrollleft - przewijanie w lewo
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx:     'scrollLeft',
    timeout: 5000,
        });
});
</script>

6. Multi - zastosowanie wielu efektów jednocześnie
Zobacz efekt

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx:     'scrollHorz,zoom,fadeZoom,slideX,turnUp,scrollHorz,toss,uncover,scrollDown,shuffle,wipe,fade',
    timeout: 5000,
        });
});
</script>

Te oraz inne efekty dokładnie opisane i zobrazowane znajdziecie na: Beginner Demos

Mam nadzieję, że ten prosty instruktarz okażę się pomocny.

]]> http://vivee.info/2011/01/01/jquery-cycle/feed/ 14 Tworzenie nowych bloków w panelu administratora http://vivee.info/2010/10/06/tworzenie-nowych-blokow-w-panelu-administratora/ http://vivee.info/2010/10/06/tworzenie-nowych-blokow-w-panelu-administratora/#comments Wed, 06 Oct 2010 12:27:40 +0000 palmiak http://vivee.info/?p=2089 Jestem leniwy. Nie jest to coś godnego pochwały, ale jednak. I tak oto moje lenistwo focha strzeliło podczas pisania jednego z projektów, gdzie musiałem dopisać do każdego wpisu kilka pól użytkownika (custom fields). Po trzecim wpisie foch był już okrutny i postanowiłem jakoś to obejść - najlepiej pisząc pod formularzem edycji wpisu dodatkowy formularz w którym będę miał wypisane wszystkie cf, a wartości przygotowane jako listy rozwijane, żeby tylko sobie wybrać co trzeba. Jako, że jakoś się z tym ogarnąłem to podzielę się teraz tą wiedzą z Wami.

Twórcy WordPressa na szczęście po raz kolejny okazali się bardzo sympatyczni i dodanie takiego ficzerka jest naprawdę proste. Można to zrobić na dwa sposoby - albo poprzez functions.php (czyli będzie to działać tylko z tą skórą w której to napiszemy) albo jako plugin (bardziej uniwersalne).

Pierwszy blok

Najpierw musimy napisać kilka linijek dzięki którym stworzymy nasz nowy blok:

function admin_init(){  
        add_meta_box("testblock", "Fajny Tytuł", "test_block", "post", "advanced", "high");  
}

Funkcja add_meta_box (więcej info tutaj) odpowiada właśnie za tworzenie takich bloków. Kolejno jako parametry podajemy identyfikator, tytuł bloku, funkcję którą ten blok wykona, pod co podpinamy, umiejscowienie oraz ułożenie. Warto poczytać sobie codex, gdyż są tam dokładnie podane z jakich umiejscowień możemy korzystać etc. W naszym przypadku stworzymy blok, który będzie widoczny tylko pod wpisami (post), będzie miał tytuł "Fajny Tytuł" i wywoła funkcję test_block() (której to jeszcze nie napisalismy).

No to czas ją napisać:

function test_block(){
echo 'plum';
}

Jak nietrudno zauważyć w obecnej postaci w bloku powinien się pojawić napis "plum" i już. Jednak to jeszcze nie wszystko, żeby to zadziałało - musimy jeszcze blok zainicjalizować. Robimy to następująco:

if(is_admin()){
        add_action("admin_init", "admin_init");  
}
 

Teraz gdy spojrzymy w panel pod textarea na treść wpisu powinien pojawić się nasz blok a w nim napis "plum".

Zwiększamy funkcjonalność

Niestety radość z pluma szybko mija i warto by zrobić z tego coś bardziej praktycznego. Np. zrobimy sobie formularz za pomocą którego będzie nam łatwiej dodawać custom fields.

function test_block(){
global $post;  
        $custom = get_post_custom($post->ID);  
        $muzyka = $custom["muzyka"][0];  
        $pogoda = $custom["pogoda"][0];
        $reszta = $custom["reszta"][0];  
?>    
    <label>Czego słucham:</label><br/>
    <select name="muzyka">
        <option <?php if($muzyka=='Rock'){ echo 'selected="selected"';} ?>>Rock</option>
        <option <?php if($muzyka=='Pop'){ echo 'selected="selected"';} ?>>Pop</option>
        <option <?php if($muzyka=='Disco Polo'){ echo 'selected="selected"';} ?>>Disco polo</option>
    </select><br/>
    <label>Jaka jest pogoda</label><br/>
    <select name="pogoda">
        <option <?php if($pogoda=='Pada'){ echo 'selected="selected"';} ?>>Pada</option>
        <option <?php if($pogoda=='Leje'){ echo 'selected="selected"';} ?>>Leje</option>
        <option <?php if($pogoda=='Bul bul bul'){ echo 'selected="selected"';} ?>>Bul bul bul</option>
    </select><br/>  
    <label>Napisz coś jeszcze:</label><input name="reszta" value="<?php echo $reszta; ?>" />
<?php  
}

Dzięki temu w skórze pojawi nam się formularz w którym możemy wybrać sobie gatunek muzyki, pogodę i coś tam jeszcze napisać. W obecnej chwili poza wyświetlaniem nic innego nie robi - musimy jeszcze stworzyć funkcję, która wrzuci te zmienne do custom fields oraz poinformować WP, żeby przy każdym zapisie wpisu był łaskaw takową funkcję wywołać.

Najpierw funkcja do zapisu:

function save_cf(){  
    global $post;  
    update_post_meta($post->ID, "muzyka", $_POST["muzyka"]);  
    update_post_meta($post->ID, "pogoda", $_POST["pogoda"]);
    update_post_meta($post->ID, "reszta", $_POST["reszta"]);
}  

Po kolei tworzy lub uaktualnia zawartość kolejnych pól.

A by to wszystkow wywołać poprawiamy to napisaliśmy przy wywoływaniu bloku:

if(is_admin()){
        add_action("admin_init", "admin_init");  
        add_action('save_post', 'save_cf');  
    }
 

Tworzenie nowych bloków w panelu administratora

I już. Wszystko powinno działać jak ta lala :) Teraz Wasza kolej - dopisujcie własne bloki. We wpisach, na stronach, po bokach lub na dole. Róbcie z nimi co chcecie.

]]> http://vivee.info/2010/10/06/tworzenie-nowych-blokow-w-panelu-administratora/feed/ 16 WordPress Plugin – Easing Slider http://vivee.info/2010/10/02/wordpress-plugin-%e2%80%93-easing-slider/ http://vivee.info/2010/10/02/wordpress-plugin-%e2%80%93-easing-slider/#comments Sat, 02 Oct 2010 20:48:37 +0000 agressiva http://vivee.info/?p=2081 Easing Slider to wtyczka umożliwiająca nam umieszczanie na naszej wordpressowej stronie modnego w ostatnim czasie slidera obrazków.

demopobierz

Instalacja:

  • Za pomocą FTP:
    1. Pobieramy wtyczkę z strony www.wordpress.org/extend/plugins/easing-slider/
    2. Poprzez FTP kopiujemy zawartość archiwum do katalogu wp-content/plugins
    3. W panelu administracyjnym w zakładce Wtyczki aktywujemy nową wtyczkę o nazwie Easing Slider
  • Za pomocą automatycznej instalacji
    1. W panelu administracyjnym w zakładce Wtyczki wybieramy z submenu pozycję Dodaj nową
    2. W polu wyszukiwania wtyczek po nazwach wpisujemy Easing Slider, po odnalezieniu jej klikamy na opcję Zainstaluj
    3. Po automatycznym zamieszczeniu wtyczki na serwerze uruchamiamy ją w zakładce Wtyczki.

Po zainstalowaniu wtyczki, pojawi się dodatkowa zakładka w menu WordPressa.

Umieszczanie slidera na stronie:

Slder możemy zamieścić bezpośrednio w skórze, w dowolnie wybranym przez nas miejscu wklejając tą funkcję w kod:

<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>

Mamy też możliwość zamieszczenia slidera w pojedynczym wpisie lub stronie statycznej poprzez shortcode:

[easingslider]

Dodawanie obrazków:

Nowe obrazki które wyświetlane będą w sliderze dodajemy podobnie jak inne media w WP. Po kliknięciu na Upload Image pojawi się nam znane okienko uloadowania plików z komputera. Wszystkie dodane przez nas obrazki do slidera trzymane są w zakładce Media - tutaj możemy nimi bezproblemowo zarządzać.

Po wgraniu obrazka należy skopiować jego adres bezpośredni:

Następnie skopiowany adres pliku wklejamy w pole Image Path:. W polu Image Link: podajemy adres url strony pod jaką mamy być kierowani po kliknięciu na dany obrazek.

Ustawienia slidera:

  • disableShadow - ukrywanie cienia pod sliderem
  • shadowStyle - styl cienia
  • next/prevButtons - pokazywanie buttona "następny", "poprzedni"
  • nextbuttonIcon - zmienia buttona, można podać ścieżkę własnej ikony
  • prevbuttonIcon - zmienia buttona, można podać ścieżkę własnej ikony
  • Slider "width" - szerokość slidera
  • Slider "height" - wysokość slidera
  • paddingBottom - padding dolny
  • paddingTop - padding górny
  • paddingRight - padding prawy
  • paddingLeft - padding lewy
  • backgroundColour - kolor tła pod obrazkami w sliderze
  • startPosition - pierwsza plansza slidera
  • transitionSpeed - czas w jakim widoczny jest jeden obrazek przed zmianą na następny
  • autoPlay - szybkość zmiany obrazków
  • animationStyle - rodzaj animacji / przechodzenia obrazków
  • borderWidth - szerokość bordera / obramowania slidera
  • borderColour - kolor tego obramowania
  • preloadIcon - ikona przed wczytaniem obrazków
  • pagination - pokazywanie stronicowania obrazków
  • paginationPosition - położenie stronicowania
  • paginationIcon (on) - zmienia ikony stronicowania (aktywnej planszy) - należy podać adres obrazka
  • paginationIcon (off) - zmienia ikony stronicowania (nieaktywnej planszy) - należy podać adres obrazka

Przykłady:

]]> http://vivee.info/2010/10/02/wordpress-plugin-%e2%80%93-easing-slider/feed/ 5 WP 3.0 – w końcu porządnie rozwiązane menu http://vivee.info/2010/06/05/wp-3-0-w-koncu-porzadnie-rozwiazane-menu/ http://vivee.info/2010/06/05/wp-3-0-w-koncu-porzadnie-rozwiazane-menu/#comments Sat, 05 Jun 2010 22:12:18 +0000 palmiak http://vivee.info/?p=2050 Jednym z mankamentów WP było od zawsze tworzenie menu. Tzn nie było problemu jeżeli menu składało się tylko z kategorii lub tylko ze stron. Najczęściej jednak łączyło w sobie jedno i drugie. W sumie sposobów na rozwiązanie(lub bardziej ominięcie) tego problemu było sporo, jednak ciężko powiedzieć, żeby kipiały one prostotą. Ja najczęściej stosowałem "sztywne" menu, a podstrony i podkategorie przypinałem w odpowiednich miejscach.

Na szczęście od wersji 3.0 będę sobie mógł to wyklikać i poprzeciągać. I to bez żadnych wtyczek.

Wygląd i obsługa

Wchodzimy sobie w Wygląd(Apperance)>Menus. Osoby, których skóra nie obsługuje jeszcze tych dynamicznie tworzonych menu przywita komunikat "The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.". Nie martwcie się jednak - w następnym rozdziale to wyelminujemy.


WP 3.0 - w końcu porządnie rozwiązane menu

W sekcji 1. mamy wypisane jakie menu już potworzyliśmy, w 2. przyporządkowujemy menu do slotu na takowe, 3. sekcja to klocki z których tworzymy menu, a w 4. wszystko sobie układamy metodą przeciągania.

Dziecinnie proste czyż nie?

Najpierw tworzymy sobie puste menu, a następnie dodajemy kolejne elementy. Jeśli chcemy dodać link do vivee.info to wybieramy sobie Custom links wpisujemy url, etykietkę i klikamy na Add to menu. Jeżeli chcemy je przenieść na inną pozycję po prostu chwytamy i przeciągamy. Z kategoriami i stronami jest nawet prościej bo tylko zaptaszkowujemy co chcemy dodać do menu i po sprawie.

Kiedy już przygotujemy sobie menu, w Theme Locations przypisujemy je do odpowiedniej lokalizacji.

Instalacja

Jako, że już wiemy jakie te menu są fajne, super etc to warto by się nauczyć je uruchamiać.Zacznijmy od sprawdzenia czy w naszej skórze znajduje się plik functions.php, jeżeli go nie ma należy go utworzyć.

W tymże functions.php piszemy:

register_nav_menus( array(
                'main_menu' => 'Główne menu',
                'sidebar_menu' => 'Boczne menu'
) );

Czymś takim deklarujemy, że w naszej skórze będą dwa menu - main_menu i sidebar_menu.

Teraz trzeba te menu przypisać gdzieś w skórze. W odpowiednich miejscach dopisujemy:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location'=>'main_menu' ) ); ?>

oraz

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location'=>'sidebar_menu' ) ); ?>

Od tej chwili mamy już wszystko naszykowane i możemy w pełni cieszyć z nowej funkcjonalności WP 3.0.

Jak przypisać na stałe menu do slotu

Są sytuacje kiedy byśmy chcieli przypisać dane menu do slotu, tak żeby za pomocą panelu nie dało się tego zmienić.
Jest na to bardzo proste wyjście:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu'='glowne', 'theme_location'=>'main_menu' ) ); ?>

Spowoduje to, że naszym głównym menu zawsze będzie menu o nazwie 'glowne'.

Jak stylować

Funkcja wp_nav_menu generując menu dodaje od siebie troszkę id'ów i klas. Jeżeli wywołamy:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location'=>'main_menu' ) ); ?>

to otrzymamy (tak w zarysie) takie coś:

<div class="menu-nazwa_menu-container">
    <ul id="menu-nazwa_menu" class="menu">
        <li><a href="#"></a></li>
        ...
    </ul>
</div>
 

Poza tym znaczniki otrzymają kilka klas, ale nie interesują one nas zbytnio.

Pierwsze co możemy zmienić to kontener - może być on albo jako div albo jako nav. Jeżeli wpiszemy inną wartość to kontener zniknie. Tak więc w zależności od tego co chcemy otrzymać dopisujemy np. 'container'=>'nav'.

Jeżeli byśmy chcieli nadać kontenerowi jakąś inną klasę czy id wystarczy dopisać 'container_class'=>'nazwa_klasy' lub 'container_id'=>'id_kontenera'. W wersji RC1 container_id jeszcze nie działa (patrząc jednak po tym co jest w repozytorium to kolejna wersja wspiera już wszystko poprawnie).

Możemy też użyć 'menu_class'=>'nazwa_klasy', gdyby ktoś chciał zmienić klasę samego menu (czyli ul).

Kolejne co możemy zmodyfikować to zawartość linków w menu. Wszystko to za pomocą link_before i link_after.

Jeżeli zaś chcemy coś umieścić przed lub za linkiem to używamy before lub after.

Nasze menu ze wszystkimi parametrami wygląda tak:

<div class="container_class" id="container_id">
    <ul id="menu-nazwa_menu" class="menu_class">
        <li>before<a href="#">link_before jakiś tekst link_after</a>after</li>
        ...
    </ul>
</div>
 

Podsumowanie

Ciężko jest cokolwiek zarzucić temu rozwiązaniu. Jest to funkcjonlaność, której brakowało, ale sposób w jaki ten brak naprawiono wynagradza tak długie oczekiwanie.

Niebawem kolejne wpisy opisujące nowe funkcje w WordPress 3.0.

]]> http://vivee.info/2010/06/05/wp-3-0-w-koncu-porzadnie-rozwiazane-menu/feed/ 26 Jak za pomocą js poprawić wygląd formularzy http://vivee.info/2010/06/03/jak-za-pomoca-js-poprawic-wyglad-formularzy/ http://vivee.info/2010/06/03/jak-za-pomoca-js-poprawic-wyglad-formularzy/#comments Thu, 03 Jun 2010 23:02:29 +0000 palmiak http://vivee.info/?p=2036 Tworząc strony dość często trzeba powojować z formularzami. Niestety dość często się zdarza współpraca z grafikiem, który o htmlu to za dużo nie wie, a wizje formularzy ma dość... finezyjne (np. ostylowany button przy input type="file"). Wtedy możemy albo zacząć ostro kombinować (background, js, pełna przezroczstość... po prostu cuda) albo powiedzieć, że się nie da. Ostatecznie pozostaje nam użyć Niceforms, czyli skryptu, w którym autor ostro pokombinował za nas.

demo

Jak to działa?

Dla usera - po prostu banalnie. Całość ogranicza się do dopisania linijki (załączenie skryptu) oraz dopisania class="niceform". Dodatkowo jeżeli chcemy zmienić wygląd formatek należy zedytować pliczek psd załączony do archiwum i zapisać obrazki.

Pod maską już się dzieje o wiele więcej rzeczy. Najprościej mówiąc wszystko działa na zasadzie ukrycia pola formularza, utworzenia nowego obiektu, który służy głównie do wyglądania oraz przekazywania wartości wpisywanej/wyklikiwanej w nasz nowy twór do ukrytego już pola.

Taki niestety urok stylowania formularzy i stąd tak kombinacje.

Prosty formularzyk

Najpierw będziemy bazować na tym co otrzymujemy z Niceforms.

Nasz formularzyk będzie banalnym polem do wpisania jakiegoś słowa.

Po pierwsze pobieramy Niceforms ze strony autora: www.emblematiq.com.

W sekcji head dopisujemy:

<script language="javascript" type="text/javascript" src="niceforms.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" />
 

Następnie w body piszemy już formularz właściwy:

<form action="" class="niceform">
  <fieldset>
    <legend>Formularz do napisania czegoś</legend>
    <dl>
      <dt><label for="napisz_cos">Napisz coś</label></dt>
      <dd><input id="napisz_cos" /></dd>
    </dl>
    <dl>
      <dt><input type="submit" name="submit" id="submit" value="Wyślij" /></dt>
    </dl>
  </fieldset>
</form>
 

Najważniejsze jest to class="niceform". I tak oto wygląda najprostsza wersja naszego formularza.

Załączone demo prezentujące wszystkie uroki Niceforms wygląda zaś następująco.

A gdybyśmy chcieli zmienić grafikę?

Potrzebować będziemy Photoshopa by otworzyć pliczek nf-standard-blue.psd. W nim zawarte są wszystkie grafiki związane z formularzem. Dodatkowo przygotowane są linie do cięcia, więc wystarczy wybrać zapisz dla web i zapisać same grafiki. Oczywiście można to zrobić po swojemu, tylko wtedy będzie troszkę więcej zabawy ze stylem. W sumie zabawy z PSem zostawiam Wam.

Opiszę teraz które klasy są używane do których elementów formularzy.

input type="text" - NFText(robi za kontener w którym trzymane są kolejne elementy oraz to właśnie nim stylujemy tekst, który wpisujemy), NFTextCenter(odpowiada za rozciągającą się część tła - czyli środkową). NFTextLeft(odpowiada za lewą krawędź inputa), NFTextRight(odpowiada za prawą krawędź inputa)

input type="checkbox" - NFCheck(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="radio" - NFRadio(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="button" - NFButton(środkowa część przycisku, rozszerzająca się w zależności od ilości tekstu), NFButtonLeft(lewa krawędź przycisku), NFButtonRight(prawa krawędź przycisku)

input type="file" - NFFileButton(fragment udający guzik w file), NFFileNew(nowy input który udaje funkcjonalność lewej części file) dodadkowo wykorzystywane są tutaj NFText oraz NFTextLeft

textarea - NFTextarea(tu wklepujemy zawartość), NFTextareaTop, NFTextareaBottom, NFTextareaTopLeft, NFTextareaTopRight, NFTextareaBottomLeft, NFTextareaBottomRight(poszczególne krawędzie pola), NFTextareaTopH, NFTextareaBottomH, NFTextareaTopLeftH, NFTextareaTopRightH, NFTextareaBottomLeftH, NFTextareaBottomRightH(poszczególne krawędzie po najeździe)

select - NFSelect(kontener dla kolejnych elementów), NFSelectLeft(lewa część selecta - warto się przyjrzeć obrazkom, że zrozumieć jak to jest konstruowane), NFSelectRight(prawa część selecta), NFSelectOptions(czyli to co się pojawia po pliknięciu w selecta - tak naprawdę jest to ul)

select multiple="multiple" - w sumie jest to prawie to co textarea, tylko nazwy zamiast NFTextarea mają na początku NFMultiSelect

Poza tymi klasami mamy kilka dodatkowych, których w większości przypadków ruszać nie należy:
NFfocused - są nadawane elementom na których obecnie jest focus
NFh - przesuwa tło by nadać mu pozycję 0 100% (używane w większości formatek)
NFhr - przesuwa tło by nadać mu pozycję 100% 100% (używane przy select)
NFhidden - ukrywa elementy, ale w taki sposób, że dalej są one funkcjonale (poprzez nadanie pełnej przezroczystości)

Mając opis klas, psd oraz gotowy wzór pozostaje tylko troszkę cierpliwości i powinno się udać.

Jeżeli nie będziecie zmieniać rozmiarów podmiana obrazków będzie bardzo szybkim procesem. W przeciwnym razie będzie trzeba troszkę podrasować arkusz stylu.

Podsumowanie

Jak widzicie stworzenie wymarzonych formularzy dzięki Niceforms jest w sumie prostym i w miarę przyjemnym procesem. Szkoda, że do osiągnięcia takich efektów potrzebne jest sporo tricków dziejących się pod maską. Pozostaję nam więc starać się edukować grafików ze szczególnie ułańską fantazją, żeby akurat przy formularzach troszkę odpuścili.

]]> http://vivee.info/2010/06/03/jak-za-pomoca-js-poprawic-wyglad-formularzy/feed/ 6 Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku http://vivee.info/2010/05/27/tworzymy-indywidualna-strone-startowa-dla-naszych-fanow-na-facebooku/ http://vivee.info/2010/05/27/tworzymy-indywidualna-strone-startowa-dla-naszych-fanow-na-facebooku/#comments Thu, 27 May 2010 13:34:40 +0000 Piotr Sajnog http://vivee.info/?p=2024 Dziś opiszę wam krok po kroku, jak wykonać indywidualną, specjalną stronę startową (landing page) na profilu dla fanów (fanpage) na Facebooku. Jest to strona, którą użytkownicy Facebooka, którzy nie należą jeszcze do grona naszych fanów, zobaczą jako pierwszą po wejściu na nasz profil. Do wykonania tej strony wykorzystamy tzw. Statyczny FBML (Static FBML).

Co to jest Statyczny FBML?

Statyczny FBML (Static Facebook Markup Language) to aplikacja, dzięki której możemy do naszej strony fanowskiej na Facebooku dodawać indywidualne, spersonalizowane zakładki z różną ich zawartością. Dzięki Statycznemu FBML możemy stworzyć zakładkę, na przykład z filmami z YouTube, czy galerią zdjęć z serwisu Flickr. W tym wpisie pokażę jak wykonać prostą stronę powitalną dla gości naszej strony.

Strona startowa krok po kroku

Całą zabawę zaczynamy jednak nie od Facebooka, a od przygotowania w programie graficznym ilustracji, którą zamieścimy na naszej stronie powitalnej. Przy tworzeniu tej grafiki należy pamiętać o dwóch sprawach:

  • szerokość grafiki powinna mieścić się w granicach 800 pikseli, aby zmieściła się w kolumnie
  • najlepiej zapisać ją jako GIF, żeby dość szybko się wczytywała

Przygotowaną grafikę (zobacz moją) przenosimy na nasz serwer i zapamiętujemy do niej link. Tak przygotowani przechodzimy na naszą stronę dla fanów i działamy w następujący sposób:

Wchodzimy na stronę http://www.facebook.com/apps/application.php?=4949752878 i klikamy w link "Dodaj do mojej strony" znajdujący się bezpośrednio pod ilustracją aplikacji po lewej stronie ekranu. Z listy, która się pokaże wybieramy stronę, na której chcemy zamieścić naszą specjalną zakładkę.

Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku

Następnie klikamy w link "Edytuj element Strona" znajdujący się bezpośrednio pod ilustracją naszego profilu,

Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku

a następnie, na liście elementów odszukujemy pozycję FBML-FBML i klikamy w link "Ustawienia aplikacji" i zatwierdzamy dodanie zakładki klikając w przycisk "Okay".

Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku

Teraz w tej samej pozycji FBML-FBML klikamy w link "Edytuj". W oknie, które nam się pokaże wpisujemy:

  • w pozycji "Tytuł boxa" tytuł zakładki, która pokaże się na naszej stronie profilowej
  • w pozycji "FBML" wpisujemy kod HTML, dzięki któremu wyświetli się nam przygotowana wcześniej ilustracja

Następnie klikamy w przycisk "Zapisz zmiany".

Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku

Ostatnia rzecz jaką musimy zrobić to klikamy ponownie w link "Edytuj element Strona" a następnie link "Edytuj" w pozycji "Ustawienia tablicy". Z rozwijanej listy zatytułowanej "Domyślna etykieta dla pozostałych użytkowników" wybieramy zakładkę, którą właśnie skończyliśmy przygotowywać.

Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku

Efekt naszej pracy jest następujący: jeśli ktoś, kto nie należy jeszcze do grona naszych fanów wejdzie na nasz profil, zostanie automatycznie skierowany na stronę z zakładką, którą właśnie stworzyliśmy (zobacz moją), natomiast wszyscy nasi fani jako pierwszą zobaczą stronę z zakładką "Tablica".

Inne możliwości

Jak wspomniałem na początku artykułu dzięki statycznemu FBML możemy stworzyć zakładki, które mogą mieć różną zawartość. Polecam Wam wpis na blogu Hyper Arts, w którym znajdziecie mnóstwo linków do tutoriali wyjaśniających, jak to zrobić.

Podsumowanie

Mam nadzieję, że wpis Wam się spodobał i skorzystacie z niego, aby stworzyć ciekawe strony startowe dla Waszych profili na Facebooku. Chętnie zobaczę Wasze gotowe dzieła :) Jeśli znajdziecie jakieś oryginalne pomysły u innych, podzielcie się linkami w komentarzach.

]]> http://vivee.info/2010/05/27/tworzymy-indywidualna-strone-startowa-dla-naszych-fanow-na-facebooku/feed/ 25 pHAML – inne spojrzenie na rozlazłego HTML’a http://vivee.info/2010/05/16/phaml-inne-spojrzenie-na-rozlazlego-htmla/ http://vivee.info/2010/05/16/phaml-inne-spojrzenie-na-rozlazlego-htmla/#comments Sun, 16 May 2010 01:02:42 +0000 palmiak http://vivee.info/?p=1971 Ostatnio chwaliłem się fajną zabawką do CSS, a mianowicie CSS Scaffold. Dziś zaś przyszła pora na zrobienie czegoś z HTML'em. HAML jest głównie znany osobom, które używają RoRa. Ja taką osobą nie jestem, więc przez długi czas omijałem temat szerokim łukiem.

Jednak któregoś dnia szlag mnie trafił i postanowiłem coś w końcu zrobić, bo efekt mieszania php i HTML'a na dłuższą metę jest tragiczny. Człowiek się gubi gdzie się pętle zaczynają, gdzie kończą i ogólnie jest bajzel. Okazało się, że ktoś był na tyle miły, żeby przeportować HAMLa na php i tak oto powstał pHAML. W porównaniu z oryginałem są pewne różnice, jednak to co najważniejsze zostało zachowane.

Pierwsze starcie

Dzięki pHAML kod ulega dość imponującemu skróceniu. Dla przykładu zobaczmy różnicę między w 'Hello world':

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>hello</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
 
!!! Strict
%html
    %head
        %title hello
    %body
        %p hello world
 

Przeanalizujmy linijka po linijce.
!!! Strict to nic innego jak doctype (koniec kopiowania tego cholerstwa za każdym razem)
%html %head etc - po prostu tagi, tyle że zamiast ich zamykać używamy wcięć.

Na pierwszy rzut wygląda to dziwnie, ale chwila wprawy i zaczyna być fajnie.

Parametry

Przekazywanie parametrów odbywać się może na kilka sposobów. Najbardziej uniwersalnym jest:

%p{class="jaka_klasa jakas_inna_klasa" id="unikalny_id" style="color:red"}
 

Jak się zapewne domyślacie w rezultacie otrzymamy:

<p class="jaka_klasa jakas_inna_klasa" id="unikalny_id" style="color:red"></p>
 

Klasy i idy możemy jednak przekazywać w troszkę krótszej formie:

%p.jaka_klasa.jakas_inna_klasa#unikalny_id{style="color:red"}
 

Po prostu po kropkach wymieniamy klasy a po # id.

Pewnym wyjątkiem jest div, gdzie nie trzeba pisać nazwy taga:

.jaka_klasa.jakas_inna_klasa#unikalny_id{style="color:red"}
 

jest równoznaczne z:

%div.jaka_klasa.jakas_inna_klasa#unikalny_id{style="color:red"}
 

Kilka przykładów na potwierdzenie, że HAML fajny jest

Do myków, które mi się strasznie podobają należą na pewno listy:

%ul
            %li raz
            %li dwa
            %li trzy
            %li
                %ul
                    %li trzy jeden
 

W końcu wygląda to czytelnie, szczególnie zagnieżdżenia.

Bardzo przyjemnie wyglądają też tabele:

%table
            %tr
                %th id
                %th imię
                %th nazwisko
            %tr
                %td 1
                %td maciek
                %td kowalski
            %tr
                %td 2
                %td andrzej
                %td nowak
 

Znaki specjalne

\ - wyświetla wiersz dosłownie taki jaki jest.
<<< oraz >>> - wyświetla zawartość dokładnie taką jaką jest znajdującą się między tymi znakami
/ - zamienia wiersz na typowy htmlowy komentarz
// - komentarz, ale niewidzoczny w htmlu

A jak tu php wrzucić?

Najprościej mówiąc - za pomocą myślnika:

- for($x=1; $<=1 ;$x++ {
   %p hello
- }
 

to nic innego jak:

<?php for($x=1; $<=1 ;$x++ { ?>
<p>hello</p>
<?php } ?>
 

Jednak różnica jeśli chodzi o czytelność dość spora.

Wywoływanie

Pokazałem już jak pisanie w HAMLu wygląda, teraz czas to jakoś uruchomić. Najpierw pobieramy ze strony twórcy odpowiednie archiwum. Następny krok to rozpakowanie zipa.

Kiedy już wszystko mamy przygotowane tworzymy sobie plik np test.php a w nim piszemy:

<?php include('class.pHAML.php');
$template ='!!! Strict
%html
    %head
        %title hello
    %body
        - for($i=0;$i<=10;$i++){
            %p
                - echo $i."<br/>";
        - }
';
$pHAML = new HAMLatin();
$content = $pHAML->render($template);
$content = $pHAML->renderPHP($content);
echo $content;
 

Całą treść przypisujemy sobie do jakiejś zmiennej a potem przekazujemy jako parametry dla render i renderPHP.

Jeżeli uzywamy tylko htmla, nie jest potrzebna linijka $content = $pHAML->renderPHP($content);.

Zachęcam do zabawy, bo wywoływanie tego można zrobić na wiele wygodniejszych sposobów.

Drobne bugi

Wersja dostępna na phaml.sourceforge.net ma w sumie dwie wady. Jedna to taka, że wszystkie tagi traktuje jako podwójne, a druga, że stosuje notację htmlową, a nie xhtmlową.

Na szybko poprawiłem te dwie rzeczy i tagi pojedyncze zamyka poprawnie, a kwestię html/xhtml rozwiązałem poprzez dopisanie zmiennej $is_xhtml. Uprzedzam, że były to poprawki na szybko lecz nie zauważyłem żeby coś nie działało/działało źle. Plik do pobrania stąd.

Podsumowanie

Muszą przyznać, że (p)HAML jest fajnym wynalazkiem. Strasznie upraszcza widok HTMLa. Szkoda jednak, że pod PHP nie ukazała się żadna porządna i ciągle rozwijana implementacja (ta prezentowana tutaj nie sprawia już wrażenie rozwijanej) Pod tym względem muszę przyznać, że jest to coś czego programistom od Ruby'ego można pozazdrościć.

A Wy jakie znacie i polecacie substytuty zwykłego (x)HTML'a?

]]> http://vivee.info/2010/05/16/phaml-inne-spojrzenie-na-rozlazlego-htmla/feed/ 12 Drupal – szybki start http://vivee.info/2010/04/25/drupal-szybki-start/ http://vivee.info/2010/04/25/drupal-szybki-start/#comments Sun, 25 Apr 2010 20:53:33 +0000 designconcept http://vivee.info/?p=1894 Drupal jest systemem zarządzania treścią, który umożliwia łatwe publikowanie i zarządzanie zawartością witryny. System wykorzystuje język PHP, współpracuje z bazami danych MySQL i PostgreSQL oraz serwerami Apache i IIS.

Instalacja

Najpierw pobieramy Drupala i polski pakiet językowy ze strony: http://drupal.org/
Rozpakowujemy archiwum do głównego katalogu na serwerze. Moim serwerem będzie localhost.
Wchodzimy na stronę http://localhost/drupal-6.15/
Naszym oczom ukazuje się widok.

Drupal - szybki start

Tu mamy wybór czy chcemy korzystać z angielskiej czy innej wersji językowej. Ja wyrażam chęć instalacji innej wersji językowej.
Rozpakowujemy paczkę językową do katalogu z drupalem. Następnie korzystając z linku powrotnego przechodzimy do ekranu wyboru języka i wybieramy język polski.

Drupal - szybki start

Następnie pojawia się ekran:

Drupal - szybki start

Postępujemy zgodnie z opisem na tej stronie.
Po stworzeniu pliku konfiguracyjnego można dalej instalować drupala. Klikamy na spróbuj ponownie.
Naszym oczom ukazuje się okno konfiguracji bazy danych.

Drupal - szybki start

Wybieramy typ, nazwę i użytkownika bazy danych. Możemy tez ustawić zaawansowane opcje dotyczące m.in. hosta bazy danych, portu oraz prefiksu dla tabel. Należy pamiętać aby wybrać istniejącą na serwerze bazę danych. Trwa instalacja drupala… :)

Drupal - szybki start

Konfiguracja

Teraz konfigurujemy witrynę.

Drupal - szybki start

Tworzymy konto administratora. Jeśli na serwerze mamy włączony moduł mod_rewrite możemy włączyć tzw. przyjazne URL-e. Wtedy linki typu /?q=node/5 będą zamieniane na /node/5.
Otrzymujemy informację, że instalacja Drupala przebiegła pomyślnie. Możemy teraz odwiedzić stronę i zalogować się jako administrator.

Moduły

Drupala można wzbogacać o nowe funkcje za pomocą tzw. "modułów". Cały system jest złożony z modułów. Niektóre z nich są dostępne od razu po instalacji, a inne trzeba dodatkowo pobrać. Zajmiemy się teraz aktywacją wybranych modułów. W tym celu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/modules i zaznaczamy moduły, których chcemy używać.

Pobierzemy kilka dodatkowych modułów:
http://drupal.org/project/admin_menu
http://drupal.org/project/pathauto
http://drupal.org/project/token
http://drupal.org/project/cck
CCK - służy do wzbogacenia naszej treści o nowe pola, w które uprawnione osoby będą mogły wpisywać dane dodając treść do naszej witryny.
http://drupal.org/project/views
Views - to moduł, który pozwala w praktycznie dowolny sposób generować listy i tabele z elementów taksonomii systemu.

Pobrane moduły należy umieścić w katalogu sites/all/module naszej witryny. Zajmiemy się teraz aktywacją wybranych modułów. W tym celu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/modules i zaznaczamy moduły, których chcemy używać. Jeżeli folder module nie istnieje należy takowy stworzyć. Na powyższej stronie zaznaczamy następuje moduły

  • Administration - Administration Menu
  • Core - Blog
  • Core - Contact
  • Core - Path
  • Content - Content
  • Content - Text
  • Other - Pathauto
  • Other - Token
  • Views - Views
  • Views - Views UI

a następnie klikamy zachowaj konfigurację.

Rodzaje zawartości

Wchodzimy na stronę http://localhost/drupal-6.15/admin/content/types. Możemy tu tworzyć, edytować i usuwać różne rodzaje zawartości. Są one umieszczone w tabelce, w której znajduje się nazwa, typ i opis rodzaju zawartości. Domyślnie dysponujemy trzema rodzajami: blog, strona i artykuł. Stworzymy nowy typ – link. Będzie on zawierał url, tytuł i krótki opis. Klikamy na nowy rodzaj zawartości (http://localhost/drupal-6.15/admin/content/types/add). W pole nazwa wpisujemy Link, typ – link (typ może się składać jedynie z małych liter, liczb i znaków podkreślenia) oraz dodajemy krótki opis. Następnie określamy ustawienia formularza dodawania zawartości tak jak na poniższym rysunku.

Drupal - szybki start

Pozostaje nam jeszcze określenie cech rodzaju zawartości oraz ustawienia odpowiedzi czyli popularnych komentarzy. Ustawiamy opcję „do publikacji”, a odznaczamy „na stronie głównej” co oznacza brak automatycznej promocji na stronie głównej. W ustawieniach odpowiedzi zaznaczamy opcję „Wyłączony”, co oznacza, że nie będzie można dodawać komentarzy. Po kliknięciu zachowania rodzaju zawartości zostaniemy przekierowani z powrotem do tabelki z rodzajami zawartości. Widnieje już tam nowy dodany przed chwilą rodzaj – link. Kliknijmy na odnośnik „manage fields” dotyczący rodzaju zawartości link. Dodamy teraz nowe pole url.

Drupal - szybki start

Po kliknięciu zachowaj można jeszcze ustawić dodatkowe opcje. My pozostawiamy ustawienia domyślne.
Dodamy teraz kilka linków. W tym celu wchodzimy na stronę dodawania zawartości: http://localhost/drupal-6.15/node/add, wybieramy z dostępnych opcji Link i uzupełniamy pola formularza.

Drupal - szybki start

Drupal - szybki start

Utworzony link możemy zobaczyć pod adresem: http://localhost/drupal-6.15/content/wp .

Widoki i dodawanie zawartości

Views to moduł, który pozwala w praktycznie dowolny sposób generować listy i tabele z elementów taksonomii systemu. Moduł ten jest dość rozbudowany. My stworzymy na początek widok listy linków. Wejdźmy zatem na stronę http://localhost/drupal-6.15/admin/build/views. Następnie klikamy na zakładkę „dodaj”.

Drupal - szybki start

Podajemy nazwę widoku (może ona zawierać tylko znaki alfanumeryczne i podkreślenia) np. lista_linkow. Wprowadzamy też krótki opis widoku oraz tag widoku (w naszym przypadku może to być np. linki). Jako typ widoku pozostawiamy zaznaczony segment. Klikamy na przycisk „Następne”. Mamy tu dostęp do określenia formy widoku. Na początek wybieramy z rozwijanego menu po lewej „Strona”, co oznacza że chcemy wypisać nasze linki na pełnej stronie. Z ustawień podstawowych zmieniamy nazwę, tytuł oraz styl rzędu (zmieniamy na segment). Klikamy na przycisk „dodaj podgląd” znajdujący się w lewej części strony (pod listą rozwijaną). Teraz określimy ustawienia strony: ścieżkę i menu. Ustawiamy ścieżkę na „linki” – oznacza to, że strona z linkami będzie widoczna (oczywiście dla naszej obecnej instalacji) pod adresem http://localhost/drupal-6.15/linki. W przypadku ustawień menu wybieramy „zwykły wpis menu”, w pole tytuł wpisujemy „Linki” oraz z listy rozwijanej wybieramy „Odnośniki podstawowe”.

Teraz ograniczymy nasz widok do wyświetlania tylko elementów typu link. W ostatniej kolumnie na stronie edycji klikamy na znak plusa przy napisie „Filtry”. Z długiej listy rozwijanej, która pokaże się poniżej zaznaczamy opcję Segment: Typ i klikamy przycisk „dodaj”. Następnie wybieramy typ segmentu „odnośnik”. Po całej konfiguracji strona powinna wyglądać podobnie do widocznej poniżej.

Drupal - szybki start

Na koniec zapisujemy widok klikając na przycisk „Zachowaj”.
Łatwo zauważyć, że w górnej części strony pojawił się pierwszy odnośnik menu „Linki”. Prowadzi on do naszego widoku linków.

Drupal - szybki start

Teraz stworzymy stronę główną. Klikamy na link dodaj zawartość i z dostępnych typów wybieramy – Strona.

Drupal - szybki start

W pole tytuł wpisujemy tytuł strony np. Strona główna. W pole tekst odnośnika menu wpisujemy np. Główna (jest to tekst widoczny na linku do strony). W polu select pozostawiamy wybraną opcję odnośniki podstawowe. Pozostaje tylko uzupełnić treść i kliknąć przycisk „Zachowaj”. W górnym menu obok „Linki” powinien pojawić są odnośnik „Główna”.

Zbudujemy teraz formularz kontaktowy dla naszej witryny. Wybieramy z menu „Zarządzaj”, a następnie „Formularz kontaktowy” (znajduje się on w boxie Budowa witryny) lub od razu wchodzimy na adres http://localhost/drupal-6.15/admin/build/contact. Klikamy na „Dodaj kategorię”. Pojawia się formularz, który trzeba uzupełnić. W pole kategoria wpisujemy nazwę formularza np. Formularz kontaktowy. Następnie wpisujemy adres lub adresy e-mail, na które formularz ma być wysłany. Na samym dole wybieramy jeszcze z menu rozwijanego „Tak”, aby formularz był domyślnym formularzem kontaktowym na stronie i klikamy „Zachowaj”. Stworzony formularz możemy zobaczyć na stronie http://localhost/drupal-6.15/contact.

Drupal - szybki start

Przydałoby się dodać do naszego górnego menu odnośnika prowadzącego do formularza kontaktowego. W tym celu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/menu-customize/primary-links. (Zarządzaj > Budowa witryny > Menu > Odnośniki podstawowe).

Drupal - szybki start

Wybieramy „Dodaj element” i uzupełniamy formularz. W pierwsze pole wpisujemy ścieżkę do formularza kontaktowego (tzn. wszystko za http://localhost/drupal-6.15/). Następnie podajemy tekst odnośnika menu. Pozostałe pole pozostawiamy niezmienione.

Drupal - szybki start

Dodatkowo można zmienić kolejność odnośników w menu metodą przeciągnij i upuść. Jak widać na poniższej ilustracji przesunęłam odnośnik Kontakt na koniec.

Drupal - szybki start

Na pewno zauważyłeś/aś, że po wejściu na naszą drupalową witrynę http://localhost/drupal-6.15/ pojawia się domyślna strona startowa zaczynająca się od słów „I tak powstała nowa drupalowa witryna!”. Czas to zmienić. Chcemy aby domyślnie pojawiała się nasza strona główna. Najpierw przejdźmy na naszą stronę główną klikając odnośnik Główna w menu. Następnie wybieramy Edytuj i patrzymy na pasek adresu. U nas powinien wyglądać następująco: http://localhost/drupal-6.15/node/3/edit. Dla nas najważniejsza jest cyfra 3. Przechodzimy teraz na stronę Zarządzaj > Konfiguracja witryny > Podstawowe dane (bezpośredni link: http://localhost/drupal-6.15/admin/settings/site-information). Na samym dole formularza wpisujemy w pole domyślna strona główna adres: http://localhost/drupal-6.15/node/3 i klikamy przycisk „Zachowaj konfigurację”.

Drupal - szybki start

Dodamy teraz kilka blogowych notek. Wchodzimy na „Dodaj zawartość” i wybieramy „Wpis w blogu”. Pojawia się formularz, który trzeba uzupełnić. Podajemy tytuł i treść wpisu, a resztę opcji pozostawiamy bez zmian. Zachęcam jednak do zapoznania się z nimi w wolnej chwili :) .

Drupal - szybki start

W celu dodania odnośnika do blogowych wpisów w górnym menu wchodzimy na stronę http://localhost/drupal-6.15/admin/build/menu-customize/primary-links/add i w formularzu w polu ścieżka wpisujemy blog. Uzupełniamy jeszcze pole „Tekst odnośnika menu” i klikamy „Zachowaj”.

Drupal - szybki start

Skórki

Drupal oferuje zmianę domyślnego wyglądu strony. W tym celu wchodzimy na stronę Zarządzaj > Budowa witryny > Skórki. Pojawia się poniższa strona.

Drupal - szybki start

Możemy tu określić, które ze skórek powinny być dostępne dla użytkowników, a także, która skórka ma być domyślną. Między innymi na stronie http://drupal.org/project/themes dostępnych jest wiele skórek tworzonych przez użytkowników Drupala. Wejdźmy na powyższą stronę i pobierzmy jakąś skórkę (ja pobrałam skórkę Acquia Slate). Należy pobraną paczkę rozpakować do katalogu themes. Gdy ponownie wejdziemy na stronę http://localhost/drupal-6.15/admin/build/themes będzie już możliwość wyboru nowej skórki.

---
Zapraszam na moje portfolio.

]]> http://vivee.info/2010/04/25/drupal-szybki-start/feed/ 13 CSS Scaffold – czyli CSS po ludzku http://vivee.info/2010/04/23/css-scaffold-czyli-css-po-ludzku/ http://vivee.info/2010/04/23/css-scaffold-czyli-css-po-ludzku/#comments Fri, 23 Apr 2010 09:18:25 +0000 palmiak http://vivee.info/?p=1864 Arkusze stylu pisuję dość często - taka praca. W sumie nawet to przyjemne. Kłopoty pojawiają się gdy zaglądam po dłużym okresie czasu i dochodzę do wniosku, że jestem zupełnie zagubiony i po prostu dopisuję jakiegoś ida na końcu. I tak się pojawia bałagan. Próbowałem pisać style wieloma metodami, niestety problem w pewnym momencie zawsze się pojawiał, aż do odkrycia CSS Scaffold.

CSS Scaffold, jak opisuje autor, jest CSSowym frameworkiem napisanym w PHP. Tyle, że w przeciwieństwie do innych CSSowych frameworków (960, Blueprint) zmiast ograniczać rozszerza możliwości styli. Brzmi fajnie? Ba - jest fajne, jest po prostu bardzo fajne.

Wymagania i instalacja

Jedyne czego będziemy potrzebować to PHP 5+.

Instalacja może być dla niektórych troszkę upierdliwa. W sumie jednak ogranicza się do pobrania najnowszej wersji ze strony, rozpakowania oraz przekopiowania z archiwum katalogu (katalogu, a nie zawartości) scaffold do katalogu w którym będziemy trzymać arkusze stylu. Czasem(zależne od serwera) trzeba katalogom cache i logs nadać prawa 777.

W praktyce układ katalogów powinien wyglądać następująco:

CSS Scaffold - czyli CSS po ludzku

Osoby które chcą, żeby adresy do CSSów wyglądały normalnie muszą jeszcze w katalogu w którym trzymają CSS utworzyć plik .htaccess a w nim wkleić

 <IfModule mod_rewrite.c>
RewriteEngine   on
RewriteCond             %{REQUEST_FILENAME}             -f
RewriteCond     %{REQUEST_URI}                  \.css$
RewriteRule     ^(.+)$                                  scaffold/index.php?f=%{REQUEST_URI}&%{QUERY_STRING}
</IfModule>

Żeby zrobić próbę czy wszystko działa należy w naszym katalogu z CSSami (dla przykładu będzie to katalog css) utworzyć plik test.css a w nim napisać (zagnieżdzenie jest poprawne - dojdziemy do tego):

body {
        color:red;

                a {
                        color:blue;
                }
}

i wywołać w przeglądarce albo adres_strony/css/scaffold/index.php?f=css/test.css albo, jeżeli użyliśmy regułki w .htaccess, adres_strony/css/test.css. Jeżeli przywita Was komunikat, że nie może znaleźć pliku pomajstrujcie przy ścieżce.

Jeżeli jednak wszystko zadziałało ok to powinniście zobaczyć następujący styl:

body
{
        color: red;
}

body a
{
        color: blue;
}

Bazując na naszym obrazku i zakładając, że nasz adres to test.pl ścieżką do stylu będzie albo http://test.pl/css/scaffold/index.php?f=css/style.css lub http://test.pl/css/style.css.

Jeżeli wszystko działa na naszej stronie wklejamy:

<link rel="stylesheet" href="css/scaffold/index.php?f=css/style.css" type="text/css" />
 

lub

<link rel="stylesheet" href="css/style.css" type="text/css" />
 

Jeżeli wolicie możecie użyć ścieżek absolutnych.

Na koniec drobne ale. Jeżeli nie używacie .htaccess i planujecie używać pierwszej wersji to w przypadku gdy nasza strona znajduje się na tym test.pl w katalogu moja_stronka to ścieżka do stylu będzie wyglądać następująco http://test.pl/moja_stronka/css/scaffold/index.php?f=moja_stronka/css/style.css

Zagnieżdżenia

Jak już zauważyliście w poprzednim przykładzie możemy zagnieżdżać kolejne regułki. Dla przykładu kod na listę nieuporządkowaną z linkami i bez kropek.

ul {
        list-style:none;

        li {
                padding: 5px;

                a {
                        text-decoration:none;

                        &:hover {
                                font-weight:bold;
                        }
                }

        }
}

wypluje to nam oczywiście:

ul
{
        list-style: none;
}

ul li
{
        padding: 5px;
}

ul li a
{
        text-decoration: none;
}

ul li a:hover
{
        font-weight: bold;
}

Stałe

To jest jedna z tych funkcji za które bardzo polubiłem CSS Scaffold. Bardzo często się zdarza, że klient sobie wymyśli, że kolor czcionki, który to użyliśmy w wielu miejscach jest jednak do bani i chce inny. Znajdź/zastąp i jedziemy, ale tu mozna prościej. Jeżeli używamy jednego koloru to zdefinijmy go jako stałą i najwyżej poprawiajmy w jednym miejscu.

Wystarczy w naszym CSS napisać:

@constants{
kolor_tekstu: #ccc;
kolor_ramki: red;
}

a następnie gdy chcemy skorzystać:

body {
color:$kolor_tekstu;
border:1px solid $kolor_ramki;
}
 

Mixins

Czasem zamiast jednego koloru byśmy chcieli wstawiać pewne stałe fragmenty kodu. Nic trudnego:

=test {
color:red;
font-weight:bold;
}

Żeby teraz ten kod wkleić wystarczy do jakiejś naszej regułki dopisać:

body {
+test;
}
 

W rezultacie otrzymamy:

body
{
        color: red;
        font-weight: bold;
}

Prawdziwa siła tkwi jednak w mozliwości parametryzacji. Jeżeli na stronie wszystkie nasze bordery są tego samego stylu i wielkości a tylko kolor się różni to wystarczy nam:

=ramka($kolor) {
        border:1px solid $kolor;
}

A wywołamy to następująco:

#test1 {
        +ramka(red);
}
 
#test2 {
        +ramka(blue);
}

W rezultacie otrzymamy:

#test1
{
        border: 1px solid red;
}

#test2
{
        border: 1px solid blue;
}

Możlwe jest jeszcze ustalenie wartości domyślnej:

=ramka($kolor=black) {
        border:1px solid $kolor;
}

Wtedy wywołanie bez parametru spowoduje automatycnze użycie czarnego.

Liczenie

Ta funkcjonalność jest może troszkę mniej szpanerska, ale czasem bardzo przydatna. Jeżeli mamy div o szerokości 100px i zaczynamy dodawać padding to musimy ciągle poprawiać szerokość (width+padding=100). Scaffold policzy to za nas:

div {
padding:0 5px;
width:calc(100-2*5)px;
}

Nic nie szkodzi nam na przeszkodzie, żeby użyć w środku stałych, czy użyć parametru.

Jeżeli...

Na koniec jeszcze jedna ciekawa zabawka czyli instrukcja if. Piszemy mixin (jak ktoś ma pomysł na odpowiednik to bardzo zachęcam) o nazwie default_div który ma tam sobie jakieś właściwości oraz parametr round, który przyjmuje true lub false. W zależności od round doklejamy kilka regułek lub nie:

=default_div($round=false) {
        padding:10px;
        margin:2px;
 
        @if($round === true) {
                +border-radius(5px);
        }
}

border-radius to już taki gotowy mixin, który zajmuje się zaokrągleniami.

Cache

Kiedy już skończymy tworzenie naszego stylu pozostaje nam włączyć cache (bo po ciągle ma być generowany na nowo ten sam plik) - żeby to zrobić wystarczy otworzyć plik config.php i przestawić define('SCAFFOLD_PRODUCTION',false); na define('SCAFFOLD_PRODUCTION',true);.

Czy to wszystko?

Nie. Oczywiście, że nie. CSS Scaffold posiada także sporo ciekawych opcji a'propos gridów, wiele ciekawych mixinów, flagi, zastępowanie tekstu obrazkami (bardzo fajnie zrobiona funkcja) oraz wiele innych. Do tego mamy jeszcze możliwość dopisywania własnych rzeczy.

Oczywiście trzeba sobie zdawać sprawę, że takie podejście do styli ma swoje wady - każdy nasz plik ze stylem jest obrabiany pzez PHP, wystarczy, że admin nam zrobi prezent w postaci niespodziewanego upgrade'u do wersji w której CSS Scaffold przestanie działać.

Dodatkowo osoba, której przekażemy taką stronę może się zdziwić jak zobaczy co jest w arkuszu.

Zawsze też istnieje możliwość olania projektu przez autora. W obecnej chwili wszystko zdaje się działać stabilnie jednak, jak już wspominałem, przy nowych wersjach PHP teoretycznie mogą się zacząć dziać cuda.

Jest to też pewne dodatkowe obciążenie po stronie serwera, jednak sprawnie działający cache zapewnie rozwiązuje ten problem (przyznaję, iż nie testowałem na stronie o dużym ruchu).

Mimo wszystko polecam spróbować - dla mnie jest to ogromne ułatwienia.

]]> http://vivee.info/2010/04/23/css-scaffold-czyli-css-po-ludzku/feed/ 12 Adobe Kuler – wejdź w kulerowy świat http://vivee.info/2010/02/08/adobe-kuler-wejdz-w-kulerowy-swiat/ http://vivee.info/2010/02/08/adobe-kuler-wejdz-w-kulerowy-swiat/#comments Mon, 08 Feb 2010 11:45:35 +0000 levre http://vivee.info/?p=1784 Kolory są jedynym z najważniejszych elementów każdego projektu i zapewne każdy miał problem z doborem odpowiedniej a zarazem optymalnej palety kolorów. Problem znika jeśli klient przedstawi nam w specyfikacji danego projektu odpowiedni schemat kolorów. Ale co zrobić jeśli tak się nie stanie i jesteśmy zdani sami na siebie.
W ten czas powinniśmy skorzystać z generatora kolorów, który opracuje nam odpowiednie palety kolorystyczne. Jednym z lepszych produktów jest Kuler opracowany przez zespół Adobe Labs.

Adobe Kuler to przede wszystkim baza kilkunastu tysięcy zestawów kolorów. Posiada możliwość podawania a zarazem wyświetlania kolorów w przestrzeniach barw RGB, CMYK , LAB, HSV oraz w zapisie szesnastkowym HEX. Samodzielne stworzenie optymalnych palet może jednak sprawiać problemy, dlatego Adobe przygotowało kilka gotowych układów, tak więc wystarczy je zmodyfikować by otrzymać estetyczny układ. Przydatna jest też wyszukiwarka , która pomoże nam odszukać kolory które zostały opisane odpowiednimi słowami kluczowymi (np. orange, light, fresh itp). Serwis jest anglojęzyczny więc najlepiej wyszukiwać kolorowy poprzez angielskie tagi.


Adobe kuler – strona główna

Jeśli nie mamy ochoty, bądź czasu na to by wyszukiwać z pośród tysięcy kompozycji barwnych tej odpowiedniej mamy możliwość stworzenia własnej w parę chwil. Do stworzenie nowej palety kolorystycznej posłuży nam bardzo przyjemny, funkcjonalny a zarazem intuicyjny panel użytkownika.
Aby w pełni wykorzystać możliwości Kulera, należy wcześniej się zarejestrować. Wchodzimy zatem na stronę www.kuler.adobe.com a następnie klikamy na link Register i podajemy niezbędne informacje. Chciałbym podkreślić iż konto założone w systemie Adobe oferuje nam możliwość korzystania z wszystkich produktów Adobe (np. Kuler, Acrobat, Photoshop.com itp.)

Jeśli chcemy stworzyć nową paletę kolorów, wybieramy z lewego menu strony Create a następnie From a Color bądź From an Image.

From a Color

Dzięki tej opcji mamy większe pole manewru w tworzeniu nowego zestawu kolorów. Na samym początku musimy określić kolor bazowy. Aby to zrobić musimy wpisać wartości liczbowe np. CMYK lub RGB w dolnej części okna w jednej z podstawowych przestrzeni barw, albo za pomocą suwaków, które znajdują się poniżej próbki.Po wybraniu koloru bazowego, musimy kliknąć na polecenie Set a Base znajdujące się nad próbką. Spowoduje to zapamiętanie koloru jako podstawę tworzonej palety.

Gdy już ustalimy podstawowy kolor zestawu, możemy wybrać typ tworzonej palety. Kuler w swoim mechanizmie posiada kilka podstawowych rodzajów palet.


Adobe kuler – główny panel zarządzania kolorami

  • Analogous- paleta analogowa, gdzie kolory sąsiadują ze sobą na kole barwnym (kolorów).Kuler dobiera do wprowadzonego koloru bazowego , kolory z nim sąsiadujące. Barwy charakteryzują się niskim kontrastem.
  • Monochromatic- paleta monochromatyczna , podstawowym kolorem jest kolor bazowy oraz jego najjaśniejsze i najciemniejsze odcienie. Barwa posiada najwyższy kontrast, jaki jest możliwy do uzyskania w całej przestrzeni barwnej. Kontrast uzyskamy pomiędzy najjaśniejszymi a najciemniejszymi odcieniami..
  • Triad- paleta triadowa, tworzą ją jak wskazuje nazwa trzy kolory , które znajdują się na kole kolorów w równych odległościach od ciebie (60°). Paleta pozwala uzyskać kolory pierwszorzędnych (żółty, czerwony, niebieski) , oraz drugorzędnych (pomarańczowy, zielony i fioletowy).
  • Complementary- paleta komplementarna, tworzą ja dwa kolory leżące naprzeciwko siebie na palecie barwnej. Na przykład pary kolorów: czerwony –zielony , bądź niebieski – żółty. Barwy posiadają wysoki kontrast.
  • Compound- paleta Compound jest podobna do poprzedniej ale z uwzględnieniem wielu odcieni koloru bazowego i przeciwnego.
  • Shades- paleta Cienie – reguła dobierania kolorów jest podobna jak w palecie monochromatycznej. Lecz jej odmienność polega na tym iż paletę monochromatyczną tworzy kolor bazowy wraz z najjaśniejszymi i najciemniejszymi odcieniami. Natomiast w przypadku palety Shades paletę tworzy kolor bazowy wraz z ciemniejszymi od niego odcieniami.
  • Custom- paleta niestandardowa, która pozwala na samodzielne zdefiniowanie zestawu kolorystycznego.

From an Image

Bardzo przydatną funkcją Kuler’a jest tworzenie palety kolorów na podstawię fotografii. Zdjęcie możemy uploadować za pomocą przycisku Upload New Image, obsługiwane formaty plików to (.jpg, .png oraz .bmp).Mamy także możliwość wgrania zdjęcia z serwisu Flickr.

Po załadowaniu zdjęcia Kuler tworzy paletę kolorów z przypadkowych barw zawartych na fotografii. Na danym zdjęciu pokazane są miejsca próbkowania, aczkolwiek w razie konieczności mamy możliwość przesunięcia próbnika w dowolne miejsce obszarze zdjęcia. Ta funkcja również posiada opcjonalne typy palety (Colorful, Wright, Muter, Deep, Dark).


Adobe kuler – upload zdjęć z dysku i z serwisu Flickr

Pobieranie i wczytywanie palety kolorów w produktach Adobe

Adobe Kuler umożliwia nam również pobieranie stworzonej przez nas palety kolorów na dysk twardy. Pliki zapisywane są z rozszerzeniem .ase. Wówczas mamy możliwość wgrania gotowych palet do Photoshopa, InDesigna czy też Illustratora. Aby pobrać paletę należy, wybrać interesujący nas zestaw kolorów, a następnie kliknąć na przycisk (Adobe Download this Theme as an Adobe Swat Exchange file).

  • Wczytywanie palety w Photoshopie- Kiedy mamy zapisaną paletę na dysku, i chcemy ją importować do Photoshopa, musimy upewnić się czy mamy włączony panel Swatches (Próbki). Jeżeli nie jest włączony, możemy go aktywować z menu kontekstowego Window> Swatches. Następnie w panelu z Próbkami z rozwijanego menu wybieramy Load Swatches (Załaduj Próbki) lub Replace Swatches (Zmień Próbki) dzięki czemu na palecie będą widniały tylko kolory z wczytanego pliki który pobraliśmy z Kuler’a. W przypadku kiedy będziemy chcieli zresetować wszystkie dostępne próbki należy wybrać z listy opcje Reset Swatches (Resetuj Próbki).

  • Wczytywanie palety do Indesgina i Illustratora- Na podobnej zasadzie będziemy wczytywać palety kolorów do Indesigna czy też Illustratora. Ponownie wybieramy panel Swatches (Próbki) z rozwijanego menu wybieramy Open Swatches Library> Other Library (Otwórz bibliotekę próbek> Inna biblioteka) a następnie wybieramy zapisany plik z paletą. Co ciekawe w Illustratorze wgrana paleta nie jest dodawana do pozostałych próbek, tak jak było to w przypadku Photoshop’a, lecz tworzony jest nowy panel.

Kuler na pulpicie i bezpośrednio w programie

Adobe postarało się i wydało aplikację którą instalujemy na naszym komputerze. Działa ona w środowisku Adobe Air. Dzięki tej aplikacji mamy możliwość np. przeglądania najnowszych, najbardziej popularnych, zestawów kolorów, a także stworzonych przez nas samych palet. Można ją pobrać ze strony Adobe.com

Oprócz tego w każdym produkcie Adobe  (Photoshop, Indesign, Illustrator itd.) jest możliwość włączenia panelu Kuler, wybierając z menu Window> Extensions> Kuler. Posiada on takie same właściwości jak aplikacja którą instalujemy na naszym komputerze.

]]> http://vivee.info/2010/02/08/adobe-kuler-wejdz-w-kulerowy-swiat/feed/ 7