Operacje na ciągach znaków to jedne z popularniejszych zadań programistycznych  realizowanych w typowym projekcie serwisu internetowego tworzonego przy pomocy PhP. Jedną z popularnych operacji wykonywanych na ciągach znaków to konwersja na ciągi złożone jedynie z małych liter. Realizacja tego zadania jest raczej trywialna. Wystarczy, że użyjecie dostępną w PhP funkcję strtolower() lub w przypadku zamiany pierwszej litery lcfirst().

Zadanie robi się już nieco trudniejsze gdy przyjedzie Wam pracować z ciągami znaków wśród których znajdą się litery odpowiadające znakom diakretycznym charakterystycznym dla danego narodowego alfabetu. Użycie funkcji strtolower oraz lcfirst nie spowoduje że tego typu duże litery będą zamienione na małe. Znaki wykraczające poza zakres liter ‚alphabetic’ są pomijane przez te funkcję.

W takich sytuacjach z pomocą przyjdzie Wam funkcja mb_strtolower($string, $encoding) dostępna w ramach rozszerzenia Multibyte String Functions. Drugi (opcjonalny) argument tej funkcji określa kodowanie znaków konwertowanego ciągu znaków. Pozwala to na obsłużenie praktycznie każdego języka jaki jest obecnie używany w internecie. Warto dodać, że rozszerzenie to nie jest domyślnym rozszerzeniem PhP a co za tym idzie, nie każdy na każdym hostingu możliwe będzie skorzystanie z funkcji mb_strtolower().

W ramach uzupełnienia tematu dodam jeszcze mały tutorial z zakresu MySQL odpowiadający na pytanie: A co zrobić w przypadku, gdy to w bazie danych w jednej z kolumn tabeli mam ciąg znaków, który w trwały sposób chciałbym zamienić na wyrazy składające się tylko z małych liter. Oczywiście można tę operację wykonać po stronie PhP za pomocą funkcji wymienionych wyżej. Jednak znacznie bardziej optymalnym i szybszym rozwiązaniem będzie wykonanie tej operacji za pomocą pojedynczego zapytania UPDATE. Poniżej znajdziecie przykład tego typu zapytania SQL:
UPDATE `tabela` SET `nazwa_kolumny`=LOWER(`nazwa_kolumny`);
Po wykonaniu tego zapytania, we wszystkich rekordach w kolumnie `nazwa_kolumny` znajdą się ciągi znaków składające się tylko z małych liter.

Oczywiście wykonanie takiego zadania jest możliwe na poziomie odpowiedniej konfiguracji serwera. Jednak w przypadku zdecydowanej większości hostingów, zrealizowanie takiego zadania nie jest możliwe. W przypadku typowego wirtualnego hostingu jedynym sensownym rozwiązaniem jest wykorzystanie dobrodziejstwa pliku konfiguracyjnego .htaccess serwera Apache dla danego podkatalogu.

Poniżej znajdziecie odpowiedni kod dzięki któremu apache do każdego nagłówka określonego pliku doda deklarację wieku danego pliku:

<IfModule mod_headers.c>
 <FilesMatch "\.(jpg|jpeg|png|gif|swf|JPG)$">
 Header set Cache-Control "max-age=4838400, public"
 </FilesMatch>
 <FilesMatch "\.(css|js)$">
 Header set Cache-Control "max-age=4838400, private"
 </FilesMatch>
 </IfModule>

W zasobach internetu znajdziecie inne podobnego rodzaju rozwiązania, warto jednak zwrócić uwagę, że w przypadku plików typu css i js Cache-Control musi mieć atrybut Private a nie Public. W przeciwnym wypadku aplikacja PSI w dalszym ciągu będzie wykazywać Wam te pliki jako takie, które nie mają określonej żywotności.

Pewnie niektórzy z Was zrodzi się pytanie: Czy te zmiany mają wpływ tylko i wyłącznie na punktację w PSI?

Oczywiście wprowadzanie tych zmian tylko i wyłącznie w celu uzyskania lepszego wyniku nie ma większego sensu (poza satysfakcją). Zdecydowanie ważniejszą korzyścią jest to, że dzięki tym zmianom Apache instruuje przeglądarkę, aby w pierwszej kolejności starała się ładować pobierane zasoby z lokalnego dysku komputera użytkownika, a nie z sieci. Oczywiście przy pierwszym wywołaniu danego elementu (np. obrazka jpg) musi on zostać pobrany, jednak każde kolejne wywołanie tego elementu będzie powodowało odwołanie do pliku znajdującego się w cache przeglądarki. Zdecydowanie skraca to czas ładowania się stron, oraz zmniejsza ilość danych przesyłanych między serwerem a komputerem użytkownika.

