Niedawno przeglądając stronę z trasami rowerowymi natrafiłem na ciekawe wykresy. Można było na nich zobaczyć przekrój wysokościowy trasy, dzięki czemu widać w których momentach są podjazdy lub zjazdy. Pomysł bardzo ciekawy, jednak jeszcze ciekawsze było dojście do tego w jaki sposób te dane są generowane.
Na szczęście Google udostępnia bardzo fajne i proste w obsłudze mechanizmy umożliwiające wizualne stworzenie owych wykresów. Właściwie wszystko będzie się sprowadzać do pobrania danych za pomocą API, przetworzenie ich oraz stworzenie wykresu. A więc do dzieła!
Mapa z trasą
Na podstawie współrzędnych geograficznych jesteśmy w stanie wygenerować mapkę z trasą. Ja będę się posługiwał trasą Kraków – Zakopane – Bielsko-Biała. Mapa wygląda następująco:
Do stworzenia takiej mapy użyjemy Google Static Map API. Pełną dokumentację możemy obejrzeć pod tym adresem. Zasada działania jest prosta: podajemy współrzędne punktów oraz rozmiar i typ mapy, a cała reszta zrobi się sama.
Wędrując ostatnio po zasobach internetu natknąłem się na ciekawą stronę. A właściwie to jest to mini quiz. Nasze zadanie polega na wymienieniu jak największej ilości tagów HTML w ciągu 5 minut. Zadanie z pozoru wydaje się łatwe, jednak w praktyce, gdy działamy pod presją czasu, zdarza się zapomnieć „podstawowe” tagi HTML.
Mi udało się wymienić 82 elementy spośród 91. Jaki wynik uda się wam uzyskać?
82
Czasami zachodzi potrzeba pobrania z bazy danych rekordów bezpośrednio przed oraz po danym rekordzie. Ma to uzasadnienie na przykład w galerii zdjęć, gdzie chcemy użytkownikowi dać możliwość prostego przeglądania zdjęć. Oczywiście można to zrobić w sposób „łopatologoczny” za pomocą kilku zapytań do MySQL, jednak osobiście nie polecam takiego rozwiązania. Dzisiaj zaprezentuję w jaki sposób można zrobić to szybko i profesjonalnie.
Na samym początku musimy stworzyć tabelę, na której będziemy testować działanie naszego zapytania. Schemat wygląda następująco:
CREATE TABLE imiona (
id int PRIMARY KEY,
imie varchar(32) NOT NULL
);
INSERT INTO imiona VALUES (1, 'Ania');
INSERT INTO imiona VALUES (2, 'Kasia');
INSERT INTO imiona VALUES (3, 'Paweł');
INSERT INTO imiona VALUES (4, 'Natalia');
INSERT INTO imiona VALUES (5, 'Justyna');
INSERT INTO imiona VALUES (6, 'Adam');
INSERT INTO imiona VALUES (7, 'Krzysztof');
INSERT INTO imiona VALUES (8, 'Kazimierz');
INSERT INTO imiona VALUES (9, 'Piotrek');
INSERT INTO imiona VALUES (10, 'Jakub');
INSERT INTO imiona VALUES (11, 'Ewa');
INSERT INTO imiona VALUES (12, 'Kinga');
Oczywiście dane te są przykładowe. Można stworzyć dowolną strukturę, która pozwoli nam wygodnie przetrzymywać informacje.
Nie wiele osób zdaje sobie sprawę jakie możliwości posiada biblioteka GD, służąca do manipulacji obrazkami. Większość początkujących programistów używa jej głównie do tworzenia prostych wykresów, grafik, skalowania zdjęć, itp. Jednak to tylko urywek możliwości jakie posiada owa biblioteka.
Pokażę dzisiaj w jaki sposób można szybko i prosto tworzyć różnego efekty ze zdjęcia. Będziemy korzystać z funkcji imagefilter(), która została dołączona do PHP 5. Śmiało mogę powiedzieć, że za jej pomocą możemy osiągnąć podobne efekty jak w PhotoShop’ie, czy Gimp’ie. A więc do dzieła!
Składnia funkcji
Funkcja imagefilter() wymaga podania od nas co najmniej dwóch parametrów: uchwytu do obrazka, którym będziemy manipulować oraz nazwy filtru jaki na owym obrazu zastosujemy. Pozostałe parametry są opcjonalne.
Aby zobaczyć efekty poszczególnych filtrów będę operował na tym samym obrazku:
Fotografia pochodzi z rąk znajomego ze studiów. Można ją obejrzeć pod tym adresem.
Wszystkie filtry będziemy stosować w poniższym kodzie:
<?php
$image = imagecreatefromjpeg('nina.jpg');
//FILTR, KTÓRY CHCEMY ZASTOSOWAĆ
header('Content-type: image/jpeg');
imagejpeg($image);
Przykładowo, aby lekko rozjaśnić zdjęcie nasz plik będzie wyglądał następujaco:
<?php
$image = imagecreatefromjpeg('nina.jpg');
imagefilter($image, IMG_FILTER_BRIGHTNESS, 20);
header('Content-type: image/jpeg');
imagejpeg($image);
?>
Ale o poszczególnych filtrach trochę niżej.
Jasność
Aby rozjaśnić lub przyciemnić zdjęcie musimy zastosować filtr IMG_FILTER_BRIGHTNESS z parametrem wskazującym jak bardzo nasze zdjęcie ma się zmienić.
imagefilter($image, IMG_FILTER_BRIGHTNESS, 20);
Tworząc strony internetowe, zwłaszcza te „firmowe”, czasami zachodzi potrzeba dodania obsługi innych języków, aniżeli tylko polski. Oczywiście możemy przygotować różne pliki HTML, ale problem zaczyna się, np. podczas zmiany struktury strony. Możemy temu zapobiec, tworząc prostą klasę w PHP, która w prosty sposób pozwoli nam na stworzenie wielojęzycznej strony.
Nasza klasa będzie opierała się o wzorzec projektowy – singleton. Pozwoli zaoszczędzić nam to ilość operacji wykonywanych przez serwer, a ponadto będziemy mogli odwoływać się do statycznych metod klasy.
Na początek struktura plików. Będzie się ona prezentowała następująco:
- index.php – główny plik naszej strony internetowej
- lang.class.php – plik z naszą klasą
- langs – folder przechowujący pliki językowe
- pl.php – poszczególne języki
- en.php
- de.php
- ru.php
Na samym początku musimy wiedzieć jak powinien wyglądać taki system. Ja dałem sobie takie wymagania:
- Maksymalnie uproszczona procedura dodawania nowego języka
- Szybka i bezproblemowa instalacja
- Powinien działać bez większych ingerencji w stronę
Nasz skrypt będzie działał w PHP5 – dzięki temu będziemy mogli bezproblemowo i szybko napisać nasz sterownik. Zaczniemy od pliku lang.class.php.
Główna klasa
<?php
class Lang
{
private $languages = array('pl' => 'Polski', 'en' => 'English',
'de' => 'Deutsch', 'ru' => 'Русский');
private $current_language = FALSE;
private $lines = array();
private static $instance = FALSE;
Nasza klasa będzie się nazywała Lang. W jej nagłówku umieścimy kilka właściwości.
$languages będzie tablicą, która będzie przechowywała dostępne języki. Jako klucz podajemy skróconą nazwę języka, a jako zawartość nazwę języka. Dzięki temu, dopisanie nowego języka jest banalnie proste.
Właściwość $current_language będzie przechowywała aktualnie obsługiwany język, natomiast w $lines umieścimy poszczególne linie plików językowych, aby można było się do nich szybko odwołać.
Ostatnim elementem jest statyczna właściwość $instance. To dzięki niej będziemy mogli odwoływać się do klasy za pomocą statycznych metod. Ale o tym później.
Wszystkie te zmienne są prywatne, gdyż nie będzie potrzeby edytowania ich z zewnątrz.
public function __construct()
{
$this->set_language();
}
Człowiek z natury jest leniwy i woli, gdy część pracy jest wykonywana za niego. Pisząc w Wordzie tekst, do formatowania używamy przycisków znajdujących się na pasku narzędziowym. Jednak w rzeczywistości program zapisuje informacje o formatowaniu za pomocą swojego własnego języka znaczników, aby przy kolejnym otwarciu dokument wyglądał tak, jak sobie tego zażyczyliśmy.
Pisząc stronę internetową, czasami sobie nie zdając sprawy, także używamy języka znaczników – najczęściej jest to HTML. <h1> oznacza nagłówek, natomiast <p> nowy paragraf. Użytkownik przeglądający witrynę nie widzi źródła strony, tylko gotowy, sformatowany kod.
Jednak HTML nie jest jedynym językiem znaczników. Formatowanie w nim kodu jest czasami uciążliwe – szczególnie, gdy w grę wchodzą tabele, list czy hiperłącza. Składnia potrafi czasami zaburzyć czytelność tekstu, który chcemy sformatować.
Najlepszym argumentem za tworzeniem nowych języków jest ograniczenie użytkownika. Oczywiście w pozytywnym tego słowa znaczeniu. Jeśli udostępnilibyśmy użytkownikowi komentującemu nasz wpis na blogu całą gamę znaczników HTML, możemy się spodziewać, że po chwili nasza strona nie będzie funkcjonować. Dlatego też stosuje się składnię alternatywną, np. BBCode, Textile, Markdown, itp.
W dzisiejszym poradniku chciałbym przedstawić kilka alternatywnych języków formatowania tekstu. Zadaniem będzie sformatować tekst za pomocą różnych języków, aby jego docelowy wygląd był następujący:
Zobaczmy jak radzą sobie z tym zadaniem najpopularniejsze języki.
Czasami zachodzi potrzeba umieszczenia na stronie WWW różnego rodzaju wykresów i prezentacji danych. Oczywiście możemy wygenerować takowe np. w Excelu i wstawić na stronę jako obrazek. Jednak takie rozwiązanie jest mało wygodne: za każdym razem, gdy potrzebujemy uaktualnić dane, musimy na nowo tworzyć odpowiednie grafiki i wysyłać je na serwer.
Oczywiście możemy pokusić się o wygenerowanie wykresu bezpośrednio na serwerze, np. za pomocą takich narzędzi jak pChart, lub wejść na wyższy poziom wtajemniczenia i napisać własnoręcznie generator wykresów. Ale to jest już zadanie dosyć trudne, gdyż wymaga w dosyć dobrym stopniu znajomości PHP i bibliotek GD.
Co więc może zrobić taka Hania, która prowadzi bloga i chce na nim umieścić kolorowe wykresy z ulubionymi filmami anime? Może użyć specjalnego API udostępnianego przez Google, które pozwoli w szybki i prosty sposób zaprezentować różne dane w atrakcyjny sposób.
Za pomocą Google Chart API możemy stworzyć właściwie dowolny wykres: liniowy, słupkowy, kołowy, bąbelkowy, radialny oraz wiele innych. Możemy je dowolnie kolorować, dodawać opisy, legendy, itp. Właściwie jedyne ograniczenie jakie zostaje na nas nałożone, to ilość odsłon wykresu: nie może przekroczyć on 250 000 dziennie, co w przypadku nawet dużego serwisu jest trudne do osiągnięcia.
Pierwszy wykres
Wszystkie wykresy są generowanie dynamicznie, więc każda zmiana danych jest automatycznie widoczna na stronie. Wystarczy, że wkleimy na stronę obrazek i podamy mu odpowiednio skonfigurowaną ścieżkę (atrybut src).
Po dosyć długiej nieobecności nareszcie jakaś nowa notka na blogu. A właściwie to już nie na blogu, tylko w serwisie codecalm.pl :)
Ostatnio nie było za dużo czasu na sprawy związane z blogiem: a to studia, a to praca, a to cośtam… Ale znalazłem trochę czasu i postanowiłem odświeżyć stronę.
Od strony wizualnej mało się zmieniło: poprawiłem trochę CSSa i dodałem subtelne dodatki. Jednak całkowitą modyfikację zyskał silnik strony. Nowa wersja napisana została całkowicie od nowa, we frameworku KohanaPHP. Osobiście nic nie mam do WordPressa, na którym stał stary blog, jednak pisać coś na CMSie to nie to samo co pisać coś swojego. Głównie chodzi tutaj o możliwości rozbudowy – obecnie mogę robić to, na co pozwala mi wyobraźnia, a nie WordPress.
Zanim stworzymy naszą pierwszą aplikację warto odpowiednio skonfigurować naszego frameworka. Jeśli o to chodzi, to Kohana może pochwalić się ogromnym wachlarzem ustawień. Skonfigurować można niemalże wszystko: od głównego adresu strony, aż po sterowniki z jakich będzie korzystała aplikacja. KohanaPHP przetrzymuje całą konfigurację w katalogu /config odpowiednio w katalogach /system i /application. Domyślnie wszystko znajdziemy w tym pierwszym, jednak aby uniknąć problemów przy aktualizacji lepiej przenieść odpowiedni plik do katalogu /application i tam go wyedytować.
Podstawowa konfiguracja
Głównym plikiem w którym przechowywana jest konfiguracja frameworka jest plik config.php. Znajdziemy w nim ogólne ustawienia związane ze stroną. Najważniejsze z nich to:
$config['site_domain'] = 'http://nasza-strona.pl';
Adres pod którym znajduje się nasza aplikacja. Na jego podstawie generowane są między innymi wszystkie hiperłącza na stronie. Możemy pozostawić tą wartość pustą – wtedy adres zostanie wykryty automatycznie.
Długo ostatnio nic nie pisałem, ale było to spowodowane wieloma czynnikami. Najpierw sesja na studiach, a w międzyczasie kilka projektów informatycznych, potem wyjazd nad morze. Ale na szczęście już po wszystkim…
Skończyłem niedawno dosyć duży projekt, a mianowicie sklep internetowy. I w końcu udało mi się odrobić i zamienić starego gruchota, na którym dotychczas pracowałem, na nowiutkiego laptopa. Oczywiście przed kupnem całymi dniami siedziałem i szukałem co by sobie sprawić: czy lepiej coś polecanego przez znajomych, czy może poszukać samemu? Kupić na allegro, czy może w sklepie?
Początkowo myślałem coś z Acera, lub Asusa, jednak koleś w sklepie delikatnie mi odradził. Co prawda parametry miały wyśmienite, jednak samo wykonanie już gorsze. Skończyło się na firmie Lenovo i model IdeaPad Y530. Kupiłem go w komputroniku, dostając w prezencie mysz bezprzewodową i torbę.
Po kilku dniach użytkowania jestem wręcz wniebowzięty. Podczas pracy biurowej, bateria potrafi trzymać ponad trzy i pół godziny na jednym ładowani! Specyfikacja mówi o 4, ale to już jest mało istotne.
Jeśli chodzi o wydajność, to działa bez zarzutów. Na razie chodzi pod Vistą (na dniach doinstaluję jakąś linuksową dystrybucję) i działa bardzo płynnie. W teście wydajności systemu Vista otrzymuje ocenę 5.2.
Co tu jeszcze dużo pisać. Nareszcie mogę sobie pozwolić na spokojną pracę w pokoju, nie zastanawiając się, czy siostra nie przyjdzie zaraz poklikać na gg z psiapsiółkami i poprzeglądać focie na naszej klasie. O mamie czekającej na wolną chwilę, aby ułożyć pasjansa nawet nie będę wspominać…
Teraz jeszcze router Wi-Fi i będę w pełni usatysfakcjonowany. :)
