Stawiamy cele

Najpierw postaram się omówić co będę chciał zbudować w tym tutorialu. Moim celem jest napisanie uploadera który będzie w przeglądarkach Chrome i Firefox zastępować tradycyjny HTMLowy formularz. Nasz skrypt bedzie przyjmował pliki metodą drag & drop i wyświetlał ich listę w postaci kontenerów. Po wykryciu, że internauta trzyma pliki nad przeglądarką nastąpi zachęcenie go do upuszczenia ich w odpowiednim miejscu poprzez podmianę napisu. Każdy kontener zaś będzie wyświetlał nazwę wybranego pliku, miniaturkę jeśli wybrany plik jest grafiką lub ewentualnie ikonkę zastępczą, pole tekstowe gdzie można dodać opis oraz przycisk wysyłania. Kontener będzie zawierał także przycisk usuwający dany plik z listy do wysłania oraz pole na wyświetlanie komunikatów. W momencie kliknięcia przycisku wysłania sam przycisk zniknie (aby użytkownik nie wysłał kilka razy tego samego pliku) i pojawi się w razie nie udanego uploadu. Każdorazowa próba wysłania spowoduje wyświetlenie odpowiedniego napisu w polu komunikatów. Jeśli chodzi o przesłane pliki to będą one zapisywane pod ustawionym adresem a opisy do nich będą lądować w pliku tekstowym o nazwie <nazwa pliku>.txt.

Wersja demonstracyjna skryptu (nie zapisuje plików na serwerze)

Gotowiec do pobrania na dole strony.

Kod HTML

Zacznijmy od napisania kodu tradycyjnego formularza:

<div id="uploadHTML">
    <form enctype="multipart/form-data" action="uploadHtml.php" method="POST">
        <input name="upload" type="file" />
        <input value="Wyślij" type="submit" />
    </form>
</div>

Ważne jest by objąć tą część kodu w blok z nadaną klasą uploadHTML gdyż później będziemy usuwać stary typ formularz poprzez odwołanie się do tej klasy. Podobny blok tworzymy dla naszego nowoczesnego uploadera:

<div id="uploadJS" style="display: none">
    //tu dalsza część kodu
</div>

Teraz wrzucamy do niego dwa elementy. Pole gdzie użytkownik ma upuścić plik:

<div class="uploader" id="uploader">
    Przenieś tu pliki które chcesz<br />wysłać na serwer
</div>

oraz miejsce na listę plików do wysłania na serwer:

<div class="uploadList">
    //tu dalsza część kodu
</div>

Do tego diva wstawimy teraz przykładowy element a następnie go schowamy. Będzie to szablon dla skryptu jak mają wyglądać nowe elementy na liście.

<div id="uploadFileTemplate" class="uploadFile">
    <div class="header">
        <div class="name">Nazwa pliku.jpg</div>
        <div class="delete">×</div>
    </div>
    <div class="thumb">
        <img src="file.png" alt="Miniaturka" class="image" />
    </div>
    <div class="info">
        <textarea name="description"></textarea>
        <p class="alert"></p>
        <input type="hidden" name="file" value="">
        <div id="startUpload" class="submit">Wyślij plik</div>
    </div>
</div>

W powyższym nie trzeba raczej niczego tłumaczyć po za tym, że div z id startUpload będzie przyciskiem który rozpocznie upload a zaś plik file.png jest naszą domyślną ikonką. Aby szablon był niewidoczny dla użytkownika w arkuszu CSS piszemy:

#uploadFileTemplate{
        display: none;
}

A teraz Javascript

Po pierwsze dołączymy do naszego kodu bibliotekę jQuery ponieważ dla łatwości pisania najlepiej będzie oprzeć nasz skrypt na tym frameworku.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

Teraz zdefiniujemy parę zmiennym których użycie będę wyjaśniał później oraz napiszemy instrukcję która zapewni nam, że nasz kod nie wykona się za nim wszystkie elementy strony nie będą załadowane.

var ePage;
var eDropPlace;
var eStartUpload;
var filesToUpload;
var newId;
var idi = 0;

$(document).ready(function(){
    //tu dalsza część kodu
});

Wewnątrz tego kodu umieszczamy teraz instrukcję warunkową która wyświetli nasz uploader w przeglądarkah obsługujących wykorzystywane przez nas technologie:

if (window.File && window.FileReader && window.FileList) {
    $("#uploadHTML").remove();
    $("#uploadJS").show();
    ePage               = document.getElementsByTagName('body').item(0);
    eDropPlace          = document.getElementById("uploader");
    //tu dalsza część kodu
}

Powyższy kod działa w ten sposób, że sprawdzane jest czy przeglądarka obsługuje używane przez nas obiekty File, FileReader oraz FileList. Jeśli tak to usuwamy tradycyjny formularz a wyświetlamy ten nasz. Po tej operacji możemy już pobrać referencje do dwóch ważnych obiektów w naszym kodzie. ePage to cała nasza strona dla której będziemy wykrywali czy użytkownik przeniósł pliki nad okno przeglądarki. eDropPlace natomiast to miejsce gdzie użytkownik ma upuścić pliki. Mogłoby być to to samo miejsce ale w tym tutorialu zrobimy rozróżnienie aby lepiej wytłumaczyć czym to się różni.

Zdarzenia ondragover i ondragleave

Teraz poniżej tego (ale przed nawiasem klamrowym) dodamy obsługę zdarzeń. Po pierwsze obsłużmy przeniesienie plików nad przeglądarkę:

ePage.ondragover=function(f){
    eDropPlace.innerHTML="Upuśc plik na to pole";
    f.dataTransfer.dropEffect="copy";
    f.preventDefault();
    return false
};

ondragover to właśnie zdarzenie polegające na tym, że użytkownik zaznaczył w folderze pliki i za pomocą myszki przeniósł je nad okno przeglądarki. Jeśli takie coś wykryjemy to zmieniamy treść napisu oraz zmieniamy kursor na informujący, że będziemy kopiować pliki (w Chrome np. przy kursorze pojawia się napis Kopiuj). MetodapreventDefault() natomiast zapewni nam, że przeglądarka nie zacznie się dziwnie zachowywać np. nie będzie zaznaczany tekst podczas przesuwania kursora nad oknem.

Podobne operacje wykonujemy dla zdarzenia przeciwnego czyli ondragleave:

ePage.ondragleave=function(f){
    eDropPlace.innerHTML="Przenieś tu pliki które chcesz<br />wysłać na serwer";
    f.dataTransfer.dropEffect="copy";
    f.preventDefault();
    return false
};

