blog.bstankowski.pl - freelance, web-dev & Mac blog

QuickTip: kolejka animacji z jQuery.each() i setTimeout()

Sun, 06 Dec 2009 15:40:43 +0100

Jakiś czas temu chciałem korzystając z funkcji each() w jQuery wyświetlić serię załadowanych AJAXem elementów jeden po drugim, z opóźnieniem po każdym kolejnym. Trafiłem na kilka różnych sposobów, ale żaden mnie nie zadowalał. O wiele za bardzo komplikowały prostą sprawę.

Dzisiaj przyszło mi do głowy rozwiązanie tak proste, że trudno uwierzyć, że nie wpadłem na nie od razu.

Na przykładzie: pokazywanie elementów listy jeden po drugim, z przerwą 300ms po każdym. Wydaje się, że wystarczy setTimeout():

$('li').each(function(){
        var $li = $(this);

        setTimeout(function() {
                $li.fadeIn(500);
        }, 300);
});

Ale to nie aż tak proste, bo w ten sposób wszystkie elementy pokażą się razem, z opóźnieniem 300ms od momentu wywołania akcji (np. klik na przycisk), a my chcemy uzyskać takie opóźnienie po animacji każdego kolejnego elementu.

Z pomocą przychodzi parametr index w funkcji each() i odrobina logiki. :) Skoro nie chcę opóźnienia przed pokazaniem pierwszego elementu, a 300ms przerwy po każdym kolejnym tzn., że potrzebuję przerwy 0, 300, 600, 900ms, itd. licząc od momentu wywołania akcji. Najprościej zrobić to mnożąc index, czyli numer elementu (0-based) przez wartość opóźnienia.

$('li').each(function(index){
        var $li = $(this);
        
        setTimeout(function() {
                $li.fadeIn(500);
        }, index * delay);
});

Takie proste. ;) Zobacz demo.

UPDATE: A jednak nie do końca.

Jak Riddle słusznie zauważył w komentarzach, odpalanie wielu timerów jednocześnie może spowolnić przeglądarkę. W moim przykładzie nie robi to różnicy, bo elementów jest tylko kilka. Przetestowałem swoje demo dla 100 elementów listy - skok zużycia procesora to maksymalnie 15% w momencie startu, a przeglądarki w ogóle nie odczuwają różnicy (Firefox 3.5, Safari 4, Opera 10 /Mac). Być może przy jeszcze większej liczbie, bądź na słabszym sprzęcie dałoby się odczuć jakieś problemy.

Tak czy inaczej, z pewnością lepiej i bezpieczniej unikać odpalania wielu setTimeout() jednocześnie.

Zmiana wartości inputa kursorami - plugin jQuery

Tue, 20 Oct 2009 13:09:13 +0200

Plugin powstał na wzór możliwości aplikacji (np. Photoshopa), które pozwalają sterować wartością liczbową pola za pomocą strzałek góra/dól lub za pomocą strzałek i klawisza Shift. Standardowo kursory ↑ i ↓ zmieniają wartość o 1, a z wciśniętym Shiftem o 10. To bardzo wygodne rozwiązanie przydaje się szczególnie, kiedy chcemy na bieżąco obserwować wpływ zmiany wartości pola na działanie aplikacji, prezentację wykresów itp.

Opcje i sposoby użycia

Parametry i dopuszczalne wartości:

min i max - minimalna i maksymalna wartość pola. Dopuszczalne wartości to:
- 'false' - domyślna, bez ograniczeń wartości
- liczba - określenie wartości minimalnej i/lub maksymalnej
- 'default' - przybiera wartość atrybutu value pola
step - o ile zmieni się wartość w polu po wciśnięciu kursora
shiftStep - o ile zmieni się wartość w polu po wciśnięciu kursora z Shiftem

Podstawowa konfiguracja pozwala na zmianę wartości kursorami góra/dół o 1, a przytrzymując wciśnięty Shift o 10, bez ograniczeń wartości:


$('#input-1').jInputValue()

Ustalanie wartości minimalnej i maksymalnej, jaką może osiągnąć pole:

$('#input-2').jInputValue({
        min: 0,
        max: 15         
})

Ustalenie wartości minimalnej pola na równą wartości atrybutu value. Analogicznie stosuje się dla wartości maksymalnej.

$('#input-3').jInputValue({
        min: 'default'
})

Ustalenie wartości kroku standardowego i z wciśniętym klawiszem Shift:

$('#input-4').jInputValue({
        step: 3,
        shiftStep: 15
})

Skrypt zabezpiecza pole przed wpisywaniem wartości innych niż liczbowe.

W przypadku wklejenia tekstu pole przyjmie wartość:

minimalną - jeśli jest zadeklarowana
maksymalną - jeśli jest zadeklarowana
0 - jeżeli nie ma min, max ani atrybutu value
defaultValue - czyli wartość atrybutu value, jeżeli istnieje

Pierwsze dwa przypadki mają też miejsce w sytuacji ręcznego wpisania lub wklejenia liczby przekraczającej dopuszczalną granicę.

Uwagi

Plugin pozwala używać wartości min i max dla wartości pola, ale na chwilę obecną nie ma żadnego sprawdzania ich poprawności. To oznacza, że ustalenie wartości min większej niż max, zablokuje pole sprawiając, że w ogóle nie będzie dało się z niego korzystać. Nie pokażą się przy tym żadne komunikaty o błędzie. Dlatego koniecznie zwracaj uwagę na stosowane wartości parametrów.
Wciśnięcie strzałki oczywiście przemieszcza kursor na początek lub koniec pola, a z wciśniętym Shiftem zaznacza jego zawartość. Nie wygląda to zbyt dobrze, ale te zachowania różnią się trochę między przeglądarkami i nie ingerowałem (przynajmniej na razie) w to zachowanie kursora.
Opera skrótu Shift + kursor używa do przemieszczania focusa pomiędzy linkami i polami formularzy. Aby temu zapobiec potrzeba e.preventDefault();, co blokuje standardową akcję przeglądarki. Wyjście z pola Tabem oczywiście działa.
Wiem, że wykrywanie przeglądarki nie jest najbardziej elegancką metodą, ale różnice w zachowaniu Safari, IE, Firefoxa i Opery powodują, że aby szybko zmienić wartości przytrzymując klawisz (nie wciskając dla każdej zmiany o 1, a trzymając wciśnięty), Safari i IE potrzebują zdarzenia keydown, a pozostałe keypress.

Demo i download

Zobacz proste demo i przykład użycia w połączeniu z jQuery Visualize Plugin.

Pobierz plugin lub wersję minified.

Blokowanie Flasha, Safari i YouTube w HD z HTML5

Thu, 15 Oct 2009 13:00:15 +0200

Od jakiegoś czasu korzystam z pluginu ClickToFlash do przeglądarki Safari. Nigdy wcześniej nie stosowałem żadnych metod blokowania Flasha na stronach, ale liczba reklam i bannerów flashowych otaczających tekst, który chcę przeczytać, przekracza momentami wszelkie granice. A pomijając moje wrażenia i odczucia na ten temat, po prostu pożera zasoby.

ClickToFlash załatwia sprawę w bardzo prosty sposób, zastępując zawartość flashową placeholderem, nawet jeśli to cała strona wykonana w 100% we Flashu. Nie ma pobierania zbędnych danych, nie ma denerwujących reklam i bannerów. Od razu lepiej. A jeśli ClickToFlash zablokuje interesującą cię zawartość, wystarczy jedno kliknięcie i Flash się załaduje. Działa to na tyle szybko, że nie sprawia najmniejszego kłopotu podczas przeglądania stron.

Nie ma problemu z automatycznym ładowaniem elementów z sIFR, wystarczy wybrać taką opcję. Żeby nie blokować Flasha na ulubionych stronach, wystarczy dodać je do Whitelist.

Do Firefoxa jest działający podobnie Flashblock, ale ClickToFlash daje jeszcze jedną możliwość.

YouTube z HTML5

