Projekty pod kontrolą wersji

Subversion + TortoiseSVNSystem kontroli wersji służy programistom do śledzenia zmian w kodzie oraz ułatwia pracę, kiedy nad jednym projektem pracuje więcej niż jedna osoba. Dlaczego warto się z nim zapoznać? Nawet jeśli pracujesz nad swoimi projektami sam, kontrola wersji będzie służyć Ci jako kopia zapasowa, kalendarz prac, a przede wszystkim umożliwi Ci porównywanie zmian oraz powrót do stanu przed każdą zapisaną przez Ciebie zmianą, co w wielu przypadkach okazuje się zbawienne.

W tym poście zajmiemy się jednym z systemów kontroli wersji jakim jest Subversion (SVN) oraz jego klientem dla Windowsa Tortoise SVN. Postaram się pokazać jak go zainstalować oraz zacząć używać na własne potrzeby, lokalnie.

Działanie

Katalog naszego projektu łączymy z wcześniej założonym tzw. Repozytorium. Repo(zytorium) to miejsce na dysku (w jakimś katalogu), które będzie działało podobnie jak archiwum, zapisując informacje o stanie wszystkich plików z naszego projektu w bardzo dokładny sposób. Z tego archiwum będzie mogło korzystać wiele osób, zapisując do niego zmiany i pobierając te dokonane przez innych.

Instalacja

  1. Pobieramy subversion z ich strony i instalujemy
  2. Pobieramy i instalujemy Tortoisa odpowiedniego dla naszej wersji Subversion

W obu linkach podane są wersje 1.4.5, możesz poszukać nowszych, chociaż to wcale nie jest takie łatwe. Po zainstalowaniu (i prawdopodobnie restarcie) oprogramowanie jest niemal transparentne, jedyne co się zmienia to to, że mamy dodatkowe opcje w menu pod prawym klikiem na folderach i plikach.

Nowe pozycje w menu kontekstowym

Repozytorium

Na początku załóżmy sobie gdzieś folder, w którym będziemy trzymać wszystkie repozytoria. Jeśli posiadasz więcej niż jeden dysk twardy trzymaj folder z repozytoriami na innym dysku niż środowisko produkcyjne. W tym folderze dla każdego projektu będziesz zakładać osobny podkatalog np.

/Repositories/merixstudio.com

Po założeniu folderu kliknij na niego prawym przyciskiem myszki i z menu TortoiseSVN wybierz Create Repository Here. Po pojawieniu się menu wyboru systemu plików pozostaw zaznaczony pierwszy Native filesystem (FSFS) i zatwierdź.

Tworzenie repozytorium

Właśnie utworzyliśmy repozytorium, teraz musimy powiązać folder projektu z folderem repozytorium. Aby to zrobić klikamy prawym na folder projektu na środowisku produkcyjnym (nie w repozytoriach), np.

/www/merixstudio.com

Z menu wybieramy SVN Checkout. Pojawi się okienko checkout’u, w którym ustawiamy URL of repository na ścieżkę do naszego repozytorium (wyczyść zawartość pola, a potem kliknij przycisk przeglądaj […])

SVN Checkout

System coś sobie przemieli i w nowym okienku pozostawi nam do wyboru tylko OK. W folderze projektu (i w każdym jego podfolderze) pojawi się nowy podkatalog .svn, w którym subversion będzie trzymał potrzebne dla siebie informacje. Dzięki Tortoise ikonki plików i folderów w naszym exploratorze powinny otrzymać dodatkowe nakładki.

Nakładki Tortoise

Będą się one zmieniać w zależności od zmian w nich dokonanych, a także przewidzianych dla nich akcji. Najważniejsze dla nas ikonki na tym poziomie to

  • Zielona (ptaszek) - oznacza, że plik nie zmienił się od ostatniej synchronizacji z repozytorium
  • Czerwona (wykrzyknik) - oznacza, że plik się zmienił

Zauważ, że nowe pliki i foldery nie będą posiadały żadnej nakładki, póki nie zostaną wgrane do repozytorium. Również foldery, do których dodaliśmy nowe pliki nie zmienią ikonki na czerwoną.

To wszystko jeśli chodzi o założenie repozytorium i powiązanie z nim projektu. Będziemy to wykonywać jednorazowo dla każdej pracy, którą chcemy mieć pod kontrolą wersji. Przejdźmy do korzystania.