Teraz czas na najważniejszą część kodu która obsłuży upuszczenie plików na okno przeglądarki (zdarzenie ondrop) i doda je do listy.

Zdarzenie ondrop

ePage.ondrop=function(g){
    g.preventDefault();
    files = g.dataTransfer.files;
    eDropPlace.innerHTML ="Przenieś tu pliki które chcesz<br />wysłać na serwer";

    //tu dalsza część kodu
}

Ponownie skorzystaliśmy z metody preventDefault() gdyż przeglądarki domyślnie po upuszczeniu na nie pliku próbują je wyświetlać lub „ściągnąć”. Musimy temu zapobiec aby mógł się wykonać dalszy kod. Gdy to już mamy zapewnione to możemy skorzystać z instrukcji g.dataTransfer.files która zwróci nam tablicę obiektów poszczególnych plików. G zostało nam podane jako argument funkcji która wykona się w momencie zajścia zdarzenia ondrop. A jako, że internauta nie trzyma już plików to nie zajdzie zdarzenie ondragleave więc w powyższym kodzie obsługujemy przywrócenie napisu.

Teraz możemy już sobie iterować po tej tablicy i wyciągać kolejne obiekty plików do uploadu:

for(var i = 0, f; f = files[i]; i++){
    var reader=new FileReader();

    //tu dalsza część kodu

    reader.readAsDataURL(f);
}

Powyższa pętla przypisuje kolejne obiekty plików do zmiennej f, tworzy nowy obiekt klasy FileReader i wczytuje plik do stworzonego obiektu. I teraz naszym zadaniem jest napisanie funkcji która zostanie wykonana gdy cały plik zostanie wczytany (jest on wczytywany asynchronicznie z powodu opóźnienia jakie może wywołać obciążony dysk twardy). Wykonuje się to za pomocą nietypowej konstrukcji która należy umieścić przed użyciem metody readAsDataURL:

reader.onload = (function(theFile) {
    return function(e) {
        //tu dalsza część kodu
    };
})(f);

Jakkolwiek dziwnie powyższy kod wygląda to nadszedł czas na napisanie funkcji tworzącego nowe elementy na liście. Na początek musimy przyjąć, że każdemu nowemu kontenerowi będziemy nadawać ID wg schematu: file1, file2, file3 itd. Realizuje to poniższy kod:

var newId = "file"+idi; idi++;
$(".uploadList").prepend("<div id=\""+newId+"\" class=\"uploadFile\">"+$("#uploadFileTemplate").html()+"</div>");

Jak widać stworzyliśmy nowy kontener, nadaliśmy mu id i skopiowaliśmy do niego nasz szablon z diva uploadFileTemplate. Nowy element pojawi się na liście plików na samej górze dzięki metodzie prepend z biblioteki jQuery.

Teraz czas na wypełnienie naszego szablonu i nadaniu zdarzeń dla przycisków:

$("#"+newId+" .header .name").text(theFile.name);

//wrzuca miniatirku zdjęć
if(theFile.type.match(/image.*/))
    $("#"+newId+" .thumb .image").attr("src",e.target.result);

Obiekt theFile w tym momencie przechowuje informacje i naszym pliku. Pobieramy z niego nazwę pliku (theFile.name) i wpisujemy w odpowiednim miejscu. Dalej sprawdzamy czy nasz plik jest obrazkiem za pomocą theFile.type.match(/image.*/). Jeśli tak to odczytujemy nasz plik z zmiennej e.target.result i wpisujemy jako atrybutsrc miniaturki. Plik jest przechowywany w wspomnianej zmiennej w formacie base64. Polecam kliknąć na tak wyświetloną grafikę PPM i wybrać opcję Pokaż obrazek. Zobaczymy wtedy w pasku adresu jak wygląda grafika w takim kodowaniu.

//zapisuje plik do pola tekstowego
$("#"+newId+" input[name=\"file\"]").val(e.target.result.split(",")[1]);

//obsługa usuwania pliku
$("#"+newId+" .delete").click(function(z){
    $("#"+newId).remove();
});

//obsługa wysyłania
$("#"+newId+" #startUpload").click(function(z){
    trySendFile(newId);
});

Wracając do naszego szablonu to teraz znowu musimy odczytać nasz plik i zapisać go do pola tekstowego o nazwie file. Teraz jednak przypiszemy tylko sam kod bez informacji o typie kodowania. Przy użyciu javascriptowej metody split wytniemy zbędny w tym przypadku napis data:image/png;base64,. W dalszej części kodu oskryptowujemy przycisk anulowania wysyłania pliku którego kliknięcie spowoduje usunięcie całego kontenera oraz przycisk wysyłania pliku którego kliknięcie wywoła większą funkcję trySendFile.

I to wszystko jeśli chodzi o obsługę zdarzenia ondrop. Czy czegoś nam brakuje? Tak, definicji funkcji…

trySendFile