A jak zmieniło to wynik uzyskiwany przez moją stronę w PSI? Poniżej znajdziecie zrzut:

Jak widać naprawdę niezły skok :).

W pliku css możliwe jest to za pomocą @fotn-face. W przypadku większości przeglądarek wystarczający jest plik TTF, niestety Internet Explorer jest tu wyjątkiem wymagającym specjalnego traktowania. Od wersji 6 do wersji 8 operacja ta obsługiwana jest za pomocą pliku z EOT (Embedded OpenType).

Dosyć dużym problemem jest wygenerowanie prawidłowo działającego pliku EOT. Teoretycznie pomoc powinno stanowić narzędzie WEFT dostarczane przez Microsoft. Niestety program ten jest bardzo stary i w większości wypadków mówiąc delikatnie działa mało zadowalająco (bardzo często zawiesza się oraz wypuszcza nieprawidłowe pliki). Obecnie jedynym w pełni działającym narzędziem (jakie znalazłem) umożliwiającym utworzenie sprawnego pliku EOT jest konwerter online dostępny pod wskazanym adresem:
http://www.kirsle.net/wizards/ttf2eot.cgi

IE9 wnosi kolejną zmianę do obsługi ładowanych czcionek. W tej wersji przeglądarki obsługa opiera się na nowym formacie plików WOFF (Web Open Font Format) opracowanym przez W3C. Najprawdopodobniej w przyszłości będzie to ogólny standard przyjęty przez wszystkie popularne przeglądarki.

Stosowanie @font-face w pliku CSS, wymaga bardzo starannej deklaracji, szczególnie istotna jest kolejność formatów plików. Poniżej znajdziecie prawidłową kolejność, która powinna działać poprawnie na wszystkich popularnych przeglądarkach (również mobilnych):