Korzystanie

Po powiązaniu projektu z repo w menu kontekstowym (folderu projektu) pojawiają się dwie nowe opcje, którymi będziemy najczęściej operować.

Commit oraz Update

Commit będzie tą opcją, z której będziemy korzystać najczęściej (a jeśli pracujemy sami właściwie jedyną). Służy do przesłania zmian dokonanych w projekcie do repozytorium. Po kliknięciu w tą opcję, pojawi nam się okno podsumowujące zmiany, w którym również możemy dodać informacje, na temat aktualnie wprowadzanej do repozytorium zmiany.

Commit

W polu message dobrze zapisać sobie czego tyczy się zmiana, np. Dodanie nowej pozycji do menu czy Poprawki w modelu autoryzacji. Pomoże nam to później rozeznać się w zmianach, które dokonywaliśmy bez konieczności sprawdzania różnic w plikach.

Lista Changes made, jak samo mówi za siebie to zestawienie zmian, które zostały dokonane. Zwróć uwagę, że nowe pliki i foldery, które nie znajdują się dotychczas w repozytorium nie będą domyślnie zaznaczone do wgrania. Należy zawsze odznaczyć i zaznaczyć ponownie opcję Select / deselect all (kiedy zamiast ptaszka mamy zielony kwadracik) oraz upewnić się, że wszystkie pliki są widoczne (Show unversioned files).

Po wprowadzeniu wiadomości oraz zaznaczeniu plików, które chcemy przesłać zatwierdzamy buttonem OK. Otworzy się okno, w którym będziemy mogli śledzić postępy przetwarzania plików i przesyłania ich do repozytorium - może to trochę zająć, zwłaszcza jeśli mamy dużą ilość lub wagę plików. Po skończeniu uaktywni się przycisk OK, którym zakończymy operację.

Pamiętaj, że operacja ta dokonuje się tylko odnośnie plików i katalogów w folderze w którym została wyzwolona, odpalaj więc zawsze Commit na samej górze folderu projektu. Dla przykładu, jeśli uruchomisz ją z folderu /merixstudio.com/images przesłane zostaną tylko pliki i foldery znajdujące się w katalogu images, te w głównym /merixstudio.com już nie.

Drugą operacją jest Update, to jakby przeciwieństwo Commita, dzięki update’owi pobieramy zmiany z repozytorium, które najczęściej zostały dokonane przez kogoś innego. Do korzystania z SVN’a dla siebie nie będzie nam to często potrzebne.

To generalnie wszystko co będzie potrzebne Ci do podstawowego korzystania z kontroli wersji. Opcję, z których możesz również często korzystać to Diff oraz Show log.

FTP

Subversion tworzy masę ukrytych folderów .svn w katalogu projektu, więc przegrywanie go na serwer może być dosyć kłopotliwe. W Total Commanderze z pomocą przychodzi nam Synchronizacja katalogów. Otwieramy folder projektu w jednym i folder projektu na ftpie w drugim oknie, klikamy Polecenia/Synchronizuj katalogi

W drugim polu (takim select/inpucie) zamiast *.* dajemy |.svn\ (i dalej jakieś katalogi np. |.svn\ editors\ filemanager\). Spowoduje to wykluczenie tych katalogów z porównywania. Bardzo przydatna opcja, nie tylko odnośnie SVN’a.

Total Commander

Drugi sposób to wyeksportowanie rzeczy z repo poprzez menu kontekstowe Tortoise albo przeciągając folder projektu prawym i wybranie SVN Export to here, a następnie przegranie go na serwer.

Problemy

Subversion niestety jest bardzo czułe, musimy ostrożnie dokonywać zmian, uważać żeby nie skasować czy przenieść gdzieś folderów .svn. Po jakimś czasie dojdziesz do wprawy, jednak co jakiś czas może pojawić się jakiś problem, który wydaje się bez wyjścia. Oczywiście możemy wtedy skasować repozytorium i stworzyć nowe, ale wtedy stracimy także historię wszystkich zmian do tej pory. Lepiej w takim momencie posłużyć się takim sposobem:

  1. Usuń wszystkie podkatalogi .svn z katalogu projektu (powiedzmy, że katalog ten nazywa się /Projekt).
  2. Przenieś wszystkie pliki projektu to innego katalogu (powiedzmy, że katalog ten nazywa się /Kopia).
  3. Folder projektu (/Projekt) ponownie powiąż z repozytorium przez Checkout i zrób Update.
  4. Nadpisz pliki w katalogu /Projekt tymi z katalogu /Kopia.
  5. Zapisz zmiany Commitem.