Opcja Load H.264 videos from YouTube powoduje, że plugin omija Flasha i odtwarza wideo korzystając z obsługiwanego przez przeglądarkę odtwarzania H.264 (z tego formatu korzysta na YouTube np. iPhone), co dodatkowo znacznie poprawia ich jakość (screeny poniżej, wersja HD we Flashu i z wykorzystaniem ClickToFlash). Plugin nie odtwarza po prostu tego samego pliku w QuickTime, ale konstruuje własny URL do np. pliku .mp4 dużo lepszej jakości. Safari korzysta wtedy z QuickTime Playera, którego kontrolki ukrywają się podczas odtwarzania filmu.

Ponadto, sam fakt blokowania zbędnego Flasha, jak i odtwarzanie za pomocą elementu <video> HTML5, pozwala zaoszczędzić trochę wysiłku procesorowi i wydłuża pracę baterii w laptopie.

Ekipa stojąca za ClickToFlash stara się (i prosi o wsparcie) wprowadzić tą metodę w innych serwisach, korzystających z Flasha do odtwarzania wideo.

Kilka słów o referencjach w JavaScript

Tue, 22 Sep 2009 16:26:28 +0200

Najkrócej mówiąc, referencja w językach programowania, to wskaźnik do miejsca, w którym znajduje się dany obiekt. Wszystkie obiekty znajdują się w pamięci i możemy mieć do nich dostęp poprzez referencję zapisaną w zmiennej, przy czym do każdego z nich może istnieć dowolna liczba referencji, zapisanych w różnych zmiennych.

Ważne jest, aby zapamiętać, że każda zmiana wykonana na obiekcie zostanie odzwierciedlona w referencji do niego - referencja nie jest kopią obiektu, ale wskaźnikiem do niego. To tak, jakbyś odwoływał się do tego samego obiektu, tylko za pomocą innej nazwy.

Najprościej wytłumaczyć to na przykładzie (przykłady polecam wykonywać w konsoli Firebuga).


// tworzymy obiekt i referencję do niego
var obiekt = {},
referencja = obiekt;
                
//wlasność obiektu przyjmuje jakąś wartość
obiekt.wlasnosc = 'wartosc wlasnosci';

console.log('obiekt: ' + obiekt.wlasnosc)

// zwróci wartość własności obiektu, do którego odnosi się referencja
console.log('referencja: ' + referencja.wlasnosc)

Ale uważaj, bo to też niektórych myli:

obiekt.wlasnosc = 'nowa wartosc';

to nie to samo co:

obiekt = { wlasnosc: 'nowa wartosc' }

Druga konstrukcja stworzy całkiem nowy obiekt! Zobacz:


var obiekt = { wlasnosc: 'wartosc poczatkowa wlasnosci obiektu' },
  ref = obiekt;
                
console.log('obiekt: ' + obiekt.wlasnosc)
console.log('referencja: ' + ref.wlasnosc)

obiekt = { wlasnosc: 'nowa wartosc' }

// obiekt.wlasnosc zawiera teraz 'nowa wartosc'
console.log('obiekt: ' + obiekt.wlasnosc)

// a ref.wlasnosc nadal zawiera referencję do starego obiektu,
console.log('referencja: ' + ref.wlasnosc)

Referencja nie tylko pozwala dostać się do obiektu, ale też go modyfikować:


var obiekt = {},
  referencja = obiekt;

referencja.nowawlasnosc = 'nowa wartosc'

console.log('obiekt: ' + obiekt.nowawlasnosc)
console.log('referencja: ' + referencja.nowawlasnosc)

Jak widać, dodaliśmy nową własność do obiektu, posługując się referencją.

Pytanie, czy możemy używać wskaźników do zwykłych zmiennych, nie tylko do obiektów? Nie. W przeciwieństwie do np. C++, JavaScript pozwala tylko na tworzenie referencji do obiektów. Nie możemy skorzystać ze wskaźnika do innej zmiennej:


var zmienna = 'wartosc zmiennej', 
        referencjaDoZmiennej = zmienna;         

console.log('zmienna: ' + zmienna)
console.log('referencja: ' + referencjaDoZmiennej)

zmienna = 'ref'
console.log('Po zmianie wartosci zmiennej: ')
console.log('zmienna: ' + zmienna)
console.log('referencja: ' + referencjaDoZmiennej)

Bo wtedy, to po prostu przypisanie jej wartości.

Tworząc referencję do innej referencji, w efekcie uzyskujemy drugi wskaźnik do tego samego obiektu:


var obiekt = { wlasnosc: 'wartosc poczatkowa wlasnosci obiektu' },
        ref = obiekt,
        ref2 = ref;
                
console.log('obiekt: ' + obiekt.wlasnosc)
console.log('referencja: ' + ref.wlasnosc)
console.log('referencja: ' + ref2.wlasnosc)

obiekt.wlasnosc = 'nowa wartosc';

console.log('obiekt: ' + obiekt.wlasnosc)
console.log('referencja: ' + ref.wlasnosc)
console.log('referencja: ' + ref2.wlasnosc)

ref2.wlasnosc = 'wartosc z 2. referencji';

console.log('obiekt: ' + obiekt.wlasnosc)
console.log('referencja: ' + ref.wlasnosc)
console.log('referencja: ' + ref2.wlasnosc)

Łączenie łańcuchów

String to oczywiście też obiekt i możemy mieć do niego referencje. Ale w przypadku łańcuchów znaków trzeba uważać i pamiętać, że każda zmiana jego wartości, na przykład przez konkatenację, skutkuje utworzeniem nowego obiektu. W takiej sytuacji referencja będzie wskazywała na łańcuch przed zmianą.


var string = 'Referencje', 
ref = string;
                
console.log('string: ' + string)
console.log('referencja: ' + ref)

string += ' w JavaScript'

console.log('string: ' + string)
console.log('referencja: ' + ref)

Pamiętaj, że te same zasady dotyczą też funkcji i tablic, to w końcu też obiekty.

Warto zauważyć, że obiekty zawsze są przekazywane przez referencję i nie ma np. metody, która pozwalałaby skopiować cały obiekt.

Gesty multi-touch w aplikacjach na OS X

Wed, 16 Sep 2009 10:28:21 +0200

Od ponad 3 miesięcy jestem szczęśliwym posiadaczem MacBooka Pro. Przejście z PC/Win na OS X odbyło się całkowicie bezboleśnie, ale myślę, że gdyby moim pierwszym makiem był np. iMac, nie byłoby to to samo. Notebooki Apple mają przewagę dzięki trackpadowi. Jest duży i bardzo wygodny, a multi-touch sprawia, że korzystanie z laptopa nabiera zupełnie nowego charakteru.

Gesty multi-touch dostępne na trackpadach MacBooków to fantastyczna sprawa. Na tyle, że do tej pory nie kupiłem do laptopa myszki (a myślałem, że zrobię to od razu) i jestem przekonany, że bez niego nie wykorzystywałbym niektórych możliwości OS X tak intensywnie, a praca nie byłaby aż tak przyjemna.

Czym są Multi-touch gestures wie raczej każdy zainteresowany tematem: pozwalają na wykonywanie na powierzchni gładzika gestów palcami, ale nie tylko jednym, a nawet czterema. Początek rozwoju tych gestów mieliśmy na ekranie iPhone'a: przewijanie palcem, powiększanie, pomniejszanie i obrót zdjęć dwoma palcami.

W OS X jest kilka podstawowych gestów, bardzo fajnie zobrazowanych w preferencjach systemowych. Najważniejsze to:

2 palce:

przewijanie w poziomie i pionie wszelkich suwaków, stron, obrazów itp.
obrót obrazów
powiększanie i pomniejszanie obrazków
zoom in/out ekranu

3 palce:

Przesunięcie trzema palcami w lewo/prawo powoduje przewinięcie wstecz/dalej (w Finderze, przeglądarkach i innych aplikacjach, np. w Tweetie).

4 palce:

Przesunięcie czterema palcami:

w górę - ukrywa okna (Exposé)
w dół - pokazuje oka
w lewo lub prawo: otwiera przełączanie aplikacji (tak jak cmd+tab)

