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.

Jak działa Google Web Fonts?

Podstawową zaletą Google Web Fonts jest prosta obsługa. Wystarczy minimalna wiedza na temat działania HTML i CSS, aby uatrakcyjnić typografie swojej strony.

Pierwszym krokiem jest dodanie niezbędnych fontów do naszego serwisu. Dokonujemy tego poprzez dodanie odpowiedniego linku do styli udostępnionych na serwerze Google (informacje o tym, gdzie generować ten link znajdują się w dalszej części artykułu):

<link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet' type='text/css'>

Powyższy kod należy wkleić w sekcji <head> pliku HTML interesującej nas strony internetowej. Tym sposobem font o nazwie Ovo, został dodany do naszego serwisu i od teraz możemy go używać w komendzie CSS font-family. Na przykład, powiedzmy, że chcemy użyć niestandardowej czcionki w nagłówku naszego artykułu, do tego celu posłuży nam kod:

article h1 {
  font-family: 'Ovo', serif;
  (dalsze style dla nagłówka)
}

I tym sposobem skorzystaliśmy z usług Google Web Fonts. Tak jak pisałem jest to niezwykle prosta i szybka metoda na uzyskanie interesującej niestandardowej czcionki na swojej stronie internetowej.

Zbieranie informacji

W tym konkretnym przypadku, krok ten był nieistotny. Jednak zawsze po uzgodnieniu warunków z klientem, musimy zebrać jak najwięcej informacji na temat zainteresowanej firmy, jej branży, oraz docelowych klientach. Łatwo wyobrazić sobie sytuacje i konsekwencje, gdzie np. dla kancelarii prawniczej przygotujemy, wielokolorowe logo w luźnym klimacie. Intuicyjnie możemy stwierdzić, że coś się nie zgadza.

Pomysły i szkice

Posiadając już niezbędne informacje przystępujemy do najistotniejszego etapu pracy, czyli szkicowanie pomysłów. Bierzemy blok lub zeszyt, ołówek, siadamy wygodnie i przelewamy wszystkie pomysły na papier. Działa to na zasadach podobnych do burzy mózgów. Na tym etapie nie ma złych pomysłów i nie powinno się od razu wykluczać żadnych projektów.

Teraz nadamy lekkie gradienty naszemu rysunkowi. Jako pierwszego będę używała narzędzia Narzędzie Siatka (U) (opisane w artykule Realistyczny wektor w Adobe Illustrator – Filiżanka). Oczywiście nie będziemy stosować aż tak dużego zagęszczenia linii gdyż efekt ma być lekki. Ja użyłam gotowej palety kolorów zawartej w bibliotece Adobe Illustratora (panel Próbki, Menu biblioteki próbek->Odcienie skóry, trzy palety Skintone 1, Skintone 2, Skintone 3). Pamiętajmy, że jeżeli chcemy zachować kontur jakiegoś obiektu musimy go skopiować, wyrównać i ustawić z zerowym wypełnieniem nad kolorową warstwą gdyż elementy z siatką nie mogą mieć konturów.

Podobnie postępujemy z ciałem. Zastosowałam tu technikę maskowania taką samą jak dla uszka filiżanki ze względu na skomplikowany kształt elementu.

Podczas 2 dni przeprowadzki, kiedy nie byłem dłużej przy komputerze, liczba nowych wpisów w moich RSS wynosiła ponad 300. Oczywiście część z tych wpisów przeglądnę pobieżnie, część w ogóle mnie nie zainteresuje, ale wiele jest takich, których nie przeczytanie będzie ogromną stratą. Dlatego warto tego typu wpisy zapisywać do późniejszego przeczytania. W tym artykule przedstawię dwa stosowane przez mnie narzędzia.

Delicious

Delicious jest świetnym miejscem do przechowywania ciekawych i interesujących artykułów, które chcemy zachować do późniejszego czytania. Dzięki systemowi tagów mamy możliwość doskonałego segregowania informacji. Istnieje możliwość przeglądania bookmarków innych osób, oraz najpopularniejszych linków dla konkretnych kategorii. Oczywiście jeżeli chcemy zachować pewne linki dla siebie mamy możliwość prywatnego przechowywania. Polecam stworzyć sobie tag o nazwie np. „do_przeczytania”, i tam wrzucać artykuły, które w danym momencie nie mamy czasu przeczytać.

Flickr

Flickr jest jednym z najciekawszych portali społecznościowych, umożliwiających dzielenie się swoimi zdjęciami ze znajomymi i osobami odwiedzającymi serwis. Jednocześnie jest to prawdziwa kopalnia zdjęć, które możemy wykorzystać w swoich projektach i wpisach. Jedyne o czym należy pamiętać to wejść do zaawansowanego wyszukiwania i zaznaczyć opcje „Only search within Creative Commons-licensed content” oraz „Find content to use commercially”. Teraz przeszukując interesującą nas tematykę otrzymamy zdjęcia, które możemy wykorzystać w naszej pracy nawet w celach komercyjnych.

Przypominam, aby zawsze zapoznać się z licencją, akurat na Flickr najczęściej wymagane jest uznanie autorstwa, czyli podanie autora zdjęcia i linku do zdjęcia w serwisie. Nie jest to duży koszt za na prawdę wysokiej jakości zdjęcia.