Powodzenia w korzystaniu z subversion.

Wyciskamy soki z Galerii CSS

CSS VaultZ założenia Galerie CSS to miejsca służące do prezentacji ciekawych stron internetowych. Są to swojego rodzaju miejsca ekspozycji prac twórców stron internetowych, globalne portfolia, archiwa dzieł… czy jak kto woli elitarne katalogi stron, w których nacisk położony jest nie na treść, lecz na formę w jakiej jest ona przekazywana.

Nie chodzi tu tylko o wygląd, istotne znaczenie oprócz design’u ma również wykonanie strony. Coraz więcej moderatorów galerii oceniając zgłoszone prace bierze pod uwagę nie tylko oparcie o CSSa, ale rzeczywistą separację warstw, poprawny kod oraz dbanie o dostępność.

Obecnie w sieci istnieje ponad 100 różnych galerii i jak to ze wszystkim bywa, niektóre są lepsze, niektóre gorsze. Zwykle pojawia się w nich od kilku do kilkuset stron miesięcznie - wszystko zależy od profilu. Te lepsze, które istniały od samego początku tego ruchu, są bardziej restrykcyjne - ciężko się do nich dostać. Tu liczy się nie tylko wygląd i poprawny kod, istotna jest dostępność, użyteczność oraz wzbogacanie doświadczeń użytkownika. Inne, tych niestety jest trochę, zamiast w jakość idą w ilość, chociaż większości nie można odmówić gustu jeśli chodzi o grafikę.

No i co ja mogę z tym zrobić?

Może się wydawać, że galerie to kolejne bezwartościowe zbiory stron i nie warto sobie nimi zaprzątać głowy. Wbrew pozorom można zyskać dzięki nim bardzo wiele, zwłaszcza jeśli masz lub planujesz mieć stronę internetową albo pracujesz w branży internetowej. Przekonaliśmy się o tym na własnej skórze, korzystamy z nich od dłuższego czasu, zarówno pasywnie jak i powiększając zawartość galerii serwisami, które tworzymy.

Inspirujemy się i poznajemy nowe rozwiązania

Na tym najbardziej skorzystają ludzie z branży, chociaż jeśli jesteś po drugiej stronie barykady, a planujesz redesign lub stworzenie swojej strony internetowej warto sprawdzić co w trawie piszczy. Pomoże Ci to wyklarować wizję swojej strony, a zebrane przez Ciebie adresy stron z “takimi właśnie” rozwiązaniami pozwolą ludziom, którym zlecisz jej tworzenie lepsze zrozumienie Twojego pomysłu.

CSS BeautyDla nas galerie to niewyczerpane źródło inspiracji. Na wszelki wypadek dodam, że chodzi tu o inspirację w rzeczywistym znaczeniu tego słowa, a nie jak zwykło się określać w Polsce kopiowanie cudzych pomysłów (pozdrowienia dla agencji eStorm). Przede wszystkim obserwując strony zamieszczane w galeriach jesteś na bieżąco z aktualnymi trendami w designie. Możesz dostrzec ciekawe kombinacje kolorów, świetne czcionki, nowe układy, zupełnie inne podejścia do znanych Ci tematów. Jeśli pracujesz dla klientów z określonego regionu, który posiada własne, silne trendy w designie (chociażby Rosja czy Chiny, Korea i Japonia) warto zapoznać się z obowiązującym u nich stylem zaglądając do lokalnych galerii.

Inspiracje mogą czerpać nie tylko designerzy. Pod pięknym płaszczem grafiki kryją się perełki dla koderów xhtml/css/javascript - poznasz świeże podejścia do spraw technicznych, które być może nie dawały Ci spokoju, nauczysz się wykorzystywać elementy xHTML’a, których nie sądziłeś, że kiedyś zastosujesz i stylować je w sposób o wiele prostszy i bardziej optymalny niż to robiłeś do tej pory. Warto również poszukać tam sposobów usprawnienia użyteczności strony. Nie raz będziesz przecierać oczy ze zdziwieniem, że takie efekty osiągnięto bez użycia flasha.