Poza standardowym działaniem gestów, w niektórych aplikacjach mają one różne zastosowania. Te, które udało mi się zaobserwować, opisuję poniżej.

Firefox, Safari, Mail

2 palce pinch ("uszczypnięcie") - powiększanie
2 palce expand (rozszerzenie palców) - pomniejszanie

Działają tak jak opcje Zoom In/Zoom Out w menu przeglądarek, zmiana rozmiaru tekstu w mailu.

Mail.app

3 palce do góry lub w lewo - poprzedni mail
3 palce w dół lub w prawo - następny mail

Firefox:

3 palce do góry - początek strony
3 palce w dół - koniec strony

Open Office

3 do góry - poprzednia strona
3 w dół - następna strona
2 palce pinch/expand - sterowanie powiększeniem (suwak w prawym dolnym rogu okna)

iCal

3 w prawo - następny miesiąc/tydzień/dzień (w zależności od aktualnego widoku)
3 w lewo - jak wyżej, ale poprzedni

QuickTime

2 palce expand - włącz fullscreen
2 palce pinch - wyłącz fullscreen
3 w prawo - koniec filmu
3 w lewo - początek filmu

Quick Look

2 palce expand - włącz fullscreen
2 palce pinch - wyłącz fullscreen

Adobe Photoshop

poruszanie dwoma palcami zastępuje przesuwanie obszaru roboczego „rączką” (z wciśniętą spacją).

Preview.app

2 palce - pinch/expand zmienia rozmiar zdjęcia lub miniaturek (jeśli wykonane nad paskiem bocznym)
2 palce - obrót zdjęcia
3 palce w lewo lub w górę - poprzednie zdjęcie
3 palce w prawo lub w dół - następne zdjęcie

Znasz inne aplikacje, w których multi-touch się przydaje? Podziel się w komentarzu!

Graficzny klient Subversion na Mac

Sat, 12 Sep 2009 13:16:53 +0200

Poprzednim razem postawiliśmy swoje pierwsze repozytorium Subversion na Maku. Poszło dobrze i da się pracować, ale wszystkie polecenia musimy wykonywać w konsoli, co jest mało wygodne. Na Windows używałem świetnego klienta TortoiseSVN, w którym jednym kliknięciem można załatwić większość czynności w SVN. Dzisiaj zrobimy coś podobnego w OS X.

Najwygodniej jest używać SVN z poziomu katalogu, w którym pracujemy. Idealna sytuacja to taka, w której menu kontekstowe (pod prawym klawiszem) daje nam opcje dotyczące obsługi repozytorium Subversion, takie jak Commit czy Update. Nie ma nawet potrzeby otwierania żadnego okna klienta, jeśli nie chcemy tego robić.

Opcje SVN w menu kontekstowym

Potrzebna będzie nam najnowsza wersja SCPlugin. Instalacja wygląda standardowo. Po jej zakończeniu wyloguj się z systemu i zaloguj ponownie.

Teraz sprawdź menu pod prawym klawiszem. Opcja „więcej” powinna teraz zawierać dodatkowe pozycje:

Subversion Commit
Subversion Update
Subversion (i submenu z opcjami innych poleceń)

Jeżeli ikony w repozytorium nie zmieniły się, spróbuj wybrać opcję Refresh Icons.

To w zasadzie wystarczy do pracy. Spełnia najważniejszy wymóg: możemy łatwo wydawać polecenia SVN bez komend w konsoli.

Klient SVN

SCPlugin wystarczy, ale może przydać się coś więcej, do zarządzania repozytoriami. Oczywiście, najlepiej byłoby korzystać z oprogramowania z prawdziwego zdarzenia, jak polecane na każdym kroku Versions, czy jeszcze lepszy Cornerstone, ale zakładając, że budżet mamy ograniczony i nie potrzebne nam drogie aplikacje z licencją na 10 osób, na początek zadowolimy się czymś mniejszym i darmowym.

Pierwszy klient, jaki wpadł mi w ręce, to svnX i na nim się teraz skupimy.

Po uruchomieniu svnX nie wymaga poważnej konfiguracji. W preferencjach możesz ustawić katalog binarek Subversion, ale to pole powinno wypełnić się automatycznie.

Aby dodać nowe repozytorium, w oknie Repositories kliknij w +, nadaj mu nazwę, podaj adres i ewentualnie potrzebne dane do logowania. Dwukrotne kliknięcie pozycji na liście dodanych repozytoriów otworzy okno dostępu do wybranego. Tam możesz zobaczyć wszystkie pliki, informacje o kolejnych rewizjach i komentarze.

Darmowy hosting dla Subversion

Jako bonus, przetestujmy serwis udostępniający darmowy (nie tylko) hosting dla repozytoriów ProjectLocker. Darmowe konto pozwala na dostęp 5 użytkownikom do przestrzeni 500MB, bez limitu obsługiwanych projektów.

Po rejestracji logujemy się na portal.projectlocker.com i tworzymy nowy projekt (Subversion lub Git). Niech będzie na przykład blogdemo. Dostęp do repo przez przeglądarkę jest pod adresem https://free1.projectlocker.com/uzytkownik/nazwa_projektu/svn Dodajemy repozytorium do svnX.

W katalogu, w którym będziemy pracować, wykonujemy checkout (menu kontekstowe/Więcej/Subversion/checkout), wpisujemy potrzebne dane i mamy gotowe miejsce na pliki. Jeśli chcesz umieścić w nim już zaczęty projekt, skopiuj pliki do właśnie utworzonego katalogu i dodaj je do repozytorium (add). Teraz można już normalnie na nich pracować, a potem wysłać commitem do repozytorium na serwerze ProjectLocker. Wszystkie zmiany możemy zobaczyć wchodząc do repozytorium w svnX.

Wprowadzenie do Adobe AIR

Wed, 09 Sep 2009 14:17:36 +0200

Na ostatnim roku studiów informatycznych przyszedł czas na napisanie pracy inżynierskiej; tematem mojej jest stworzenie RIA w środowisku Adobe AIR. Żeby trochę nadrobić braki w tej tematyce w polskim internecie i jednocześnie zmotywować siebie samego do pisania, będę opisywał tutaj niektóre etapy i ciekawostki z pracy z AIR. Ten post będzie teoretycznym wprowadzeniem do środowiska, dotyczącym charakterystyki pracy, dostępnych technologii i narzędzi.

Czym właściwie jest Adobe AIR

Adobe Integrated Runtime to międzyplatformowe środowisko uruchomieniowe, które pozwala twórcom aplikacji WWW wykorzystać znane technologie internetowe, takie jak HTML, CSS, JavaScript, Flash i Flex, do tworzenia i wdrażania tzw. Rich Internet Applications. AIR stanowi swego rodzaju platformę między aplikacjami internetowymi uruchamianymi w przeglądarce, a możliwościami oprogramowania instalowanego na komputerze.

Oznacza to tyle, że Adobe AIR pozwala za pomocą technologii czysto internetowych (wykorzystywanych do budowania stron www) tworzyć aplikacje, których możliwości, dzięki instalacji w systemie operacyjnym, zostają rozszerzone o dobrodziejstwa dostępu do systemu plików, schowka i integracji z pulpitem. Pozwala nam to, na przykład korzystać z technik, które są standardem w aplikacjach desktopowych, takich jak drag and drop między systemem i aplikacjami natywnymi, a aplikacjami AIR.

Dodatkowym atutem jest fakt, że aplikacje AIR (w zasadzie, tak jak aplikacje internetowe) są niezależne od platformy (ale wymagają zainstalowanego środowiska AIR).

Technologie w AIR

Technologie, z jakich możemy korzystać w tym środowisku, są nam w większości doskonale znane:

HTML / XHTML
CSS
JavaScript, AJAX i biblioteki JS
DOM
Flash, Flex, ActionScript 3
PDF
AIR API
SQLite

Przyjrzyjmy się nieco bliżej.

HTML/CSS/JS

