Blogger.com

Darmowa platforma blogowa pod patronatem Googla. W mojej opinii najlepszy darmowy wybór w danym momencie. Po ostatnim odświeżeniu wizerunku wszystkich aplikacji Googla, panel administracyjny działa rewelacyjnie. Dodawanie kolejnych artykułów jest wygodne i wyjątkowo proste. Założenie takiego bloga posiadając konto w Google to naprawdę kilka minut.

Zalety:

• prosty i czytelny interfejs
• ciekawe i ładne szablony blogów
• łatwa obsługa
• możliwość dodania własnych reklam AdSense

Wady: Brak

SamoSans-Regular

Darmowa jest tylko czcionka typu Regular.

Czym jest Pinterest?

Pinterest to kolejna aplikacja internetowa typu „bookmark”. Czyli umożliwiająca zapisywanie i przechowywanie ciekawych materiałów znalezionych w Internecie, oraz śledzenie ludzi o podobnych zainteresowaniach. Hmmm… brzmi znajomo, prawda? Czym zatem Pinterest różni się od aplikacji typu Delicious, Google Bookmark, Diigo, Mister Wong i wielu innych? Zasadnicza różnica polega na tym, iż Pinterest skierowany jest na przypinanie i dzielenie się obrazkami, zdjęciami i infografikami. Dodatkowo swoimi „pinami” możemy dzielić się ze znajomymi na Facebooku i Twitterze.

Wygląd i działanie Pinterest

Aby zacząć pracę z Pinterest musimy się zarejestrować. W aplikacji tej zastosowano interesujący model rejestracji, który polega na prośbie o zaproszenie do Pinterest. Jest to ostatnio modny sposób zdobywania zarejestrowanych użytkowników, pozwala w prosty sposób kontrolować napływ nowych użytkowników. Nie bez znaczenia jest także aspekt psychologiczny tego modelu, gdyż na pewien sposób zostajemy zaproszeni do serwisu co podświadomie nastawia nas pozytywnie do aplikacji. Osobiście zaproszenie otrzymałem już po kilku godzinach. Podczas rejestracji przechodzimy kilka prostych kroków: wpisujemy dane, podajemy interesujące nas kategorię oraz wybieramy podział dla kategorii do których będziemy przypinać zdjęcia.

Skrócona składnia tablic

Bardzo fajne wprowadzenie skróconej składni. Możemy definiować naszą tablice w stary sposób:

$numbers = array('one','two','three');

Ale od wersji 5.4 możemy to zrobić tak:

$numbers = ['one','two','three'];

$numbers = ['one' => 1, 'two' => 2, 'three' => 3];

Wykorzystanie funkcji filter w CSS3

Bardzo interesujący poradnik, krok po kroku przedstawiający działanie funkcji filter. Całość została zaprezentowana w formie przykładowego portfolio. Efekt jest rewelacyjny. Zachęcam do zapoznania się z artykułem i analizą dostępnego kodu.

Dlaczego ciężko o ciekawy artykuł o PHP

Od początku wychodziłem z założenia pomijania typowych tematów dla blogów o PHP, czyli opisywania podstaw programowania obiektowego, czy tłumaczenia kolejnych wzorców projektowych. Raz, że zagadnienia te były opisane do bólu już parę lat temu, a dodatkowo uważam, iż tego typu wpisy najlepiej wyjaśnione są w przeznaczonej do tego literaturze.

Postanowiłem, że najlepszym rozwiązaniem będzie pisanie o bieżących problemach, które napotkam podczas pracy dla swoich klientów, czy projektów realizowanych w wolnym czasie. Tu pojawił się jednak problem. Język PHP jest tak popularnym i prostym językiem, że znalezienie rozwiązań większości napotkanych problemów kończyło się na kilkuminutowym korzystaniu z googla. Z drugiej strony opisywanie trudniejszych zagadnień jest kłopotliwe, ze względu na problem wyciagnięcia kodu z kontekstu aplikacji. Jest to jedna z wad nie korzystania z popularnych Framewoków.

W tym miejscu od razu chciałbym przestrzec przed nadmiernym wykorzystaniem tej funkcji, najczęściej strony pełnią funkcje informacyjną i nie jest wymagane, aby cały projekt nam skakał, albo nie daj boże grał.