Budujemy sieci biznesowe i zawiązujemy grupy kreatywne

W galeriach bardzo często pojawiają się strony specjalistów od web’u, grafików, flashowców, ilustratorów, koderów czy programistów. Możesz łatwo nawiązać kontakty z innymi specjalistami i wspólnie z nimi tworzyć ciekawe projekty na rynki całego świata. Poznasz sposoby podejścia do pracy w tej branży w innych krajach, na pewno nauczysz się czegoś nowego o innych rynkach. Oczywiście wypadałoby znać angielski.

Dzięki temu, że sami występowaliśmy kilkakrotnie w najbardziej prestiżowych galeriach udało nam się znaleźć pracowników, którzy są z nami do tej pory i na głowę biją najlepszych ludzi z rekrutacji poprzez prasę, fora branżowe czy portale pośrednictwa pracy. Ci ludzie to pasjonaci, z chęcią rozwijający swoje umiejętności i przede wszystkim są samodzielni - współpraca z nimi jest czystą przyjemnością.

Przyjmujemy krytykę i uczymy się na własnych błędach

W większości galerii dodana przez nas strona podlega ocenom. Zwykle każdy głosuje raz (w skali od 1 do 5 czy 10), ale może także zostawić komentarz. Odwiedzający galerie często bardzo dokładnie przeglądają strony i zostawiają opinie, które mogą zawierać cenne wskazówki. Czasami obserwatorzy z zewnątrz potrafią dostrzec błędy, które my sami przeoczyliśmy, warto wziąć pod uwagę ich zdanie.

Chwalimy się i zbieramy pochwały

Jak już wspomniałem, dostanie się do prestiżowych galerii nie jest proste - trzeba wykazać się nie tylko niebanalną grafiką i poprawnym wykonaniem, ale spełnić szereg innych wymagać + zademonstrować coś innowacyjnego. Żeby zaistnieć w większości wystarczy dobra grafika i poprawne wykonanie strony - zgodne ze standardami, czyli generalnie tak jak trzeba i jak powinno się wykonywać serwisy. No właśnie, tu zaczynają się schody. Mamy 2008 rok, a poziom świadomości na temat standardów sieciowych wśród polskich agencji jest dramatyczny.

StylegalaNiezależnie od profilu galerii zamieszczenie tam Twojej strony jest zawsze jakimś wyróżnieniem. Nie jest to może nic wielkiego, ani to Oscar, ani wygrana w totolotka, ale cieszy. Przy odrobinie sprytu, możesz to wykorzystać marketingowo. Nieważne jaki biznes prowadzisz, dla klientów fakt, że Twoja strona została w ten sposób “nagrodzona” będzie czymś wpływającym pozytywnie na Twój wizerunek i da Ci okazję do przypomnienia się. Jeśli zatrudniasz pracowników z pewnością ucieszy ich informacja, że firmę wyróżniono w “międzynarodowej galerii”.

Sami jestesmy całkiem dumni, że byliśmy pierwszą polską stroną na Unmatched Style, (później dostaliśmy się do niej ponownie, a z tego co widzę jesteśmy jedyni pod tagiem Poland) prawdopodobnie też byliśmy pierwsi na CSS Beauty, a już kilka lat temu, kiedy dopiero zaczynaliśmy gryźć temat standardów widać nas było w CSS Vault.

Rzucamy mięso wyszukiwarkom

Aktywne linki do nas na innych stronach wpływają pozytywnie na wyniki naszego serwisu w wyszukiwarkach. Dzięki pojawieniu się w galeriach otrzymujemy je w serwisach cechujących się zwykle wysokim pagerankiem (czy on działa czy nie to już inna historia, niemniej jednak punktowanie za linki zwrotne nadal działa). Dodatkowo w niektórych galeriach mamy możliwość wprowadzenia opisu oraz tagów, co jest dosyć istotne (oczywiście trzeba je odpowiednio dobrać dla naszej branży, w języku w jakim funkcjonuje galeria, więc zwykle angielskim).