HTML i CSS są podstawą konstrukcji okna aplikacji AIR, tak samo, jak strony internetowej (o ile nie jest to Flash). I tu koniecznie trzeba zaznaczyć: AIR do renderingu HTMLa używa silnika WebKit, znanego choćby z przeglądarki Safari. To oznacza, że pracujemy tylko i wyłącznie na jednym, w dodatku bardzo zaawansowanym silniku przeglądarki. Koniec problemów z uzyskaniem poprawnego wyglądu w różnych przeglądarkach, koniec kłopotów z IE.

Do tego dostajemy narzędzie potężniejsze, niż zwykły silnik przeglądarki. WebKit znany jest ze swoich licznych, niestandardowych możliwości i eksperymentalnych atrybutów CSS.

JavaScript i AJAX

AIR zapewnia pełną obsługę JavaScript 1.5 i tutaj znowu znika konieczność używania przestarzałych lub niepoprawnych konstrukcji dla IE. W AIR możemy też korzystać z ulubionych bibliotek i frameworków JS, takich jak jQuery, czy YUI.

AIR obsługuje synchroniczne i asynchroniczne wywołania XMLHttpRequest, a ponadto, w przeciwieństwie do przeglądarek, bez problemu i stosowania dodatkowych sztuczek, pozwala na wczytywanie danych AJAXem pomiędzy domenami (cross-domain).

Flash, Flex, ActionScript

Adobe Flash Player i WebKit są dodane do środowiska i zintegrowane na bardzo niskim poziomie. Ta integracja dotyczy też mechanizmów skryptowych, co pozwala na łączenie skryptów w różnych językach, np. JavaScript może wywoływać funkcje ActionScriptu i Flash Playera, a ActionScript wywoływać funkcje JS i manipulować modelem DOM dokumentu HTML.

Flash nie będzie tematem moich wpisów – to zupełnie nie moja działka, więc zainteresowanych muszę odesłać do zagranicznych źródeł.

PDF

Znany nam wszystkim standard dokumentów. Jeśli Adobe Reader jest zainstalowany w systemie, aplikacje AIR mogą wykorzystywać wszystkie jego funkcje, dostępne z poziomu przeglądarki internetowej.

AIR API

Oprócz standardowych technologii internetowych, AIR udostępnia pokaźny zestaw wywołań API, dostępnych z poziomu JavaScriptu i ActionScriptu. Niektóre z dostępnych funkcji to:

API plikowego wejścia-wyjścia
pełne natywne interfejsy API do obsługi menu i okien (z pełną kontrolą wyglądu okien aplikacji)
wykrywanie stanu połączenia z usługami, za pomocą wywołań API online/offline
aktualizacje aplikacji
API obsługi wbudowanej bazy SQLite

Przeróżne wywołania API będą omawiane w kolejnych postach, podczas realizacji konkretnych przykładów.

SQLite

Środowisko AIR posiada wbudowaną bazę danych SQLite, która jest jednym z czterech sposobów magazynowania danych. Można w niej bez problemów operować na tabelach w identyczny sposób jak np. w bazie na serwerze www. SQLite to kompaktowa baza danych o otwartym kodzie źródłowym, rozprowadzana na wolnej licencji, która nie wymaga konfiguracji. Wszystkie dane są przechowywane w jednym pliku.

Instalacja

Do uruchamiania aplikacji AIR wystarczy instalacja środowiska. My jednak do tworzenia aplikacji potrzebujemy czegoś więcej. W następnej kolejności pobierz AIR SDK.

Instalacja SDK w zasadzie nie jest wymagana, zależy na czym chcesz pracować. SDK jest konieczne tylko, jeśli chcesz korzystać z narzędzi konsolowych:

ADT – uruchamianie i testowanie aplikacji AIR bez instalowania
ADT – służy do pakowania i podpisywania aplikacji w celu przygotowania do dystrybucji.

Lepszym wyjściem będzie skorzystanie z IDE posiadających wsparcie dla środowiska AIR, np. darmowej Aptany z pluginem AIR lub dodatku do Dreamweavera.

Jeśli jednak chcesz zainstalować SDK, polecam darmowy Adobe AIR for JavaScript Developers Pocket Guide do ściągnięcia. Tam znajdują się dokładne instrukcje dot. instalacji i obsługi ADL i ADT. W razie problemów, dajcie mi znać, mogę opisać instalację krok po kroku, jeśli będzie taka potrzeba.

Ja będę pracował na Aptanie i to samo doradzam, jeżeli masz ochotę śledzić następne wpisy na ten temat i wykonywać przykłady.

Wstęp do tworzenia aplikacji

Teraz wprowadzenie do kilku podstawowych spraw podczas tworzenia aplikacji w AIR i rozwiązań, z których będziemy korzystać.

application.xml

Podstawą aplikacji jest plik XML zawierający jej konfigurację, określający takie informacje jak nazwa aplikacji i jej głównego pliku, wersja i autor, właściwości okna: np. rozmiar, możliwość maksymalizacji, ikony itp. Przykładowy plik application.xml może wyglądać tak:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
        <id>com.adobe.example.helloAIR</id>
        <filename>helloAIR</filename>
        <name>helloAIR</name>
        <version>1.0</version>
        <description>Pierwsza aplikacja AIR</description>
        <initialWindow>
                <content>helloAIR.html</content>
                <title>Pierwsza aplikacja AIR</title>
                <systemChrome>standard</systemChrome>
                <transparent>false</transparent>
                <visible>true</visible>
                <minimizable>true</minimizable>
                <maximizable>true</maximizable>
                <resizable>true</resizable>
        </initialWindow>
        <icon>
                <image16x16>icons/AIRApp_16.png</image16x16>
                <image32x32>icons/AIRApp_32.png</image32x32>
        </icon>
</application>

Podczas tworzenia nowego projektu w Aptanie, kreator przeprowadzi cię przez proces tej konfiguracji.

Wywołania AIR API

Podstawą działania na oknie aplikacji z poziomu JavaScriptu jest obiekt window. JS ma swoje własne obiekty document i window, ale może wchodzić w interakcje ze środowiskiem AIR za pomocą właściwości okna: runtime, nativeWindow i htmlLoader.

runtime – daje dostęp do AIR API, pozwala tworzyć nowe obiekty AIR
nativeWindow – dostęp do bieżącej instancji klasy NativeWindow, kontrolującej okno aplikacji
htmlLoader – dostęp do bieżącej instancji klasy HTMLLoader, sterującej wczytywaniem i wyświetlaniem treści. Jedno okno może zawierać więcej niż jeden obiekt htmlLoader.

Większość wywołań API AIR i Flash Playera znajduje się w pakietach, podobnie jak biblioteki JS wykorzystują przestrzenie nazw i pakiety, co pomaga utrzymać porządek i uniknąć konfliktów nazw. Każde wywołanie API wymaga podania pełnej ścieżki i nazwy pakietu co, jak zobaczymy, może być bardzo kłopotliwe i czasochłonne.

Np. trace (działające podobnie do console.log() w Firebugu), nie znajduje się w żadnym pakiecie, ale, ponieważ wszystkie polecenia są dostępne przez właściwość window.runtime, muszą zostać poprzedzone tym ciągiem.

Dlatego, polecenie trace wydłuża się do window.runtime.trace('treść'), a np. stworzenie w JS nowej instancji klasy File(), do pracy z systemem plików, to już:

var plik = new window.runtime.flash.filesystem.File();

Wyobrażasz sobie z pewnością, że korzystanie z tak długich komend będzie bardzo męczące, a kod zrobi się nieczytelny. Dlatego, aby ułatwić nam pracę, ludzie z Adobe stworzyli plik AIRAliases.js, który dołączany jest standardowo do nowo utworzonego projektu w Aptanie.

AIRAliases.js zawiera aliasy do najczęściej używanych poleceń, skracając je przy tym znacznie. I tak, wracając do poprzedniego przykładu, tworzenie nowej instancji File() skraca nam się do:

var plik = new air.File();

Debugowanie aplikacji