Jak wygląda funkcja CSS3 transition?

transition : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

Jest to skrócona wersja tej funkcji, podobnie jak w przypadku border, możemy kolejno definiować dane parametry np.: transition-property, transition-duration, transition-timing-function oraz transition-delay.

Opiszmy teraz za co odpowiadają dane funkcje:

• transition-property – odpowiada za to jaką funkcje mamy objąć transition, czyli jeżeli chcemy aby z czasem zmienił się nam kolor tła, to ustawiamy – background-color. Domyślnym parametrem jest all, czyli CSS transition będzie działa na wszystkie obsługiwane funkcję. Oto lista obsługiwanych parametrów.
• transition-duration – czas trwania przejścia.
• transition-timing-function – funkcja czasu, zaprezentowana w formie krzywej beziera. Istnieje 5 zdefiniowanych funkcji gotowych do wykorzystania pod nazwami: ease, linear, ease-in, ease-out, ease-in-out. Możemy także zdefiniować własną funkcję przy pomocy cubic-bezier. Pomocna w tym przypadku może okazać się strona http://cssglue.com/cubic.
• transition-delay – możliwość zdefiniowania opóźnienia całej przemiany.

Wsparcie dla przeglądarek

CSS transtions obsługiwane jest obecnie przez Chrome, Safari, Opera 10.5+, Firefox 4+. Z zapowiedzi wynika, iż wersja 10 IE również ma posiadać ich obsługę, czy w pełnym stopni? Trudno powiedzieć. Oczywiście należy pamiętać o dodawaniu prefilksów: -o-, -moz-, -webkit-, oraz -ms- właśnie ze względu na przyszłość.

Podstawowy HTML

Zaczniemy jak zwykle od początku, czyli od pokazania wykorzystanego kodu HTML.

<div class="content">

  <div class="image">
    <img src="http://placekitten.com/100/150" alt="" />
    <div><img src="http://placekitten.com/100/150" alt="" />
      <div class="fade"></div>      
    </div>
  </div>

  <div class="image">
    <img src="http://placekitten.com/100/150" alt="" />
    <div><img src="http://placekitten.com/100/150" alt="" />
      <div class="fade"></div>
    </div>
  </div>

</div>

Dla wygody interesujące nas obrazki umieszczam w jakimś kontenerze, w tym przypadku o nazwie klasy content. Obrazek wraz z jego odbiciem umieszczam w kontenerze o klasie image. Kolejny div odpowiada za nasze odbicie lustrzane, więc w nim umieszczamy drugi raz interesujący nas obraz, który potem za pomocą CSS3 odwrócimy i zasłonimy półprzezroczystym gradientem stworzonym dzięki pustemu divowi o klasie fade.

W tym miejscu warto zauważyć konieczność dublowania tego samego obrazka, co prawda wczyta się on tylko raz, ale w dużych ilościach efekt ten może lekko zwolnić naszą przeglądarkę. Warto więc ostrożnie korzystać z tego rozwiązania.

Według mojej obecnej wiedzy słowo wireframing, nie posiada naturalnego polskiego odpowiednika, więc w artykule będę stosował angielskie nazewnictwo, jeżeli ktoś z Was zna polską nazwę, proszę podzielić się w komentarzu.

Wireframing w swojej naturalnej postaci ograniczał się do kartki papieru i ołówka, gdzie rozrysowywało się plan naszego kolejnego serwisu. Jednak wraz z popularyzacją tego typu czynnością, społeczność internetowa (jak zwykle zresztą) postanowiła sobie ułatwić pracę, poprzez odpowiednio przygotowane narzędzia i aplikacje, zarówno internetowe jak i desktopowe. W artykule tym chciałbym przedstawić kilka interesujących narzędzi wspomagających tworzenie Wireframe.

Pencil Project

Pencil Project to ciekawa aplikacja działająca zarówno jako wtyczka do FireFoxa, oraz jako aplikacja desktopowa możliwa do zainstalowania na systemach Windows i Linux. Narzędzie jest rozbudowane i posiada szeroką kolekcje kształtów, w tym przypominającą szkice rysowane ołówkiem. Aplikacja jest stosunkowo prosta w obsłudze i krótka chwila zapoznania się z interfejsem pozwala na swobodne działania w programie.

Pencil jest produktem darmowym.