@font-face {
font-family: ‚MyWebFont';
src: url(‚/katalog/nazwaPliku.eot’);
src: url(‚/katalog/nazwaPliku.eot?#iefix’) format(‚embedded-opentype’),
url(‚/katalog/nazwaPliku.woff’) format(‚woff’),
url(‚/katalog/nazwaPliku.TTF’)  format(‚truetype’)
font-weight: normal;
font-style: normal;
}

Pewnie w tym momencie zaświecą się oczy wielu osobom, które chciały by ukryć w ten sposób arkusz stylów przed „przeciętnymi” użytkownikami. Niestety muszę ostudzić Wasz zapał, gdyż ta metoda linkowania ma również jedną bardzo dużą wadę dyskwalifikującą ją z powszechnego użycia … w tej chwili metoda ta jest obsługiwana jedynie przez Operę i Firefoxa.

W dalszym ciągu tego sposobu ładowania pliku CSS można użyć jeśli chcemy dodać „spersonalizowane” style dla przeglądarek obsługujących tę metodę linkowania. Na chwilę obecną to chyba jedne sensowne zastosowanie dla tej metody.

Jednym z popularnych zadań jakie może realizować GD to konwersja tekstu do pliku graficznego. Poniżej znajdziecie przykładowy listing w którym przestawiam realizację takiej operacji. Oczywiście należy potraktować ten kod bardziej jako przykład możliwości niż samo rozwiązanie tego zagadnienia.

<?php
header('Content-Type: image/png');

imagepng($im);
imagedestroy($im);
?>

Omawianie początkowego kodu zawierającego definicję tekstów poddawanych konwersji pomijam, właściwe wykorzystanie GD2 rozpoczyna się na etapie tworzenia zasobu zawierającego obrazek. Za działanie to odpowiada funkcja: imagecreatetruecolor(). Argumenty tej funkcji to szerokość oraz wysokość utworzonego obrazka. Funkcja zwraca identyfikator zasobu lub „false” w przypadku błędnego działania. Utworzony obrazek będzie miał założone wymiary oraz zostanie wypełniony czarnym kolorem.

W kolejnym kroku definiowane są kolory przypisane do utworzonego obrazka. Operację tę realizuje funkcja imagecolorallocate(resource $image , int $red , int $green , int $blue ). Argumenty tej funkcji to: $image – identyfikator zasobu, $red – poziom wartości koloru czerwonego 0-255, $blue – poziom wartości koloru niebieskiego 0-255, $green – poziom wartości koloru zielonego 0-255. Jeśli zależy Wam aby przypisany kolor odpowiadał konkretnej barwie, to w celu uzyskania wartości jego składowych w przestrzeni barw RGB, najlepiej skorzystać z jednego z programów graficznych (GIMP, Photoshop) lub innego narzędzia, gdzie możecie podejrzeć te wartości.

Tak jak pisałem wcześniej, utworzony obrazek będzie w całości wypełniony czarnym kolorem. Korzystając w funkcji imagefilledrectangle() wypełnimy go w całości białym kolorem. Funkcja ta ma następujące argumenty: resource $image – identyfikator zasobu , int $x1 – wartość współrzędnej x punktu początkowego , int $y1 – wartość współrzędnej y punktu początkowego  , int $x2 – wartość współrzędnej x punktu końcowego, int $y2  – wartość współrzędnej y punktu końcowego, int $color – identyfikator koloru wykorzystanego do wypełnienia. Warto zwrócić uwagę, że wartości współrzędnych punktu początkowego i końcowego operują od 0, co oznacza że w przypadku naszego obrazka zakres wartości x mieści się w przedziale <0,99> a współrzędnej y w przedziale <0,29>.

Kolejna operacja jaką musimy wykonać, to podanie miejsca w którym znajdują się kroje czcionek jakie chcemy wykorzystać przy pomocy biblioteki GD2. Za wykonanie tej operacji odpowiada funkcja putenv('GDFONTPATH=' . realpath('.')). Wynikiem działania tej funkcji jest przypisanie danej wartości do zmiennej środowiskowej serwera. Warto zauważyć, że wykonane działanie ma jedynie zasięg lokalny i jest widoczne jedynie dla danego skryptu PHP w którym funkcja została użyta. W naszym przypadku do zmiennej środowiskowej GDFONTPATH została przypisana wartość funkcji realpath('.'), czyli ścieżka do bieżącego katalogu w którym znajduje się skrypt. W przypadku, gdy plik z krojem czcionki znajduje się w innym katalogu, musicie wskazać poprawny adres do właściwego  katalogu.

W kolejnym kroku utworzymy cień do napisu. Budując tego typu obrazki musicie rozdzielić je na poszczególne warstwy składowe, które będą tworzone w odpowiedniej kolejności. Cień znajduje się nad tłem ale pod finalnym tekstem, więc musi być on utworzony między tymi warstwami.

Do transformacji tekstu na obraz posłużymy się funkcją imagettftext(). Funkcja ta ma następujące argumenty: $image – identyfikator zasobu , $size – wielkość textu , $angle – kąt pod jakim tekst będzie pisany , $x – wartość współrzędnej x początkowego punktu , $y – wartość współrzędnej y punktu , $color  – identyfikator koloru, $fontfile – ścieżka do pliku z krojem czcionki , $text – tekst przeznaczony do konwersji. W celu uzyskania bardziej rzeczywistego wyglądu cienia, stosując funkcję imagefilter($im, IMG_FILTER_SMOOTH, 1) – wykonamy rozmycie obrazka. Oczywiście rozmycie będzie dotyczyły bieżącego stanu w jakim znajduje się grafika, zastosowanie filtru nie ma wpływu na kolejne warstwy i efekty stosowane na dany obrazek.

Korzystając znów z funkcji imagettftext() dodamy właściwy tekst, który będzie przesunięty o 2 piksele w górę i w lewo w stosunku do cienia. W ostatnim kroku z uzyskanego zasobu $im uzyskamy finalny obrazek w postaci PNG. Działanie to realizowane jest za pośrednictwem polecenia imagepng($im). Na samym końcu niszczymy utworzony zasób $im – imagedestroy($im).

Wywołanie w przeglądarce pliku zawierającego powyższy kod, spowoduje wyświetlenie się utworzonego obrazka. Warto zauważyć, że w przypadku gdy nie prześlemy w nagłówku informacji o formacie pliku – header('Content-Type: image/png'); – po wywołaniu pliku w w oknie przeglądarki plik będzie prezentowany jako plik tekstowy a nie plik graficzny. Mam nadzieję że zachęciłem Was do nauki i zabawy z biblioteką GD2.

Zdecydowanie najlepszym rozwiązaniem jest przygotowanie zdjęć w postaci takich plików graficznych, których rozmiar jest jak najbardziej zbliżony (najlepiej równy) rozmiarom jakie są wymagane do publikacji. Ważnym elementem jest również zastosowanie odpowiedniej kompresji, która bez znacznego uszczerbku dla jakości pliku pozwoli na optymalizację wielkości czyli zmniejszenie „wagi” pliku. Właśnie takie podejście znacznie poprawia czas ładowania się zdjęć na stronie … ale o optymalizacji strony wypowiem się innym razem.

Wróćmy jednak do pierwotnego zagadnienia … jak szybko i skutecznie przetworzyć dużą ilość plików? Jednym z najprostszych, najtańszych i najszybszych rozwiązań jest wykorzystanie darmowego programu Irfan View (dostępnego na tej stronie – Irfan View). Spora część osób na pewno zna ten program i korzystanie z niego jako z przeglądarki do zdjęć. Mimo swej pozornej prostoty Irfan View to nie tylko przeglądarka lecz również narzędzie skrywające w sobie wiele innych możliwości. Właśnie w tym programie można dokonać konwersji wsadowej wielu plików.

W celu uzyskania tego efektu trzeba kliknąć w opcję menu File a następnie wybrać opcję Batch Conversion/Rename… (lub naciskając na klawiaturze klawisz B). Otworzy się kolejne okno z dodatkowymi opcjami. W górnej części z prawej strony znajduje się eksplorator zasobów komputera w którym musicie przejść do odpowiedniego podkatalogu zawierającego pliki które mają być przetworzone. Korzystając z przycisku Add all (wszystkie pliki z danego podkatalogu) lub też zaznaczając odpowiednie pliki które mają być przetworzone a następnie naciskając przycisk Add uzupełniamy listę plików które będą konwertowane (lista znajduje się w górnej lewej części okna). Operacja uzupełniania listy może być ponawiana, dodawane pliki mogą znajdować się w kilku podkatalogach.

Po zakończeniu operacji dodania ważne jest wykonanie odpowiedniego sortowania listy plików. Pierwotna kolejność plików na liście uzależniona jest od zaznaczenia oraz od kolejności dodawania do listy (co oczywiście też można wykorzystać i w określonych sytuacjach może być pożądane). W przypadku gdy chcemy ustawić pliki wedle nazwy lub też według daty wykonania zdjęcia musimy skorzystać z przycisku Sort file.

Wyświetlone zostanie okno Advanced/Sort options, w którym można wybrać odpowiednią metodę sortowania plików. W moim przypadku było to by Name (ascending XP style). Po wybraniu odpowiedniej opcji kliknij OK – lista pików zostanie posortowana wedle zadanego sposobu.

Kolejnym krokiem jest ustawienie odpowiednich parametrów plików wyjściowych. Wcześniej jednak trzeba zdefinować katalog wyjściowy – Output direcory, gdzie będą zapisywane gotowe pliki. Wpisz odpowiednią ścieżkę lube też wskaż katalog korzystając z przycisku Browse. Następnie wybierz odpowiedni tryb pracy w moim przypadku była to opcja Batch conversion – Rename result files – konwersja plików wraz ze zmiana nazwy.

Następnie możesz zdefiniować parametry plików wyjściowych Batch conversion settings. W pierwszej kolejności wybierz format pliku Output format – JPG – JPGE Format. Osobiście zawsze mam zaznaczoną opcję Use advanced options. Po zaznaczeniu tego checboxa kliknij w przycisk Advanced options. Otworzy się okno Settings for all images. Zaznacz opcję RESIZE a następnie opcję Set new size i w tej sekcji opcję Set long side to: Height oraz wpisz wartość 900 pixels (lub inna wymaganą. Poniżej warto zaznaczyć też takie opcje jak: Preserve aspect ratio (proportional), Use Resample function (better quality), Don’t enlarge smaller images. W zależności od preferencji można również skorzystać z dodatkowych funkcji dostępnych z prawej strony.

Ostatni krok to zdefiniowanie parametrów w sekcji Batch Rename Settings. Kliknij przycisk Set rename otions, otworzy się kolejne nowe okienko z opcjami. W pole name pattern wpisujemy właściwą wynikową nazwę pliku oraz znaki #### odzwierciedaljące numerację kolejnych zdjęć. Liczba znaków # powinna być ba tyle duża aby program miał możliwość wyrazić cyfrę określającą ilością zdjęć które będą przetwarzane (np: 45 – to minimum dwa znaki #). W oknie tym można również ustalić wartość początkową od jakiej będą odliczane zdjęcia. W naszym przypadku będzie to wartość 1.

Jeśli wszystkie parametry są już ustalone to możecie naciskać Start (górna część okna). Pojawi się okno postępu i już po chwili wszystkie przekonwertowane pliki będą … GOTOWE. Oczywiście w tym katalogu, który został wskazany jako docelowy :).