Przyzwyczajonych do pracy z Firebugiem (i nie tylko tych) z pewnością ucieszy fakt, że w AIR mamy podobne narzędzie, zwane AIR Introspector. Pozwala on, między innymi przeglądać i edytować drzewo DOM dokumentu, wyszukiwać tekst w kodzie źródłowym, przeglądać obiekty XMLHttpRequest i ich właściwości, a do tego raportuje błędy i wyświetla komunikaty z polecenia air.trace(). Aby skorzystać z Introspectora, dołącz plik AIRIntrospector.js do swojego dokumentu.

Teorii na razie wystarczy. Następnym razem napiszemy pierwszą działającą aplikację. Więcej informacji o instalacji środowiska AIR i nie tylko, na stronach help.adobe.com.

Stawiamy repozytorium Subversion w OS X Leopard

Mon, 07 Sep 2009 10:05:06 +0200

W ramach dalszego przystosowywania OS X do moich potrzeb i uzupełniania narzędzi, nadszedł czas na Subversion. W skrócie, SVN to system kontroli wersji. Pozwala wielu osobom pracować na tych samych plikach, bez obawy o nadpisanie wyników czyjejś edycji. Umożliwia śledzenie zmian a w razie konfliktu pomoże naprawić problem i np. powrócić do stanu wcześniejszego.

W Leopardzie Subversion jest już zainstalowane, ale i tak trzeba się trochę natrudzić, aby postawić swoje repozytorium w systemie. Poniższe kroki trzeba wykonać w Terminalu. Jeśli bardzo nie lubisz pracy w konsoli nie ma się czego bać, wystarczy, że skopiujesz te polecenia i ewentualnie zmienisz odpowiednie nazwy i ścieżki na własne.

Przygotowanie miejsca na repozytoria

Na początek tworzymy katalog, w którym znajdą się repozytoria naszych aplikacji.

sudo mkdir /usr/local/svn

Zmieniamy właściciela tego katalogu tak, aby mieć do niego dostęp z poziomu przeglądarki internetowej:

sudo chown -R www:www /usr/local/svn

Następny krok jest opcjonalny, ale zakładam, że chcesz zabezpieczyć swoje repozytorium hasłem. Jeśli nie, pomiń tą komendę. Do naszego przykładu wystarczy prosta autentykacja, ale musisz pamiętać, że hasło zostanie tylko słabo zaszyfrowane, a przesył danych nie będzie zabezpieczony wcale.

sudo htpasswd -cm /etc/apache2/svn-auth-file uzytkownik

Oczywiście zastąp „uzytkownik” swoją nazwą użytkownika. Będziesz musiał podać hasło administratora, a następnie 2 razy hasło użytkownika. Aby dodać kolejnych userów, powtórz to polecenie pomijając przełącznik -c (tworzenie pliku).

Przejdźmy do konfiguracji Apache'a.

cd /etc/apache2/other
sudo pico svn.conf

Zamiast Pico możesz oczywiście użyć dowolnego edytora tekstu. Do utworzonego pliku pliku wklej:

LoadModule dav_svn_module /usr/libexec/apache2/mod_dav_svn.so

<Location /svn>
    DAV svn
    
    SVNParentPath /usr/local/svn
    
    AuthType Basic
    AuthName "Subversion repository"
    AuthUserFile /etc/apache2/svn-auth-file
    Require valid-user
</Location>

Gdzie za /usr/local/svn wstaw swoją ścieżkę do repozytorium a zamiast /etc/apache2/svn-auth-file, ścieżkę do pliku z hasłami, jeżeli podałeś inną niż w przykładzie. Jeżeli wcześniej pominąłeś tworzenie hasła, teraz możesz opuścić 4 linijki od AuthType do Require valid-user. Zapisz plik i wyjdź z pico (^O i ^X).

Restart Apache'a:

sudo apachectl graceful

Pierwszą część mamy za sobą. Teraz przygotujemy zestaw katalogów, które znajdą się w każdym repozytorium. Standardowo są to 3 katalogi: trunk, tags i branches.

Wybierz sobie lokalizację, w której chcesz zapisać ten szablon. Ja pracuję z serwerem MAMP, dlatego większość projektów trzymam w katalogu htdocs i tam też utworzę swój szablon svn-default (oczywiście nazwij go jak chcesz).

mkdir /Applications/MAMP/htdocs/svn-default
mkdir /Applications/MAMP/htdocs/svn-default/trunk
mkdir /Applications/MAMP/htdocs/svn-default/branches
mkdir /Applications/MAMP/htdocs/svn-default/tags

Pierwsze repozytorium

Dodajmy repozytorium dla pierwszej aplikacji w obszarze svn, jaki utworzyliśmy na początku (w /usr/local/svn). Zastąp „aplikacja” swoją nazwą aplikacji.

sudo svnadmin create /usr/local/svn/aplikacja

Teraz sprawdź, czy wszystko działa wchodząc w przeglądarce na adres http://localhost/svn/aplikacja, gdzie aplikacja to nazwa, której użyłeś w kroku wcześniejszym. Jeśli zabezpieczyłeś swoje repozytorium, podaj login i hasło. Widzisz nagłówek Revision 0: /? To znaczy, że wszystko gra. Jeśli nie... musisz sprawdzić wszystkie poprzednie kroki, może gdzieś wkradła się literówka albo podałeś złą ścieżkę.

Musimy jeszcze nadać prawo do zmiany plików:

sudo chown -R www:www /usr/local/svn

Następnie umieścimy podstawowy układ katalogów w naszym repozytorium.

svn import -m "svn-default import" /Applications/MAMP/htdocs/svn-default http://localhost/svn/aplikacja

Po podaniu hasła powinieneś zobaczyć coś takiego:

Adding         /Applications/MAMP/htdocs/svn-default/trunk
Adding         /Applications/MAMP/htdocs/svn-default/branches
Adding         /Applications/MAMP/htdocs/svn-default/tags
Commited revision 1.

Treść znajdująca się po przełączniku -m to komentarz do rewizji, możesz tam wpisać co chcesz. Najlepiej opisać krótko co w danej rewizji się zmieniło. Teraz w przeglądarce zobaczysz Revision 1:/ i linki do 3 utworzonych katalogów.

Kolejny krok to dodanie działającej wersji aplikacji, nad którą pracujemy, do katalogu trunk w repozytorium. W moim przypadku znajduje się ona w htdocs i tam też chcę kontynuować pracę. Wykonujemy svn import do katalogu trunk:

svn import -m "import aplikacji" /Applications/MAMP/htdocs/aplikacja http://localhost/svn/aplikacja/trunk

Teraz listing plików dodawanych do repozytorium zakończy się Committed revision 2 a zobaczyć je możesz w przeglądarce, po wejściu w trunk. Ostatnia sprawa to pierwszy checkout, jaki musimy wykonać na plikach. Ja chcę kontynuować pracę w tej samej lokalizacji co przed podłączeniem SVN, więc ten stary katalog trzeba najpierw usunąć. Dla bezpieczeństwa przed pierwszą próbą warto zrobić sobie kopię, ale nic nie powinno tutaj pójść nie tak. Katalog usuń w Finderze lub w Terminalu:

rm -r /Applications/MAMP/htdocs/aplikacja

Teraz przejdź do katalogu nadrzędnego, w którym znajdzie się aplikacja, (w tym przypadku to htdocs) i zrobimy checkout:

cd /Applications/MAMP/htdocs/

svn checkout http://localhost/svn/aplikacja/trunk aplikacja

aplikacja to nazwa katalogu, który zostanie utworzony. Wszystko powinno pojawić się na miejscu. Dobra robota, teraz możesz zacząć pracować nad swoją aplikacją z Subversion.

Podstawowe polecenia SVN

Poniższe polecenia musisz wykonywać w Terminalu znajdując się w katalogu z aplikacją. Przed wpisaniem któregokolwiek z nich, najpierw wykonaj:

cd /ścieżka/do/katalogu

W naszym przykładzie będzie to:

cd /Applications/MAMP/htdocs/aplikacja