Lista Pageranków Galerii na dzień dzisiejszy:

  • Pagerank 8: CSS Vault
  • Pagerank 7: CSS Beauty
  • Pagerank 6: Stylegala, Unmatched Style, CSS Mania, CSS Import, Web Creme, CSS Elite, W3C Sites, Screenfluent, Styleboost, The Best Designs, Best Web Gallery,
  • Pagerank 5: Visual Safe, Designer Source, Inspiration King, CSS Tux, CSS Princess, CSS Hazard, Style Crunch, CSS Website, Daily Slurp, CSS Clip, CSS Galleries Submit CSS, Light on Dark, CSS Heaven, CSS Blast, Design Shack, CSS Galaxy, Screenalicious, CSS Drive, CSS Based, Professional on the Web, Most Inspired, CSS Smooth Operator
  • Pagerank 4: CSS Remix, W3Cs, CSS Ocean, CSS 2.0, CSS Cool, CSS Collection, CSS Love,CSS Design Yorkshire, CSS Impress, Link Creme, CSS Container, CSS Flavor, Portfolio Base
  • Pagerank 3: CSS Daddy, Design Snack, CSS Sevban, CSS Bloom

↑ Linki do wypisanych wyżej galerii na końcu posta

Ściągamy do siebie użytkowników i staramy się ich zatrzymać

Ile odwiedzin możesz wyciągnąć z Galerii? Załóżmy, że Twoja strona wygląda fenomenalnie i jest wykonania zgodnie ze standardami, trafiasz na 90% galerii. W szczytowym momencie odwiedza Cię około 4 tysięcy użytkowników dziennie (unikalnych), potem oczywiście nagle spada, gdy przechodzisz ze stron głównych do archiwów, ale po dwóch miesiącach nadal notujesz około tysiąca wizyt każdego dnia (jakieś 800 uv). Całkiem niezły wynik, prawda?

Statystyki po dodaniu do Galerii CSS

↑ Zrzut statystyk przedstawia początkowy szczyt odwiedzin związany z występowaniem na stronach głównych galerii i późniejszy systematyczny spadek odzwierciedlający przesuwanie się głębiej i głębiej w achiwum.

Style CrunchŚciąganie ruchu tylko po to, żeby klaskać w dłonie przy przeglądaniu statystyk jest bez sensu. Jeśli jednak prowadzisz jakąś anglojęzyczną stronę sytuacja ma się zupełnie inaczej. Nie trzeba być marketingowcem, żeby wiedzieć, że najwięcej skorzystają na tym strony produktowe, zwłaszcza takie, których przedmiot prezentowany jest bezpośrednio na stronie głównej. Dlaczego? Ponieważ ruch z galerii ma bardzo wysoki współczynnik odbicia, odbija się oczywiście od strony głównej. W przypadku większości odwiedzających masz tylko jedną szansę na przykucie ich uwagi.

Wysyłając zgłoszenie do galerii najlepiej zrobić to w niedzielę wieczorem, w każdym razie nie przed weekendem - wtedy oglądalność galerii drastycznie spada, a po weekendzie nasza strona już znajduje się w archiwum - czyli tracimy ten największy impuls odwiedzin.

Dodajemy stronę do galerii

Na każdej ze stron zwykle znajduje się formularz zgłoszeniowy, wystarczy go wypełnić i wysłać. Przed wysłaniem jeszcze raz sprawdź swoją stronę pod kątem tych punktów: design, xhtml, css, usability, ux, accessibility. Pamiętaj, że tworzysz stronę dla użytkownika, zadbaj o niego, a goście z galerii na pewno to dostrzegą i docenią.

Lista ponad 60 Galerii CSS

Życzę powodzenia! A jeśli potrzebujesz pomocy przy stworzeniu odpowiedniej strony, odezwij się do nas, mamy w tym całkiem spore doświadczenie… i przystępne ceny - paragraf sponsorowany przez dział marketingu i sprzedaży :-)

AKWA - Armatura Przemysłowa

Płozy, kształtki, hydranty, zasuwy, akcesoria.. Nie, to nie są nowe gadżety naszych developerów tylko asortyment firmy AKWA - jednego z wiodących na rynku polskim producentów armatury przemysłowej. Wykonany przez nasze studio serwis internetowy udostępnia internautom zarówno szczegółowe informacje o ofercie firmy, jak również mechanizmy Systemu Doboru Elementów dla projektantów sieci wodociągowych. Dzięki nim już w fazie projektowania sieci mogą oni w prosty sposób wybrać elementy z oferty firmy, spełniające postawione wytyczne oraz założenia projektowe.