function trySendFile(eId){
    $("#"+eId+" #startUpload").hide();

    var fileData = $("#"+eId+" input[name=\"file\"]").val();
    fileData = fileData.replace(/\+/gi, '-');
    fileData = fileData.replace(/\//gi, '_');

    //dalsza część kodu
}

Po kliknięciu przycisku wysyłania pierwsze co musi się stać to schowanie owego guzika. Następnie z pola tekstowego file odczytujemy zakodowany plik i podmieniamy w nim pewne znaki. Ktoś może zapytać po co? Po odpowiedź odprowadzam do artykułu o base64 na Wikipedii a dokładniej to do akapitu pod tabelką. My będziemy transportować plik w ciągu zmienna1=wartosc1&zmienna1=wartosc2… więc musimy zadbać by żadne znaki nam nie uszkodziły danych. Dwie linijki z powyższego kodu realizują właśnie podmianę omówioną na Wikipedii.

Teraz możemy w końcu znapisać kod które wyśle wszystkie dane na serwer (np do pliku php/getFile.php):

$.ajax({
    type: "POST",
    url: "php/getFile.php",
    data:   "file="+fileData+
            "&name="+encodeURIComponent($("#"+eId+" .header .name").html())+
            "&description="+encodeURIComponent($("#"+eId+" textarea[name=\"description\"]").val()),
    //tu za chwilę dalszy ciąg kodu
});

Jak widać używamy tu funkcji ajax z biblioteki jQuery. Jako parametr data podajemy ciąg gdzie kolejno składamy zmienne file zawierającą kod base64, name zawierającą nazwę pliku oraz description zawierającą treść z pola tekstowego. Wartości pól name i description zabezpieczyliśmy funkcją encodeURIComponent aby dało się je bezpiecznie przesłać w tej formie. I tu znowu ktoś może zapytać dlaczego nie użyliśmy tej metody wcześniej przy zabezpieczaniu base64. Powód jest prosty. Wspomniana metoda podmienia wszystkie znaki specjalne. Jeśli plik waży kilka megabajtów (np. plik .mp3) to użycie omawianej metody powoduje chwilowe zawieszenie przeglądarki. A, że na szczęście w base64 występują tylko dwa psujaki to o wiele optymalnej jest użyć podmiany metodą replace.

Dane zostały wysłane więc teraz trzeba by było obsłużyć odpowiedź. Za nim to jednak zrobimy napiszmy:

Kod po stronie serwera

Tu nie będziemy się rozpisywać. Nie podam tu jakiegoś bardzo użytecznego kodu a tylko skrypt który pozwoli przetestować nam uploader i zrozumieć jak należy odbierać kod base64.

<?php
    $name = str_replace('..',' ',$_POST['name']);
    $name = str_replace('/',' ',$_POST['name']);
    $name = str_replace('.exe',' ',$name);

    if(!file_exists("files/".$name)){
        //dalszy kod
    } else echo "error!Taki plik już istnieje";
?>

Jak widać w pliku getFile.php najpierw usuwamy z nazwy pliku podwójne kropki i ukośniki aby zapobiec, że jakiś spryciarz zapisze nam plik po za naszym folderem. Usuwamy także rozszerzenia z plików wykonywalnych dla bezpieczeństwa serwera i osoby która będzie te pliki przeglądać. Gdy to już zrobimy sprawdzamy czy nie ma takiego pliku w folderze do uploadu. Jeśli nie to wykonujemy dalszy kod, w przeciwnym wypadku zwracamy przeglądarce komunikat o błędzie. Komunikaty będziemy zwracać w formacie <typ komunikatu>!<treść komunikatu>. Wspomniany dalszy kod wygląda następująco:

$file = str_replace('-','+',$_POST['file']);
$file = str_replace('_','/',$file);
$f = fopen("files/".$name, "wb");
fwrite($f, base64_decode($file));
fclose($f);
$f = fopen("files/".$name.".txt", "wb");
fwrite($f, $_POST['description']);
fclose($f);
echo "ok!Plik zapisano";

Po pierwsze przywracamy podmienione wcześniej znaki. Po drugie otwieramy plik o odpowiedniej nazwie i zapisujemy do niego odkodowaną za pomocą base64_decodetreść pliku. Po trzecie zaś otwieramy plik o nazwie <nazwa pliku uploadowanego>.txt i wrzucamy do niego opis napisany przez internautę. Po czwarte zwracamy komunikat, że wszystko poczło dobrze i po piąte…

Piszemy ostatni fragment kodu JS

Teraz wracamy do naszej niedokończonej funkcji ajaxowej i dopisujemy odbiór komunikatów:

    error: function(xhr, ajaxOptions, thrownError){
            $("#"+eId+" p.alert").text("Błąd połęczenia");
            $("#"+eId+" #startUpload").show();
        },
    success: function(msg){
            $("#"+eId+" #startUpload").show();
            var data = msg.split("!");
            switch(data[0]){
                case "error":    $("#"+eId+" p.alert").text(data[1]);
                                 break
                case "ok":       $("#"+eId+" p.alert").text(data[1]);
                                 $("#"+eId+" #startUpload").remove();
                                 break;
                default:         alert(msg);
                                 break;        
            }
        }

Funkcja napisana po parametrze error jest wykonywana gdy przeglądarka nie może połączyć się z serwerem lub znaleźć pliku. W takim przypadku wyświetlamy internaucie napis, że Brak połączenia i przywracamy przycisk by mógł spróbować raz jeszcze. Zaś success odnosi się do przypadku gdy serwer zwrócił nam jakąś sensowną odpowiedź. Wtedy także przywracamy przycisk a odpowiedź z serwera (zmienna msg) rozwalamy na dwie części znaną już metodą split. Potem sprawdzamy czy komunikat jest typu error czy ok i wykonujemy odpowiednie operacje: wyświetlamy treść komunikatu i ewentualnie kasujemy przycisk wysyłania jak wszystko poszło ok. Gdyby zaś nie udało nam się rozpoznać typu komunikatu (np. zwrócono nam błąd php) to wyświetlamy całość za pomocć alertu

Gotowiec

Wszystkie pliki potrzebne do uruchomienia stworzone uploadera można pobrać stąd.

Pierwsze zderzenie

Podczas pierwszego uruchamiania przeglądarki RockMelt zostajemy poproszeni o wpisanie swoich danych logowania do Facebooka. Już od pierwszego okienka twórcy przeglądarki jasno pokazują nam, że integracja programu z popularnym serwisem społecznościowym będzie maksymalna. Bez zalogowania nie będziemy mogli uruchomić żadnej strony. Gdy już to jednak zrobimy możemy zostać zaskoczeni. O to bowiem naszym oczom ukazuje się… Google Chrome! Nie, moment. Są drobne różnice ale charakterystyczny minimalizm i wygląd zakładek natychmiast zdradza na bazie jakiego kodu jest zbudowana przeglądarka RockMelt. Po chwili dopiero wyświetlają się dodatkowe paski po bokach. O nich jednak powiem później.

Interfejs rozłożony na czynniki

Póki co zajmijmy się paskiem adresu. Podobnie jak w Google Chrome mamy tu uniwersalne pole do wpisywania wszystkiego. Obok tego znajduje się jednak dodatkowy przycisk Share. Jak łatwo się domyślić służy on do szybkiego umieszczania aktualnie oglądanej stronie na swojej fejsowej Tablicy. Co ciekawsze zaś jeszcze bardziej na prawo mamy pole wyszukiwarki. Widać zatem, że twórcy RockMelt  postawili przed sobą ambitne zadanie zadowolenia wszystkich internautów. Chromiarze otrzymają swoje inteligentne pole adresu a ci którzy postanowią się przerzucić z Firefoxa będą mieli dostęp do osobnego pola wyszukiwarki. Co różni je od tego z przeglądarki Mozilli to to, że wyniki wyszukiwania nie pojawiają się automatycznie w nowej zakładce a w specjalnym okienku. Dopiero stamtąd po kliknięciu More Results można przenieść się do nowej zakładki. Tego rodzaju okienka to powszechne rozwiązanie w programie RockMelt. Na moje oko wyglądają one dosyć elegancko i przejrzyście ale to już sprawa gustu.

Interesujący element znajduje się zaś w lewym górnym rogu okna na lewo od zakładek. Gdy pierwszy raz dostrzegłem ten przycisk przez chwilę zastanawiałem czy przypadkiem nie otwarła mi się Opera. Po chwili jednak zrozumiałem, że podopieczni Zuckenberga lubią ciągnąć wzorce z różnych źródeł i tak na przykład postanowili ukraść pomysł na przycisk menu z niedawnych wersji Opery. Po kliknięciu na ten zaokrąglony prostokąt ukazuje nam się menu prawie kropka w kropkę identyczne do tego spod ikonki klucza w Google Chrome. Czy przenosiny tego przycisku spodobają się internautom to się dopiero okaże. Bądź co bądź jednak norwescy programiści uznali ten pomysł za niewypał i usunęli go z najnowszej wersji Opery.

Przeglądarka dla społeczniaków

Jeśli lubisz rozmawiać z znajomymi przez komunikator FB, śledzić ich aktywność oraz kolekcjonować kanały RSS to pokochasz dwa boczne paski z RockMelt. Co innego jeśli cenisz sobie sporą ilość wolnego miejsca na ekranie.  Autorzy facebookowej przeglądarki postanowili bowiem uszczęśliwić nas poprzez dwa sidebary po bokach ekranu. Jeden zwany Krawędzią znajomych zawiera listę naszych kumpli z facebooka wraz z zdjęciami, ikonką statusu, możliwością szybkiego chatu oraz podejrzenia ich tablicy. Po drugiej stronie mamy Krawędź aplikacji. Możemy tam w szybki sposób podejrzeć śledzone przez nas kanały RSS a także w wygodny i zasługujący na pochwałę sposób dodać nowe. Aplikacja sama na podstawie ostatnio przeglądanych stron będzie nam sugerować co chcielibyśmy dodać. Rozwiązanie idealne dla mało zaawansowanych internetów by móc korzystać z RSSa nie wiedząc nawet, że taka technologia istnieje.

Myśl końcowa

Tak jak już wspominałem wygląd programu zrobił na mnie bardzo dobre wrażenie. RockMelt wydaje się być ładnie zaprojektowaną alternatywą dla miłośników serwisów społecznościowych. O wiele ładniej niż w Chromie prezentuje się okno Nowej karty. Widać także sporą ilość pracy włożonej w możliwość dostosowania programu do siebie. Mam tu na przykład na myśli możliwość wyłączenia pasków bocznych oraz zmianę kolejności znajomych i aplikacji na nich.

Jeśli zaś miałbym się do czegoś przyczepić to w sumie ciężko. Ok, program scrashował mi się raz czy dwa, nie umie zaimportować zakładek z Chrome (chociaż z historią poszło gładko) ale tak ogólnie to po wyjściu z faz testów RockMeltwydaje się być dobrą propozycją dla pewnej grupy odbiorców. Oczywiście odezwą się głosy, że to kolejny wynalazek szatana by okradać nas z prywatności oraz, że jest to przeglądarka do słodkich idiotek ale… czy te głosy są poparte dobrymi argumentami? Osobiście nie będę na co dzień korzystał z tego cuda ale projekt będę śledził z uwagą gdyż sądzę, że to w tą stronę będą szły w przyszłości przeglądarki. W stronę unifikacji aplikacji internetowych z aplikacjami desktopowymi.

Przygotowanie

Na początek ustalmy jaki mamy cel w naszej pracy. W tym poradniku chciałbym pokazać jak dodać tag <ramka> który pozwoli na szybkie tworzenie rameczek z obrazkowym tłem i treścią w środku. Jako tło będzie można ustawić dowolną grafikę spośród zuploadowanych na serwer wpisując jej nazwę jako wartość atrybutu grafika.

Teraz czas na napisanie rozszerzenia. Zaczniemy od stworzenia pliku z rozszerzeniem php. Musimy ten plik umieścić w folderze extensions naszej instalacji MW. U mnie będzie to extensions/nowetagi.php. Tak przygotowany plik musimy podpiąć do skryptu. W tym celu otwieramy plik LocalSettings i mniej więcej po środku dopisujemy linijkę:

require_once("extensions/nowetagi.php");

Włączanie parsowania

Kolejnym krokiem w naszej pracy będzie otwarcie pliku nowetagi.php i dodanie odpowiedniego zdarzenia wewnątrz znaczników php:

$wgHooks['ParserFirstCallInit'][] = 'mojParser';

Powyższa linijka spowoduje, że w momencie jak MediaWiki będzie parsował artykuł to wywoła funkcję mojParser by dowiedzieć się jak parsować tagi obsługiwane przez nasze rozszerzenie. Poniżej tej linijki umieszczamy ciało wspomnianej funkcji:

function mojParser( &$parser ) {
   $parser->setHook( 'ramka', 'parsowanieRamka');
   return true;
}

W podanym przykładzie poinformowaliśmy parser, że tag <ramka> ma być obsługiwany za pomocą funkcji parsowanieRamka(). W obrębie jednej funkcji mojParser możemy dodać nielimitowaną liczbę nowych tagów. Ważne jest tylko aby na końcu zwrócić true.

Funkcja parsująca

Teraz zdefiniujmy funkcję parsowanieRamka().

function parsowanieRamka( $input, $args, $parser, $frame ) {
}

Póki co ciało funkcji jest puste. Musimy bowiem najpierw wyjaśnić co zawierają przekazane argumenty. Jak wiadomo tagi dzielą się na dwuelementowe (<ramka></ramka>) i jednoelementowe (<cytat />). Jeśli parsowany tag składa się z otwarcia i zamknięcia to zmienna $input będzie zawierała to co znajduje się pomiędzy czyli inaczej mówiąc zawartość tagu. Zmienna $args jest zaś tablicą o indeksach identycznych jak atrybuty parsowanego tagu i z wartościami równymi wartościom tych atrybutów. Dla przykładu tag <ramka grafika=”tlo.jpg”>Dowolny tekst</ramka> zostanie podzielony na zmienną $input o wartości Dowolny tekst oraz na jednoelementową tablicę $args gdzie $args['grafika']=’tlo.jpg’. Pozostałe argumenty przekazane funkcji parsowanieRamka() nie są dla nas istotne.

Uzbrojeni w powyższą wiedzę możemy zacząć pisać skrypt który zwróci kod html w miejsce tagu w artykule. Musimy jeszcze tylko pobrać adres URL do grafiki której nazwa została przekazana w atrybucie grafika.

if(!empty($args['grafika'])){
   $file = wfFindFile($args['grafika']);
   $url = $file->getFullUrl();
}

Powyższa instrukcja sprawi, że jeśli zdefiniowano wartość atrybutu grafika to zmienna $url będzie przechowywała bezwzględny adres do tego pliku. Możemy ją teraz użyć przy generowaniu pierwszej części kodu wynikowegoi ustawić obrazek jako tło bloku:

$output = '<div class="ramka" style="background-image: url('.$url.');">';

Teraz trzeba dołączyć do tego treść spomiędzy znaczników. Ale tu należy pamiętać o jednej rzeczy, że tam również może zostać użyta składania wiki i inne tagi. Dlatego też zmienną $input należy jeszcze raz przepuścić przez parser za pomocą specjalnej funkcji:

$output .= $parser->recursiveTagParse( $input, $frame );

Argumentami tej funkcji jest treść do ponownego sparsowania oraz zmienna $frame którą otrzymaliśmy wcześniej jako czwarty argument funkcji parsowanieRamka. Gdy to już mamy możemy zamknąć blok i zwrócić gotowy kod html:

$output .= '</div>';
return $output;

Pełny kod naszego rozszerzenia wygląda tak:

<?php
$wgHooks['ParserFirstCallInit'][] = 'mojParser';

function mojParser( &$parser ) {
   $parser->setHook( 'ramka', 'parsowanieRamka');
   return true;
}

function parsowanieRamka( $input, $args, $parser, $frame ) {
   if(!empty($args['grafika'])){
      $file = wfFindFile($args['grafika']);
      $url = $file->getFullUrl();
   }
   $output = '<div class="ramka" style="background-image: url('.$url.');">';
   $output .= $parser->recursiveTagParse( $input, $frame );
   $output .= '</div>';
   return $output;
}
?>

Nieco więcej o parsowaniu

W powyższym przykładowym rozszerzeniu użyliśmy funkcji $parser->recursiveTagParse();. Jak już pisałem służy ona do tego by sparsować składnię wiki i dodatkowe tagi wewnątrz jakiegoś tekstu. Należy jednak pamiętać, że nie zostaną wtedy podmienione podpisy (~~~~). Tym zajmuję się tzw parser wstępny ale on także w tym wypadku nam nie pomoże. Jest to związane z tym, że tekst wewnątrz tagów dodawanych przez rozszerzenia jest parsowany przy każdym wyświetleniu strony na nowo a w bazie danych ląduje niezmieniony. Z tego też powodu własne tagi nie sprawdzą się w miejscach gdzie użytkownicy będą się podpisywać za pomoca 4 tyld.

Inną sprawą jest to, że należy uważać by nie parsować znaczników html które nie działają na stronach MediaWiki. Np. próba sparsowania tekstu <img src=”adres.png”> spowoduje, że ten kod pojawi się na stronie w formie tekstu a nie obrazka. Można jednak bezpiecznie parsować kod obrazka zapisany w wikiskładni tzn [[Grafika:Plik.png]]. Identyczna sytuacja zachodzi przy odnośnikach. Dlatego należy uważać by nie wrzucać do parsera przypadkowego kodu html a jedynie parsować to co można.

Inny przykład: tag <cytat>

Na koniec zamieszczę jeszcze jeden kod parsowania tagu. Jego składnia wygląda tak: <cytat autor=”Imię Nazwisko”></cytat> a skrypt który go parsuje przedstawia się następująco:

function parsowanieCytat($input, $args, $parser, $frame ) {
   $output = '<blockquote>'.$input.'<div>'.$args['autor'].'</div></blockquote><br style="clear: left;" />';
   return $parser->recursiveTagParse( $output, $frame );
}

Do tego dochodzi jeszcze krótki kod CSS:

blockquote{
  padding-left: 50px;
  background: url('quote.png') left 5px no-repeat;
  margin: 0px 20px 10px 0px;
  font-family: Georgia;
  font-style: italic;
  min-height: 27px;
  float: left;
  color: #333;
  max-width: 500px;
}
blockquote div{
  text-align: right;
  color: #666;
  font-style: normal;
  font-size: 10px;
  font-family: Arial;
  margin-right: 10px;
}

Całość w akcji można zobaczyć na górze tej strony.

Gdy to już mamy gotowe wypełniamy grafikę naszym kolorem głównym. Następnie wybieramy menu Filtr > Pikselowanie > Rastrowanie koloru (Filter > pixelate > color halftone) i ustawiamy takie wartości:

Po tej operacji powinniśmy otrzymać coś takiego:

Kolejnym krokiem jest nałożenie odpowiedniego filtru który sprawi, że na naszej teksturze pojawią się jeansowe włókna. Otwieramy zatem Filtr > Szkic > Kreda i węgiel (filter > sketch > chalk and charcoal) i ustawiamy wartości jak na obrazku poniżej:

W tym momencie nasz obraz będzie wyglądał tak:

Teraz przyszedł czas by zmniejszyć naszą grafikę do takich rozmiarów jakie chcemy uzyskać. Moja tekstura po trzykrotnym pomniejszeniu wygląda następująco:

Teraz możemy przejść do Obraz > Dopasowania  > Jasność i kontrast by poprawić kolory. Ja dla przykładu ustawiłem jasność na -3 a kontrast na +90. W zależności jakie wartości tu damy to uzyskamy różne odmiany jeansu.

Na koniec zamieszczam gotowy plik z teksturą jeansu w rozmiarze 512×512 pikseli.

Nie, dziękuję. Chodzi to, że niedawno przerzuciłem się z tabelek na divy bo wszyscy mówią, że to jest lepsze. Ale ostatnio zaglądałem do kodu phpBB3 i tam wszystko stoi na tabelkach. Wydawało mi się, że twórcy tego skryptu znają się na swojej pracy a jednak korzystają z starych rozwiązań. To jak to w końcu jest? Co jest lepsze? Tabelki czy divy?

Obydwa rozwiązania są dobre w zależności do czego je używasz. Mówiąc krótko divy powinny być używane do budowy kontrukcji wyglądu strony. Na przykład umieszczenia loga na górze, sidebara z boku i stopki na dole. Tabelki zaś należy stosować tylko gdy chcemy wyświetlić jakieś dane tabelaryczne. Podchodzą pod to między innymi dane statystyczne oraz wielokolumnowe listy jak na np. interfejsy na forach. Tabelek nie powinno zaś się używać gdy chcemy dla przykładu stworzyć trzy kolumnową stronę i w tym celu tworzyć tabeli z trzema kolumnami. Takie rozwiązanie to nieporozumienie gdyż zwiększa czas jaki przeglądarki potrzebują do wyświetlenia witryny. Da się zauważyć to opóźnienie gdy np. środkowa kolumna zawiera dużo grafik. Wtedy na wyświetlenie komórki po prawej możemy musieć trochę poczekać.

Ok. A jak wygląda sprawa z ramkami?

Zwykłe ramki wyszły już całkiem z użycia. Chodzi mi tu o elementy frame i frameset. Nie powinno się ich używać gdyż obecnie istnieją o wiele lepsze rozwiązania jak na przykład php lub ajax. Co zaś się tyczy ramek pływających, to znaczy elementów iframe to są one wciąż w użyciu ale radzi się ich już wystrzegać. Inaczej mówiąc skorzystanie z nich to nic złego ale jeśli tylko jest możliwość to powinno skorzystać się z innej techniki.

Ciekawe. A są jeszcze jakieś nowe standardy o których powinien wiedzieć każdy początkujący?

Długo by tu wymieniać ale pokrótce mogę wymienić parę punktów. Po pierwsze aktualnie jedyne kodowanie znaków jakiego powinno się używać to UTF-8. I od tego nie ma odstępstw. Używając tego kodowania pozbędziesz się problemów na stronach wielojęzykowych oraz przy korzystaniu z zewnętrznych interfejsów np. przycisków Facebooka. Ponadto wycofano wszystkie dziwne znaczniki typu <font>, <big> itd dotyczących wyglądu tekstu. Zamiast nich należy stosować znacznika <span> i odpowiednie style CSS. Nawet zamiast <b> radzi się korzystać z <strong> chociaż ten pierwszy wciąż oficjalnie jest w użyciu.

Dobrze, przestańmy już mówić o tym htmlu. Ostatnio chciałem poszerzyć swoje horyzonty i pouczyć się JavaScriptu. Ale mam mały dylemat. Czego radzisz się uczyć? JavaScriptu czy może tej słynnej biblioteki jQuery.

Na początek może wyjaśnię, że jQuery to zestaw funkcji napisanych w języku  JavaScript. Ale jeśli dopiero zaczynasz swoją przygodę z językami skryptowymi to radzę ci zacząć uczyć się samego JS. Dlaczego? Ponieważ umiejąc korzystać z jQ ale nie znając dobrze niektórych możliwości JavaScriptu będziesz mocno ograniczony. Mam tu na myśli wszystkie funkcję odpowiedzialne za przetwarzanie tekstu, dokonywanie obliczeń czy obsługę zdarzeń. Gdy to już opanujesz możesz śmiało ruszać do nauki JQuery. Pisanie skryptów stanie się dla Ciebie o wiele łatwiejsze i ponadto będziesz miał wiedzę potrzebną do pisania zaawansowanych aplikacji internetowych.

A istnieją jakieś alternatywy do jQuery?

Tak, np. Prototype i Moo Tools. Te biblioteki są jednak mniej popularne od jQuery i możesz przy nich liczyć na mniejsze wsparcie społeczności.

Dobrze wiedzieć. Ok, to chyba dziś już na tyle.

W porządku. Wracaj jak tylko nazbierają Ci się znowu jakieś problemy.

Na pewno przyjdę Cię pomęczyć, cześć.

Trzymaj się.

Grafika

Finalnie nasza praca ma wyglądać tak:

Jak widać przy większej ilości tekstu grafika musi się się rozszerzać. Aby tak było trzeba to sprytnie zakodować. Najpierw jednak musimy przygotować dwie grafiki. Jedną która będzie się składała tylko z prawych zaokrągleń i druga która będzie bardzo szeroką wersją buttonu ale bez zaokrągleń po prawej. Dokładniej to potrzebujemy takich obrazków:

Ważne jest to aby obrazki miały jednolite lub prawie jednolite tło. W tym przypadku jest ono białe.

Kod

Przy kodowaniu użyjemy pewnej sztuczki. Krótszy obrazek wstawimy jako tło linku przycisku a sam link wstawimy do diva któremu jako tło nadamy dłuższy obrazek. Dzięki temu krótsza grafika odpowiednio zasłoni tą dłuższą. Oto kod html:

<div class="przycisk"><a href="#">Przejdź do galerii zdjęć</a></div>

A poniżej kod CSS:

 .przycisk{
    height: 30px;
    background: url('left.png') no-repeat;
    display: block;
    float: left;
 }
 .przycisk a{
    height: 30px;
    background: url('right.png') right no-repeat;
    display: block;
    padding: 0 15px 0 15px;
    font: italic normal bolder 14px Georgia;
    text-decoration: none;
    color: #dadada;
    line-height: 30px;
 }

Jak widać obrazek right.png dosunęliśmy do prawej strony aby pojawił się w odpowiednim miejscu. Musieliśmy także użyć float: left aby wszystko przyjmowało możliwie najmniejszą szerokość. Kod w działaniu można zobaczyć pod tym linkiem.

WPEngine – o co chodzi?

Opisywana platforma WPEngine ma być połączeniem zalet obecnych dwóch rozwiązań. Za dosyć wysoką cenę 50$ miesięcznie otrzymamy możliwość utworzenia swojego serwisu internetowego z użyciem WordPressa na hostingu idealnie zoptymalizowanym pod tą platformę. Autorzy pomysłu kusza nas  ogromną galerią gotowych wtyczek i skórek. Co więcej możemy także instalować własne rozszerzenia i motywy. Ponadto oto by nasza strona nie padła w okresie wzmożonego ruchu będą dbać odpowiednie narzędzia odpowiedzialne za cachowanie treści, minimalizowanie plików oraz kompresję grafik. Zaś developerzy będą mieli pełny dostęp do logów serwera PHP.

„It’s safer here”

Platforma WPEngine w przeciwieństwie do typowych hostingów będzie dbało o to czy wszystkie pliki mają dobrze nadane prawa dostępu. Dzięki temu nie ma  możliwości, że przez źle ustawione chmody ktoś usunie nam zdalnie plik. Ponadto będzie można uruchamiać wszystkie wtyczki i skórki w trybie piaskownicy. To znaczy, że możemy sprawdzić działania nowego składnika na swoim blogu ale internauci nie zobaczą od razu efektów tych eksperymentów. Dopiero gdy stwierdzimy, że wszystko działa prawidłowo będziemy mogli zatwierdzić zmiany i oddać nowe funkcjonalności w ręce użytkowników. Taki sposób pracy chroni nas przed uszkodzeniem instalacji WP przez złośliwą wtyczkę. Co więcej wszystkie konta na serwerze są od siebie odseparowane przez co nie ma możliwości ataku na nasz serwis przez innego klienta WPEngine.

Gdzie to można dostać?

Aktualnie aby móc skorzystać z platformy trzeba otrzymać zaproszenie. Na pełne otwarcie usługi przyjdzie nam pewnie jeszcze poczekać. Niemniej już teraz wydaje się, że będzie to doskonałe rozwiązanie dla wszelkich stron firmowych i dużych blogów. Jak to wyjdzie w praniu to się okaże. W każdej chwili można opuścić szeregi klientów WPEngine ale przenoszenie swojego istniejącego serwisu to i tak poważny krok.

Nasze miejsce pracy

Dla naszych banerków najlepiej przygotować osobny folder. W nim umieśćmy obrazek który będzie podstawą naszego dzieła. Ja dla banerka mojej encyklopedii o grach firmy Valve  przygotowałem coś takiego:

Plan jest taki aby pod tytułem strony znajdował się napis n artykuły(ów) o grach Valve gdzie n jest oczywiście liczbą stron. Przed napisaniem tego skryptu musimy jednak zadbać jeszcze o jedną rzecz. Nasz baner będzie generowany w PHP przy każdym zapytaniu. Link do naszego obrazka nie może być jednak linkiem do pliku php, gdyż wtedy nie będzie się wyświetlał w podpisach na forach internetowych. Musimy skorzystać z możliwości jakie daje nam plik .htaccess. Po utworzeniu go w folderze z naszym banerem umieszczaniu w nim poniższy kod:

RewriteEngine On
RewriteRule ^baner.png$ generator.php [L]

Ta instrukcja spowoduje, że chociaż adres będzie prowadził do pliku baner.png to serwer będzie zwracał treść z pliku generator.php.

Generowanie obrazka

Teraz możemy przystąpić do pisania skryptu PHP. Tworzymy więc nasz plik generator.php i na samym jego początku łączymy się z bazą naszej wiki

$serverdb='localhost'; //adres serwera bazy danych
$dbuser='user'; //uzytkownik bazy danych
$dbuserpass='password'; //haslo uzytkownika
$db='database'; //nazwa bazy danych

$link = mysql_connect ($serverdb, $dbuser, $dbuserpass)
   or die (mysql_error());
mysql_select_db ($db);

Gdy jesteśmy już połączeni z bazą możemy pobrać informacje o ilości artykułów. Wyciągniemy ta informację ze specjalnych tabel gdzie są przechowywane tego typu statystyki.

$uchwyt = mysql_query ('SELECT ss_good_articles from wiki_site_stats');
$rekord = mysql_fetch_array($uchwyt);
$ilosc = $rekord['ss_good_articles'];

Teraz, gdy ilość artykułów mamy już w w zmiennej $ilosc możemy napisać część kodu, która odmieni wyraz artykuły na potrzeby naszego napisu i złoży cały tekst w całość.

$jednostki = substr($ilosc, strlen($ilosc)-1, 1);
if($jednostki == 2 || $jednostki == 3 || $jednostki == 4) $art = 'arykuły';
   else $art = 'arykułów';
$tekst = "$ilosc $art o grach Valve";

Gdy to już mamy gotowe nic nie stoi na przeszkodzie by rozpocząć generowanie grafiki.

$image = imagecreatefrompng("baner.png");
$black = imagecolorallocate($image, 0, 0, 0);
imagettftext($image, 10, 0, 250, 45, $black, 'calibri.ttf', $tekst);

Podany kod kolejno wczytuje obrazek baner.png, tworzy indeks koloru czarnego i na końcu nakłada tekst na załadowaną grafikę. Użyta przy ostatniej operacji funkcja imagettftext przyjmuje kolejno jako argumenty zmienną z obrazkiem, rozmiar czcionki, pochylenie fontu w stopniach, współrzędne umieszczenia napisu, link do pliku z czcionką oraz na końcu treść napisu. W tym przykładzie użyliśmy czcionki calibri.ttf, której plik należy również umieścić w folderze z banerem.

W stronę przeglądarki

Aktualnie w zmiennej $image przechowujemy gotowy obrazek. Przed jego wyświetleniem musimy jednak zamienić co najmniej jedną informację w nagłówku wysyłanym do przeglądarki. Wersja minimalistyczna kodu odpowiedzialnego za wyświetlanie baneru wygląda tak:

header("Content-type: image/jpeg");
imagejpeg($image);

W tym przypadku informujemy tylko, że przesyłana treść jest grafiką, a nie tekstem jak wskazywałoby jego pochodzenie z pliku .php. Później przesyłamy sam obrazek. Jeśli zaś chcemy aby informacje wyświetlane na banerze były zawsze aktualne, musimy wymusić na przeglądarce by za każdym razem na nowo go pobierała z serwera. Użyjemy do tego tricku polegającego na wyłączeniu cachowania grafiki oraz ustawieniu przeszłej daty wygaśnięcia jej ważności.

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Content-type: image/jpeg");
imagejpeg($image);

Podsumowanie

Oto gotowy efekt nasze pracy:

Fajnie wygląda i co najważniejsze spełnia swoje zadania. Należy jednak pamiętać by nie nadużywać opcji wyłączania cachowania przy dużych serwisach by nie obciążyć bazy danych. A przy naprawdę dużych encyklopediach internetowych zalecane jest napisanie skryptu cachującego liczbę artykułów.

Na koniec załączam paczkę z wszystkimi plikami powyższego baneru.

Podstawy dołączania skryptów

Aby dołączyć zewnętrzny skrypt do naszego WP musimy w w skórce naszej witryny odszukać intrukcję wp_head(). Najczęściej można ją odnaleźć w pliku header.php. Tuż przed nią trzeba dopisać dwie funkcję: pierwszą która zarejestruje nowy skrypt, drugą która go dołączy do strony. Schamtycznie wygląda to tak:

wp_register_script($nazwa, $sciezka, $biblioteki, $wersja);
wp_enqueue_script($nazwa);
wp_head();

Teraz wyjaśnię pokrótce co należy wstawiać w miejsce kolejnych zmiennych. $nazwa to wewnętrzna nazwa dołączanego skryptu. Nie ma znaczenia co tam wpiszemy. Ważne tylko by w obu miejscach, przy rejestracji i dołączaniu skryptu, wpisany wyraz był taki sam. $sciezka to jak łatwo się domyślić adres do pliku z naszym kodem. Można tu wykorzystać funkcję get_bloginfo() aby WP sam wstawił aktualny adres strony lub ścieżkę do folderu z skórką. $biblioteki to parametr który musi być tablicą zawierającą listę bibliotek wykorzystywanych przez nasz kod. Dzięki temu WordPress kontroluje kiedy i jakie skrypty są podpinane do strony i nigdy nie zdarzy się, że np. jQuery będzie ładowane dwa razy. Listę dostępnych bibliotek i ich nazw kodowych można sprawdzić tutaj. Ostatni parametr to zmienna $wersja. Po każdorazowej modyfikacji skryptu musimy obowiązkowo zmienić tą liczbę by wymusić na przeglądarkach ponowne pobranie pliku zamiast korzystania z starej wersji z cachu.

Przykładowy pełny kod wygląda tak:

wp_register_script('tinycarousel', get_bloginfo('template_directory') . '/js/jquery.tinycarousel.min.js', array('jquery'), '1.0' );
wp_enqueue_script('tinycarousel');

W powyższym przykładzie zarejestrowaliśmy wtyczkę tinycarousel której plik znajduje się w folderze z skórką i która wymaga biblioteki jQuery. Następnie dołączyliśmy ją do kodu.

Dołączanie warunkowe

Jeśli z naszego skryptu korzystamy tylko na niektórych stronach to nie ma potrzeby dołączania plików przy każdym wyświetleniu witryny. Warto więc dopisać instrukcję warunkową która spowoduje, że nasz kod będzie dołączany jedynie na wybranych stronach. Poniższy przykłąd będzie dołączał dodatkowe pliki tylko na stronie głównej:

if(is_home){
   wp_register_script('tinycarousel', get_bloginfo('template_directory') . '/js/jquery.tinycarousel.min.js', array('jquery'), '1.0' );
   wp_enqueue_script('tinycarousel');
}

Zaś ten kod spowoduje załadowanie skryptu JS jedynie na stronie z id równym 29:

if(is_page('29')){
   wp_register_script('tinycarousel', get_bloginfo('template_directory') . '/js/jquery.tinycarousel.min.js', array('jquery'), '1.0' );
   wp_enqueue_script('tinycarousel');
}

Jako argument w funkcji if podajemy odpowiedni tag warunkowy. Więcej informacji o nich można znaleźć pod tym linkiem.

Jedną z osób która się tego podjęła był internauta o nicku Wctaiwan. Na swojej stronie umieścił wiersz własnego autorstwa. W utworze którego podmiotem lirycznym jest serwer dowiadujemy się co zmusiło to urządzenie do tak desperackiego czynu jakim jest zwrócenie błędu 404.

It is said, “To err is human,”
That quote from alt.times.lore,
Alas, you have made an error,
So I say, “404.”

Double-check your URL,
As we all have heard before.
You ask for an invalid filename,
And I respond, “404.

”Perhaps you made a typo—
Your fingers may be sore—
But until you type it right,
You’ll only get 404.[...]

Reszta utworu do przeczytania pod adresem: http://wctaiwan.tumblr.com/post/53783479/the-404-poem.

Moim faworytem jest jednak następujący wiersz którego autora niestety nie odnalazłem:

once upon a midnight dreary,
while i porn surfed, weak and weary,
over many a strange and spurious site of ‘hot chicks galore’.

While i clicked my fav’rite bookmark,
Suddenly there came a warning,
And my heart was filled with mourning,
Mourning for my dear amour.

‘Tis not possible!, I pleaded,
But my browser, so conceited,
Remained blank, I then repeated,
Just a blank and nothing more.

With a scream, I was defeated,
For my cookies were deleted,
So i begged, no longer seated,
Give me back my free hardcore!

Then, in answer to my query,
Through the net I loved so dearly,
Came its answer, dark and dreary:
Quoth the server, 404

Innym, bardziej nostalgicznym wierszem może się pochwalić pan Thomas Thurman:

So many years have passed since first you sought
the lands beyond the edges of the sky,
so many moons reflected in your eye,
(familiar newness, fear of leaving port),
since first you sought, and failed, and learned to fall,
(first hope, then cynicism, silent dread,
the countless stars, still counting overhead
the seconds to your final voyage of all…)
and last, in glory gold and red around
your greatest search, your final quest to know!
yet… ashes drift, the embers cease to glow,
and darkened life in frozen death is drowned;
and ashes on the swell are seen no more.
The silence surges. Error 404.

Wiersz znaleziony pod adresem: http://hellopoetry.com/poem/404/

Zaś na poemofquotes.com można przeczytać ciekawy utwór gdzie strona 404 buntuje się przeciwko nazywaniu jej „Pliku nie znaleziono” bo przecież znaleziono: ją samą!

‘File not found’,
how dare they say!
I am here,
just out of the way.

How was I found?
A typo? A mistake?
Or were you snooping!

Nonetheless we meet at last.
I am found – hip hip hooray!
Nevermore can they say:
‘File not found! I loath that page!’

Ale to jeszcze nie wszystkie wiersze. Wiecie co to haiku? To 17 sylabowe utwory wywodzące się z japonii które dzielą się na trzy wersy mające kolejno 5, 7 i znowu 5 sylab. Przykładowe haiku mówiące o błędzie 404 wygląda tak:

Something you entered
transcended parameters.
So much is unknown.

Ten jak i inne utwory w ciekawy sposób opisujące błędu komputerowe można poczytać na stronie: http://www.snopes.com/computer/internet/haiku.asp.

Zabawny wiersz umieścił także użytkownik mind21_98 na forum webhostingtalk.com:

oh what a wonderful tizzy
which was in a fizzy
he couldn’t find the file
which was hiding in the bushes

push the back button oh traveller
contact the owner of the last tavern
find out how to get to where you’re going
and be on your way

A co u nas? Oczywiście na MGdevelop również nie mogło zabraknąć poezji. Jeśli ktoś jest ciekawy może sprawdzić jak wygląda tutaj strona 404. Dowie się wtedy, że skorzystano z następującego wiersza którego autora nie odnaleziono:

Hello. This is a 404.
I can tell you but a little more!
The page you seek cannot be found,
i’m sad to say it’s not around.
I hope with all that’s good in me
this is not a great catastrophe.
Where blame should lie, i cannot say
there are many ways to go astray.
But this one thing i can declare
this life, this world is rarely fair.
So take that word and go your way
i have no other words to say…

Znacie jeszcze jakieś wiersze nt. tego paskudnego błędu? Piszcie, linkujcie, pomóżcie uzupełnić autorów.