Update

Przed rozpoczęciem pracy dobrze jest upewnić się, że mamy najnowszą wersję plików, które będziemy edytować. Robienie update'ów przed jakimikolwiek zmianami powinno wejść ci w nawyk. Będąc w katalogu aplikacji użyj:

svn update

Commit

To druga najczęściej wykonywana czynność, czyli zapis dokonanych zmian w repozytorium. Commita dobrze robić zawsze na koniec pracy albo po dokonaniu poważniejszych zmian, kiedy chcesz się upewnić, że nie zepsujesz za chwilę tego, co właśnie udało się zrobić. :)

svn commit -m "komentarz do rewizji, opis zmian"

Dodawanie plików

Pliki i katalogi wklejone do katalogu aplikacji w Finderze nie są jeszcze poprawnie dodane do repozytorium SVN. Musisz dodać je poleceniem:

svn add nazwa_pliku_lub_katalogu

Przy większej liczbie plików możesz powtórzyć to samo dla wszystkich, ale prościej wszystkie za jednym zamachem:

svn -–force add .

Usuwanie plików

Podobnie jak przy dodawaniu, musisz zrobić to z poziomu Subversion. To polecenie oznaczy pliki jako usunięte z repo i skasuje je także z systemu plików.

svn delete nazwa_pliku_lub_katalogu

Zmiany w plikach

svn status pokaże ci jakie pliki zostały zmienione od ostatniego update'u.

svn diff pokaże co dokładnie zostało zmienione.

Zanim wykonasz commit, możesz cofnąć zmiany w pliku za pomocą svn revert nazwa_pliku.

Tags i Branches

Oprócz trunk, w którym pracujemy nad aplikacją, w repozytorium są jeszcze 2 katalogi: tags i branches.

Jeśli chcesz „odłożyć na bok” aplikację w obecnym stanie, aby udostępnić ją użytkownikom do ściągnięcia, lub po prostu mieć łatwo dostępną kopię wersji, do której ewentualnie chciałbyś kiedyś powrócić, dobrym rozwiązaniem będzie będzie tag.

svn copy http://localhost/svn/aplikacja/trunk 
        http://localhost/svn/aplikacja/tags/aplikacja-v1.0-stable 
        -m "Wersja 1.0 stable aplikacji."

Branch możesz traktować jako inną, równolegle rozwijaną wersję swojej aplikacji.

svn copy http://localhost/svn/aplikacja/trunk 
        http://localhost/svn/aplikacja/branches/aplikacja-branch1 
        -m "Branch 1"

Na dzisiaj to tyle. Po więcej informacji o SVN polecam darmową książkę Version Control with Subversion. Następnym razem skonfigurujemy darmowego klienta Subversion i zainstalujemy dodatek, który pozwoli obsługiwać SVN z poziomu menu kontekstowego w Finderze.

Jak freelancer w Polsce szuka zleceń

Fri, 04 Sep 2009 18:34:56 +0200

Freelancer nie ma łatwo. To znaczy, freelancer ma się super, ale czasami niełatwo. Największym problemem na początku jest zdobywanie klientów. Trzeba przecież ciągłych zleceń, żeby się utrzymać, ale jak je zdobyć? Sposobów jest kilka, ale nie ma się co oszukiwać, w Polsce rynek wolnych strzelców wypada przy amerykańskim bardzo mizernie.

Niestety, u nas dalej nie pisze i nie mówi się otwarcie ani o zarobkach ani nawet o sposobach pozyskiwania klientów. Wielu o to pyta, ale nikt nie chce się podzielić swoimi doświadczeniami. Szczerze w to wątpię, ale może kiedyś doczekamy się polskiego FreelanceSwitch.

Dzisiaj postaram się opisać kilka możliwości. Oczywiście skupiam się na swojej branży, więc nie biorę pod uwagę opcji dla zawodów zupełnie nie związanych z Internetem.

Serwisy ze zleceniami dla freelancerów

Zlecenia.przez.net

Na temat tego serwisu spotyka się właściwie tylko negatywne opinie, przeważnie wśród osób z doświadczeniem, wyrobioną marką i, co najważniejsze, ceniących siebie i swoją pracę.

Negatywne nastawienie w tym przypadku niestety jest jak najbardziej uzasadnione, bo zdecydowana większość zleceń i ofert w serwisie jest grubo poniżej średnich stawek i przypomina szukanie frajera, który zrobi co trzeba za grosze. Problem w tym, że zleceniodawcy wiedzą co robią oczekując bardzo niskich cen za pracę, bo chętnych do takich projektów nie brakuje i jeżeli szukasz „webmastera”, który zrobi dla ciebie stronę za 300zł, dobrze trafiłeś. Na zlecenia.przez.net można przebierać w takich ofertach. Oczywiście wykonanie zawsze profesjonalne.

mrowisko.biz

Całkiem przyjemny portal e-zleceń, który mimo dobrego wrażenia jakie robi w pierwszym momencie, okazuje się być totalnie pusty, praktycznie zero ofert (w tej chwili 7).

webhandel.pl/zlecenia

To nie serwis dedykowany freelancerom tylko sklep z szablonami WWW, ale jest tam trochę zleceń i na pewno warto czasami zajrzeć, może trafi się coś fajnego.

freelancer.pl

Użytkowników 11488. Zleceń: 15. A szkoda, bo serwis wygląda całkiem porządnie i mogłoby z tego wyjść coś więcej. Zastanawia mnie, dlaczego te serwisy są tak puste.

freelancers.pl

Tutaj totalna rozsypka, wygląda na to, że twórcy dawno zapomnieli o projekcie.

koduj.pl

Tej strony nie znam, a nawet coś się na niej dzieje. Pojawiają się zlecenia, choć trudno powiedzieć, na jakim poziomie. Będę obserwował.

Jest jeszcze kilka innych, ale nie ma sensu ich tu wymieniać, bo to albo serwisy martwe albo niewarte uwagi. Czy naprawdę nie mamy w Internecie porządnego miejsca dla freelancerów?

Reklama w „serwisach dla profesjonalistów”

Serwisy typu GoldenLine i Profeo z pewnością nam sprzyjają i ułatwiają dotarcie do większej liczby potencjalnych klientów, pracodawców i współpracowników. Nie brakuje tam właścicieli firm i agencji, którzy rozglądają się za talentami. Częstą praktyką jest sprawdzanie kandydatów w sieci, a profil w takim serwisie i posty na jego forum, są dobrym sposobem na pokazanie siebie. Poza tym, często profil w jednym z nich znajdzie się w pierwszej piątce wyników wyszukiwania twojego imienia i nazwiska, co może się bardzo przydać tym nie posiadającym dobrze wypozycjonowanej strony domowej.

Jaka jest skuteczność? Nie wiem, jak do tej pory w moim przypadku bardzo mała – dostaję głównie oferty pracy nie dla mnie.

Współpraca z freelancerami

Tą formę bardzo lubię. Na działanie jako wolny strzelec zdecydowałem się z wielu powodów, a współpracując z innymi, którzy zrobili to samo, mam szansę poznać i pracować z ludźmi o podobnym nastawieniu do swojej pracy i życia. To pozytywnie wpływa na jakość realizowanych projektów i atmosferę, w jakiej powstają. Nie zdarzyło mi się jeszcze trafić na wrogie nastawienie. Freelancerzy to raczej dość pozytywna i zadowolona grupa ludzi.

Inna sprawa, że mimo wielu zalet takiej umowy na wyminę obowiązkami lub wykonywanie zleceń razem, nie wszyscy są chętni do dzielenia się projektami i wolą działać w pojedynkę. Jak kto woli, ale uważam, że wszystkie strony zainteresowane mogą na tym tylko zyskać. Na przykład: grafik zajmuje się tym co potrafi najlepiej, projektuje layout nie martwiąc się sprawami technicznymi, koder składa wszystko w całość, a klient dostaje swój projekt nie tylko szybciej, ale i wyższej jakości.