Dzięki systemowi zarządzania treścią pracownicy firmy AKWA mogą w łatwy sposób modyfikować zawartość stron, a także zarządzać elementami dostępnymi w części serwisu przeznaczonej dla projektantów.

Zapraszamy do odwiedzania serwisu pod adresem: www.akwa.com.pl

Nazwy pól formularza a Javascript

Dostaliśmy wiadomość, że nie działa formularz dodawania komentarzy na naszym blogu. Szybkie sprawdzenie kodu HTML i skryptów wykorzystywanych do walidacji wykazało, że nie działa metoda form.submit() formularza. Dlaczego nie działa - to już nie było takie oczywiste… Po raz kolejny niezastąpiony okazał się Firebug. Okazuje się, że akurat w naszym przypadku form.submit odnosił się do elementu button, któremu niebacznie nadaliśmy atrybut name="submit". Dla nas nauczka, dla was słowo przestrogi na przyszłość.

Bardzo dziękujemy Dominikowi Paszkiewiczowi za wskazanie nam tego błędu. Pozdrawiamy!

Merix Reaktywacja

Od ukazania się poprzedniej odsłony naszej strony firmowej minęło już ponad półtora roku. W tym czasie nasza branża wykonała kolejny skok jakościowy. Wykorzystanie standardów sieciowych nie jest już tak gorącym tematem, a stało się chlebem powszednim większości agencji (oby! – jeśli nadal tniesz na tabelkach, wykorzystujesz font i pliki spacer.gif – pędź się przeszkolić, a nie będziesz żałować). Frameworki dla języka Javascript nabrały wiatru w żagle i stanowią już obowiązkową część większości stron. Mody w designie jak zwykle przychodziły i odchodziły zanim część grafików zdążyła je w ogóle uwzględnić w swoich projektach. Trend Web2.0 (jakkolwiek rozumieć ten termin) zagościł na dobre w świadomości dużej części użytkowników Internetu (wpłynął również dość ogłupiająco na dużą część Project Managerów – “gradienty, więcej gradientów!”).

Co my na to?

Również my musimy nadążać za ciągłymi zmianami i uwzględniać je w naszej pracy. Najlepiej o tym co robimy powinna świadczyć nasza własna strona. Dlatego właśnie cieszymy się, że możemy Wam przedstawić jej kolejną wersję. Odświeżony projekt graficzny, nowe projekty w portfolio, poszerzona funkcjonalność dużej części serwisu, a to wszystko okraszone sporą porcją skryptów, które mamy nadzieję, uprzyjemnią Wam korzystanie z naszej strony. O samym procesie twórczo-produkcyjnym postaramy się napisać w jednym z kolejnych wpisów. Co do samych wpisów…

Co się z nami działo?!

Być może Wasze czujne oczy dostrzegły, że ten wpis jest pierwszym od października zeszłego roku. Pozostaje nam się wstydzić, nie wspominać więcej tego cichego okresu i poprawić w przyszłości. Jest jednak jedna kluczowa zmiana, którą wprowadzamy wraz z tą notką. Rok temu pisaliśmy, dlaczego blog będzie prowadzony w języku angielskim. Teraz wypada napisać, dlaczego wracamy do polskiego. Angielska blogosfera jest już w wysokim stopniu nasycona informacjami z zakresu tworzenia stron internetowych i wszystkiego co sie z tym wiąże. Sami mamy problem z filtrowaniem setek wiadomości dziennie, które trafiają do nas dzięki kanałom RSS. Jeszcze jeden blog nie tworzyłby żadnej wartości dodanej… Jednocześnie wydaje się nam, że dobrych polskich blogów jest tylko kilka. Postaramy się przynajmniej nie zaniżać ogólnego poziomu.

Kilka słów na koniec

Ten wpis zamyka etap projektowania, budowy, uzupełniania treści i uruchamiania strony. My idziemy świętować, wam również życzymy miłego dnia!
Aha, przy okazji – jest u nas praca.