Warto napisać maila do dobrego grafika, który może szukać kodera (i odwrotnie). Od samej próby nawiązania kontaktu nic nie tracisz, a możesz wiele zyskać.

Współpraca z firmami

Z drugiej strony dobrym pomysłem jest nawiązanie współpracy z agencjami interaktywnymi i firmami zajmującymi się Internetem. Podobno (patrz wykresy) wiele firm często korzysta z usług freelancerów. Podobno, bo wydaje mi się, że większość szuka tylko pracowników na stałe, do pracy w siedzibie firmy (a może tylko na takie trafiam), nie chcą współpracowca zdalnie i przekazywać swoich projektów ludziom z zewnątrz.

Zostawiając pracę na etacie na rzecz freelance'u, warto pozostać w dobrych stosunkach z byłym pracodawcą, można przecież nadal współpracować, tylko na innych warunkach. Ale i tutaj też różnie bywa. Czasami kończy się na zwykłym gadaniu i obiecankach. Tak przynajmniej wnioskuję z doświadczenia własnego i 50% ankietowanych. :)

PewnaGrupa.pl

Na temat niedawno powstałej organizacji pośredniczącej między freelancerami i ich klientami są dość różne opinie. Niektórzy twierdzą, że to tylko sposób na wyciągnięcie kasy za przekierowanie maili między klientem i wykonawcą, ale wg mnie pomysł jest dobry i może bardzo pomóc.

Jak jest naprawdę jeszcze nie wiem, wysłałem swoje zgłoszenie i zobaczymy co dalej.

Reklama na forach i grupach dyskusyjnych

Mamy całe mnóstwo grup dyskusyjnych i forów internetowych a na nich, w działach z ogłoszeniami o pracy, niezliczone ilości postów w stylu „[wykonam] xxx”, pisanych przez wszystkich, od dorabiających na boku dzieciaków po pełnoetatowych freelancerów. Może to jest jakiś sposób, ale wg mnie taki post, w gąszczu setek podobnych wiadomości nie ma wielkiej siły przebicia ani nie poprawia w żaden sposób wizerunku jego autora w oczach potencjalnych klientów.

Co innego, jeśli wiedza i umiejętności są poparte licznymi wypowiedziami i pomocą na forum. Na pewno dobrym sposobem jest czynny udział w dyskusjach na forach i w serwisach związanych z branżą. Nie bez powodu „socializing” jest jedną z rad pojawiających się w każdym artykule/poradniku tego typu.

Kontakt ze strony domowej/portfolio

W tym przypadku nie mam wielkiego szczęścia. Większość zapytań jakie trafiają do mnie z formularzy kontaktowych na moich stronach, kończy się na pierwszym mailu, bo ludzie pytają tylko o ofertę, a cokolwiek bym nie powiedział, zawsze jest za drogo. ;) Niestety, często to też szukanie najtańszej oferty lub tylko prośby o wycenę dla porównania konkurencji. Czasami myślę, że dobrze byłoby zamieścić dokładny cennik. Problem w tym, że takowego na sztywno nie ustaliłem i w tej chwili nie mam zamiaru.

Klient z polecenia

To zdecydowanie najlepsza grupa klientów. Taka osoba kontaktuje się z freelancerem, bo ktoś jej go polecił (znajomy, rodzina, klient). Plusem jest to, że takiego klienta najczęściej nie trzeba wcale przekonywać do swoich usług, bo najprawdopodobniej jest już zdecydowany, zna efekty naszej pracy albo ktoś zaufany zapewnił go o jakości naszych usług. Pomijamy etap przekonywania klienta do siebie i od razu możemy przejść do zlecenia.

Wiadomo, im więcej zadowolonych klientów, tym więcej referralsów. Dobrze wspomnieć klientowi po zakończeniu projektu, że jesteśmy dostępni i chętni na kolejne zlecenia. Krótkie „polecam się na przyszłość” z pewnością nie zaszkodzi.

A Wy? Jak zdobywacie zlecenia? Jakieś dobre rady dla początkujących?

Aplikacje dla początkującego Mac-usera

Thu, 03 Sep 2009 17:23:59 +0200

Pierwsze dni po zakupie i uruchomieniu OS X, nowego i nieznanego mi systemu operacyjnego, mijały mi głównie na poszukiwaniach narzędzi do pracy. Trudno w jednej chwili zostawić wszystkie aplikacje, do których przyzwyczaiłem się przez ostatnie lata i przerzucić się do zupełnie nowego środowiska, gdzie w zasadzie w ogóle nie wiem, co do czego służy.

Trochę szperania w sieci, przeglądania roundupów, dziesiątki przetestowanych aplikacji i chyba mogę powiedzieć, że mam (prawie) wszystko czego potrzebuję. Udało mi się znaleźć alternatywy dla większości programów, z których korzystałem na Windowsie, z czego duża część daje o wiele większą przyjemność pracy.

Poniżej opis większości moich narzędzi, może chociaż trochę ułatwi komuś początek pracy na Maku.

Aplikacje

Coda

Dla front-endowca Coda to prawdopodobnie najlepszy wybór (zaraz obok Textmate, którego nie mam więc nie porównuję).

Standardowa edycja kodu z podpowiadaniem składni, tryb graficzny dla CSS (nie przepadam), klient FTP, dostęp do terminala a nawet możliwość podpięcia ulubionych książek (i nie tylko) do edytora tak, aby zawsze mieć podpowiedzi pod ręką.

Więcej: Subversion (source control) i (co dla mnie najważniejsze) Clips, czyli nic innego jak (bardzo uproszczone co prawda) snippety w Textmate, templates w NetBeans czy też QuickText w Notepad++.

Jest coś w tej aplikacji co sprawia, że lubię ją bardziej z każdym dniem.

Niestety bardzo brakuje mi kilku możliwości, jakie posiadają poważniejsze środowiska jak NetBeans czy Aptana Studio. Niektóre z nich nadrabiają pluginy, ale to jeszcze nie to.

Cena: $99

Drogo. Pewnie nie skusiłbym się na nią w takiej cenie, ale miałem szczęście załapać się na Panic Sale i kupiłem za połowę ceny.

Aptana Studio

Jeśli Coda to dla ciebie za mało, może Aptana Studio bardziej przypadnie ci do gustu.

Wsparcie dla PHP, Ruby on Rails, Pythona, Javy, AJAXa i bibliotek JavaScriptowych. Osobiście korzystam tylko podczas pisania aplikacji Adobe AIR, ale jest też plugin dla iPhone'owych developerów.

Co ważne, Aptana to całkowicie darmowa i między-platformowa aplikacja.

Cyberduck

Open source'owy klient FTP, SFTP, WebDAV, Mosso Cloud Files i Amazon S3. Niezwykle prosty i schludny interfejs, integracja z edytorami tekstu (np. TextMate i CSSEdit), integracja z Growl, wsparcie AppleScript i wiele więcej.

Pozwala na korzystanie z Quicklook (tak samo jak w Finderze) i synchronizację z iDisk. Obsługa ponad 20 języków (w tym polski).

No i kaczka w docku wygląda super.

Transmission

Darmowy, super-szybki i super-lekki klient BitTorrent. Tak prosty jak to tylko możliwe. Ściągasz i zaczynasz używać.

Integracja z Growl + sygnalizacja w docku.

MAMP

MAMP to skrót od “Macintosh, Apache, MySQL and PHP" i jest to... (niespodzianka!) serwer Apache, PHP + MySQL dla Mac. Prostszy w obsłudze już chyba być nie może.

Co ważne, MAMP nie wpływa w żaden sposób na istniejące instalacje Apache'a na twoim maku, więc nie ma obaw jeśli chcesz tylko spróbować.

Darmowy w podstawowej wersji.

Mind Node lub FreeMind

Mapy myśli to niesamowicie przydatna rzecz. Przekonasz się jak tylko zaczniesz ich używać. Polecam obie aplikacje, przy czym pierwsza jest tylko dla Mac, druga to aplikacja w Javie, więc niezależna od OS.

Ceny:

Free Mind: 0
Mind Node: darmowa wersja lub Pro za 14.95 USD

jQuery API browser

jQuery API browser to nie do końca program specjalnie dla Maka, ale dokumentacja jQuery w postaci aplikacji Adobe AIR. Dla tych, którzy zbyt często zaglądają na docs.jquery.com.

Adobe Photoshop

Szczerze: nie znoszę Gimpa. Photoshop is a must.

Cena: różnie

Burn

Nagrywanie CD/DVD. Po prostu.

Hex Color Picker

W pracy front-endowca, który składa strony porządne narzędzie do pobierania kolorów to po prostu konieczność. Na PC używałem fantastycznego i bardzo prostego FastStone Capture, który nie tylko daje mi taką możliwość, ale też wszystkie opcje robienia zrzutów ekranu, jakich mi potrzeba.

Niestety na maku większość aplikacji, których próbowałem do tych dwóch celów to nieporozumienie. W standardowym OS X-owym „Colors" brakuje wartości szesnastkowych, dobrze więc doinstalować sobie mały dodatek, Hex Color Picker. To jeśli chodzi o kolory.

A wracając do screenshotów...

Screenshot Plus

To widget do Dashboardu. Nie jest idealny, ale używam w tej chwili z braku lepszej alternatywy.

Skitch

Kolejna darmowa aplikacja do szybkiego robienia i obróbki screenshotów i publikacji ich online, na koncie skitch.com lub innym serwisie (np. Flickr).

Paparazzi!

Paparazzi! z kolei, to najlepsze rozwiązanie z jakim miałem do tej pory przyjemność się spotkać, do robienia zrzutów całych stron internetowych. Wystarczy podać mu adres strony i poczekać, aż zrobi swoje. Można też ustawić opóźnienie po jakim ma się zrobić zrzut ekranu, co jest przydatne, jeśli chcemy, aby program przeczekał np. flashową animację po wejściu na stronę.

VirtualBox

Darmowy program do wirtualizacji (uruchamiania maszyn wirtualnych, np. z innym systemem operacyjnym). Konieczność do testowania stron w IE/Win.

Parallels Desktop

Jak VirtualBox, ale bardziej... „makowy" i lepiej integruje się ze sprzętem, umożliwiając np. bezproblemowe uruchamianie gier pod Windows, czego w VirtualBox nie udało mi się zrobić z powodu niepełnej obsługi grafiki.

Cena: 256 PLN

Miro

Darmowy odtwarzacz wideo w HD. Potrafi odtworzyć niemal każdy format video. Połączenie z tysiącami darmowych widowisk wideo w HD, serwisami udostępniającymi filmy itp. Miro automatycznie zapisuje oglądane filmy na dysku, więc możesz zabrać ze sobą klip z YouTube'a i pokazać go znajomym podczas grillowania w ogródku, bez Internetu.

Nie będę się rozpisywał, dokładny opis na stronie producenta.

PYM Player

Program do oglądania filmów (divx, rmvb, mkv) z napisami przy wykorzystaniu mplayera. Super wygodny, praktycznie nie wymaga konfiguracji, sam ściąga napisy z Napiprojekt a dodatkowo posiada kilka fajnych opcji, jak filtry poprawiające jakość obrazu.

Open Office

Międzyplatformowa, open source'owa i darmowa alternatywa dla Microsoft Office. Wszyscy znamy?

Tweetie

Pomiędzy wszystkimi klientami Twittera, Tweetie to mój ulubiony, zarówno na Maku jak i na iPhone. Prosty i elegancki interfejs, opcje dokładnie takie jakich potrzebuję i żadnych więcej.

Cena: $19.95, ale spokojnie można używać darmowej wersji z reklamami (raz na jakiś czas, nie przeszkadzają, a wręcz są bardzo miłe dla oka)

Unarchiver

Rozpakuje pliki Zip, Tar-GZip, Tar-BZip2, Rar, 7-zip, LhA, StuffIt i inne.

Co prawda miałem kilka razy problem z rozpakowaniem Rar i Stuffit, ale pomógł mi wtedy Stuffit Expander.

NTFS 3G for Mac OSX

Przejście z PC/Win na OS X jest o wiele prostsze, kiedy możesz dostać się przez sieć do swoich partycji NTFS na starym komputerze, którego już niedługo nie będziesz chciał używać.

NTFS3G for Mac dodaje obsługę takich partycji w OS X. Instaluje się jako panel w preferencjach systemowych.

Billings 3

Najlepsza aplikacja do mierzenia czasu spędzonego nad projektami, fakturowania, pilnowania rachunków i spraw formalnych, którymi musi zajmować się freelancer podczas pracy.

Cena: $39.99

Growl

Dzięki integracji z aplikacjami, Growl w bardzo przyjemny sposób powiadomi cię o zakończonych transferach w Cyberduck czy też Coda, o aktualizacjach Firefoksa, rozpakowanym pliku w Stuffit Expanderze i tym podobnych wydarzeniach. Polubisz go na pewno.

AppCleaner

Mimo iż usuwanie aplikacji w OS X jest niezwykle proste, nie zawsze jest tak skuteczne, jak by się wydawało. AppCleaner posprząta wszystkie śmieci po programie, którego już nie chcesz używać.

Caffeine

„Don't let your Mac fall asleep”, czyli nie pozwól swojemu Makowi wygaszać ekranu (i zasnąć) po dłuższej bezczynności, ale kiedy sobie tego nie życzysz, czyli np. kiedy czytasz artykuł lub oglądasz video na YouTube. Przydatne.

Free Ruler

Linijka. Do mierzenia.

Spotlight

To nie aplikacja do zainstalowania w systemie tylko wbudowana funkcjonalność OS X.

A wymieniam ją tutaj bo to genialne narzędzie, tak wygodne, że jeśli jesteś przyzwyczajony do używania głównie klawiatury, praktycznie znika potrzeba posiadania jakichkolwiek ikon w docku czy na pulpicie.

Spotlight to wyszukiwarka, ale za nic w świecie nie mylcie jej z wyszukiwarką w Windows, bo Spotlight przeszuka cały twój system, pliki, dokumenty i pocztę szybciej niż zdążysz kliknąć „szukaj” w Windows.

Zacznij korzystać natychmiast. Nie przestaniesz.

A do tego sprytna bestia liczyć potrafi. ;)

Kadu

Klient GG na Mac. Szczerze mówiąc nie jestem z niego zbyt zadowolony, bo często się wiesza i sprawia problemy przy konferencjach. Czego wy używacie?

FontExplorerX

Darmowa wersja programu do zarządzania fontami zainstalowanymi w systemie w zupełności wystarczy większości użytkowników.

Przydatne strony, porady, artykuły

Coda Clips - Bardzo przydatny zestaw Clipsów do Cody z bardzo wygodnym one-click-install.
panic.com/coda/developer/ - Materiały dla użytkowników Cody. Pluginy, zestawy kolorystyczne itp.
mac.appstorm.net - bardzo dużo bardzo przydatnych informacji, recenzji programów, makowych tipsów i tricków.
30 Must-Have Tweaks For Your Mac
Five Reasons Why Developers are Switching to Mac
Mac Hacks: 17 AppleScripts To Make Your Life Easier

Więcej aplikacji, roundups

Open Source Mac - Kolekcja darmowych, open-source'owych aplikacji dla OS X
40 Mac Freewares and Open Source Software for Web Designers
10 Clipboard Managers for OS X
15 mac apps web designers should have in their dock
Readers Pick: 30+ Incredibly Useful Mac Apps for Web Design
10 Mac FTP Apps for Every Budget
15+ Incredibly Useful Mac Apps For Freelance Web Designers
30+ Amazing Mac Apps for Developers
35 Absolutely Essential Mac Apps
25 Free Mac Apps That Will Boost Your Productivity
Four Useful Quicklook Plugins - pluginy do Quicklook (Nie wiedziałem nawet, że jest coś takiego :) A są i jest ich jeszcze więcej na qlplugins.com/)
30 MAC Dashboard Widgets for Web Designers and Developers