dominik bułaj

php developer & web designer

Archiwum kategorii ‘Web’ Category

Coraz wiÄ™cej firm rezygnuje z technologii Adobe Flash na swoich witrynach. JednÄ… z nich jest Virgin America – firma lotnicza, która zrezygnowaÅ‚a z flasha by przyciÄ…gnąć wiÄ™cej klientów korzystajÄ…cych z Flash. O caÅ‚ej sprawie informuje gazeta.pl/technologie.

Powiem szczerze, nigdy nie byÅ‚em zwolennikiem flasha i cieszy mnie, że jego dominacja może trochÄ™ zmaleć. Mam tylko nadziejÄ™, że nie kosztem Silverlighta…
Uważam, że do wiÄ™kszoÅ›ci zastosowaÅ„ wystarczy wykorzystać “moc” jakÄ… oferujÄ… dzisiejsze frameworki JavaScript + CSS.

Jak informuje Gazeta.pl, Google kupiło kolejną w ostatnim czasie firmę oferującą usługi online. Chodzi o firmę DocVerse umożliwiającą obróbkę dokumentów Microsoft Office przez Internet.

Jest to kolejna, po zakupie Picnika, transakcja giganta z Mountain View.

Teraz pozostaje poczekać kilka miesiÄ™cy i zobaczy wykorzystanie “nowych (nabytych) technologii” w Google ;)

Jak wspomniałem w poprzednim wpisie o Google Chrome i Zend_Date, polskojęzyczna wersja przeglądarki Google identyfikuje się jako angielskojęzyczna. Okazuje się jednak, że można to dość prosto zmienić, chociaż samo rozwiązanie to tzw. proteza (ale o tym nieco dalej).

Zmiana nagłówka jest możliwa po przez dodanie parametru uruchamiającego chrome.exe (w Windows).

I tak do:
[ścieżka do katalogu Chrome]\chrome.exe

dodajemy:
[ścieżka do katalogu Chrome]\chrome.exe --user-agent="[tu nasz wpis]"

WÅ‚aÅ›nie w tym momencie powstaje pewien problem. Musimy poznać oryginalnÄ… wartość User Agent, co jest proste. Wystarczy w polu adres wpisać “about:” i otworzyć ten pseudo-adres.
Możemy teraz skopiować zawartość User Agent, zmieniając wartość:
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/5.0.342.2 Safari/533.2

na:
Mozilla/5.0 (Windows; U; Windows NT 6.0; pl) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/5.0.342.2 Safari/533.2

Ów problem to numer wersji Chrome, Safari i Webkita. Po aktualizacji przeglÄ…darki dane te musielibyÅ›my rÄ™cznie zmienić, aby poprawnie identyfikować wersjÄ™ programu (no chyba, że na tym nam nie zależy)…

Używam przeglÄ…darki Google Chrome głównie do przeglÄ…dania sieci – bo jest szybka. Bardzo szybka.
W procesie tworzenia witryn (caÅ‚a otoczka zwana developerkÄ…) używam nadal Firefoxa, gdyż ma co najmniej dwa niezastÄ…pione rozszerzenia – Firebug i Web developer.
Mając do dyspozycji te dwie przeglądarki, jestem w stanie zalogować się do tworzonej aplikacji na dwa różne konta (bo jak wiemy każda przeglądarka to osobna sesja).

W aplikacji do porównania dat używam Zend_Date(). Kod wygląda mniej więcej tak (chodzi o sprawdzenie czy data zdarzenia jest starsza niż 7 dni):

$d1 = new Zend_Date($this->transactionData->datetimeAccepted);
$d2 = new Zend_Date(); // zwraca aktualnÄ… datÄ™ i czas
$d2->addDay(-7); // przesuwam znacznik czasu o 7 dni wstecz

if ($d1->compare($d2) === -1) { // porównuje czy data z bazy ($d1) jest wieksza od ($d2)
// ... dalszy kod
}

W Firefox pieknie działało (Zend_Date::compare() zwracał -1, co oznacza że data $d1 jest starsza od $d2). Odpaliłem widok w Chrome i jakież było moje zdziwienie, gdy wynik testu Zend_Date::compare() wynosił 1 (data $d1 jest młodsza niż $d2).

Po szybkim zbadaniu kodu okazaÅ‚o siÄ™, że w Chrome $d2 ma postać “amerykaÅ„skÄ…”. SprawdziÅ‚em w Zend_Locale() i okazÅ‚o siÄ™, że polskojÄ™zyczna wersja Chrome (v. 5.0.342.1) identyfikuje siÄ™ nagłówkiem:

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/5.0.342.1 Safari/533.2

Szybka zdecydowaÅ‚em siÄ™ na “narzucenie” aplikacji odpowiednich ustawieÅ„ lokalnych.

W Bootstrapie dodałem kod:

protected function _initLocale()
{
    $locale = new Zend_Locale('pl');
    Zend_Registry::set('Zend_Locale', $locale);
}

Oczywiście to w wielkim uproszczeniu, bo aplikacją którą tworzę będzie wielojęzykowa więc i ustawienia lokalizacji będą się dynamicznie zmieniać ;)

Jak niektórym zapewne wiadomo, Czytnik Google nie wspiera obsługi prywatnych feedów.
Czym sÄ… owe prywatne feedy? SÄ… to np. feedy z Gmail, Twittera (timeline) – sÅ‚owem wszÄ™dzie tam, gdzie wymagane jest zalogowanie na wÅ‚asne konto.

NapisaÅ‚em prosty skrypt PHP, dziÄ™ki któremu mam swego rodzaju proxy do Twittera (timeline – czyli to co widzÄ™ po zalogowaniu – statusy osób które obserwujÄ™).

Źródło (poniżej instrukcja użycia)

< ?php
// konfiguracja
define('USER', ''); // twoja nazwa użytkownika
define('PASS', ''); // twoje hasło
define('GOOGLE_READER_ONLY', true); // strona dostępna tylko dla bota Google Reader

// umożliwiamy dostęp tylko Google Reader
if (GOOGLE_READER_ONLY && !preg_match('/Feedfetcher-Google/', $_SERVER['HTTP_USER_AGENT'])) {
    die('401 Unauthorized');
}
// wysyłamy poprawny nagłówek
header('Content-Type: application/rss+xml; charset=utf-8');

// pobieramy i wyświetlamy feed z twitter.com
$curl = curl_init('http://twitter.com/statuses/friends_timeline.rss');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_UNRESTRICTED_AUTH, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 10);
curl_setopt($curl, CURLOPT_USERPWD, USER . ':' . PASS);
echo curl_exec($curl);
curl_close($curl);

Jak używać?
Pobierz plik (zip, tgz), wrzucić na swój serwer (podaj w konfiguracji nazwę użytkownika i hasło).
Na koniec w Czytniku Google dodaj nowÄ… subskrypcjÄ™ podajÄ…c adres URL do pliku na serwerze.

Pomoc
Masz pytania, potrzebujesz pomocy? Skontaktuj się ze mną, a postaram się pomóc :-)

Wprowadzenie
W firmie, do projektu w którym biorę udział, przygotowaliśmy większą paczkę zmian. Powiedzmy, że wersja produkcyjna bazuje na rewizji sprzed miesiąca (korzystamy z SVN; przy każdym commit podajemy ID i url do ticketa).
W miÄ™dzyczasie rozwiÄ…zaliÅ›my w teamie okoÅ‚o 15 ticketów i nasz project manager potrzebowaÅ‚ ich listÄ™, aby przekazać klientowi do ostatecznego sprawdzenia na stagingu. Jako że jestem najbardziej doÅ›wiadczonÄ… osobÄ… w projekcie – padÅ‚o na mnie ;)

Sposób pierwszy (oldschool)
Niby prosta czynność, bo przecież możemy otworzyć system ticketów, wyszukać wszystkie rozwiÄ…zane w ciÄ…gu miesiÄ…ca, a nastÄ™pnie spisać ID i url każdego ticketa. TrochÄ™ czasu by to zajęło…

Sposób drugi (nu skool)
PomyÅ›laÅ‚em, “hej, musi być inna droga”.
Pomocny, po raz kolejny, okazaÅ‚ siÄ™ Eclipse. Aby usprawnić caÅ‚y proces (który zajmie nam ok 30-60 sekund) musimy przejść na perspektywÄ™ “SVN Repository Exploring”. NastÄ™pnie wybieramy w panelu “SVN Repositories” repozytorium i włączamy podglÄ…d historii (“Show history”).

W panelu “History” zaznaczamy interesujÄ…ce nas rewizje i z menu kontekstowego wybieramy “Generate ChangeLog”:
eclipse_svn_changelog_1

W okienku, które się otworzy, mamy wybór jaki format ma mieć nasz changelog oraz gdzie ma być zapisany (w schowku czy na dysku):
eclipse_svn_changelog_2

Wybrałem domyślne ustawienie (svn log + schowek). Wkleiłem do edytora zawartość schowka i oto co otrzymałem:
eclipse_svn_changelog_3

Podsumowanie
Jak widać cała operacja jest bardzo prosta i w pełni zautomatyzowana. Co więcej, jest bardzo pomocna :)

Aktywujemy nowy layout Google

W jednym z poprzednich wpisów pisałem o nowym layout wyszukiwarki Google. Niestety nie sprawdziły się przewidywania TVN24 i nowa szata najpopularniejszej wyszukiwarki nie została upubliczniona. Jest jednak sposób, aby aktywować nowy layout Google.

Znalazłem sposób na aktywowanie nowej szaty, który podlega na dodaniu ciasteczka dla domeny google.com. Został on opisany na stronie Gizmodo.

Krok 1. Wejdz na google.com
Krok 2. Po załadowaniu strony, przekopiuj poniższy kod do paska adresu przeglądarki:

javascript:void(document.cookie="PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com");

Krok 3. Wciśnij enter.
Krok 4. Przeładuj (lub otwórz w nowym oknie / zakładce) google.com.

Viola! Możemy teraz cieszyć siÄ™ “nowym Google” :)

Nowe szukanie w Google

Psi 0.14 dostępne!

Psi logoW końcu kazała się nowa wersja komunikatora Psi.

Nowości w 0.14:
* możliwość definiowania kolorów dla okna rozmów
* możliwość podania przyczyny przy użyciu opcji kick/ban w rozmowach grupowych
* poprawione okno z informacjami o użytkowniku (dostępne więcej pól, kalendarz wyboru daty, możliwość pobrania awataru)
* dodanie obsługi Enchant jako alternatywy dla Aspell
* linia komend udostępnia wybór profilu i ustawianie statusu
* wprowadzono ustawianie statusów i informacji o wstrzymaniu/wznawianiu działania komputera (D-BUS)
* poprawiono kompatybilność rozmów głosowych z programami Pidgin i Empathy
* wprowadzono inne usprawnienia i poprawki

Program pobrać można z oficjalnej strony – pod adresem: http://psi-im.org/download/

Nowy layout Google!

Prawdopodobnie już jutro Google zmieni layout! TakÄ… informacjÄ™ podaÅ‚ Jacek PaÅ‚asiÅ„ski dziÅ› na antenie TVN24. Najbardziej znana wyszukiwarka internetowa zyska dziÄ™ki zmianie wiÄ™cej Å›wieżoÅ›ci. W koÅ„cu można by rzec…

Zmiany dotyczyć bÄ™dÄ… strony głównej i widoku z wynikami wyszukiwania. Oprócz zmian w kolorystyce i elementach graficznych, widok wyników zyska sidebar (w którym znajdziemy m.in. przeniesione z góry strony linki do różnych serwisów Google’a).

Zmiany dotknÄ… logo:

- aktualna wersja:
aktualne logo

- nowa wersja:
nowe logo

oraz strony z wynikami szukania:

- aktualna wersja strony:
aktualny layout

- nowa wersja strony:
nowy layout

- kolejny widok na odświeżoną stronę wyników:
nowy layout

Psi 0.14 opóźnione

Ukazała się wersja Psi 0.14 RC3, można ją pobrać z Sourceforge.

Po raz kolejny przesunięciu uległa data wydania oficjalnej 0.14-ki. Aktualnie, jeśli nie zostaną znalezione żadne krytyczne błędy, oficjalną wersję dostaniemy 2 grudnia.

Favicons w Google ReaderGoogle Reader (w Polsce zwany Czytnikiem) ma nową funkcjonalność. Nie wpływa ona bezpośrednio na funkcjonalność oferowaną przez tą usługę. Jest raczej miłym dla oka dodatkiem.

Dodano możliwość wyświetlania przy subskrypcjach favicon (czyli ikonek serwisów internetowych, które są widoczne w pasku adresu przeglądarki).

Wyświetlanie favicon nie jest dostępne domyślnie. Aby je aktywować należy (jak pokazano na obrazku) kliknąć ikonkę ze strzałką w dół przy nagłówku Subskrypcje, a następnie wybrać opcję Use favicons (aktualnie brak tłumaczenia na język polski).

Oficjalna informacja znajdujÄ™ siÄ™ na blogu Google Reader’a.

webdesignconcepts UdaÅ‚o mi siÄ™ zdobyć kolejny certyfikat Brainbench. Tym razem testowaÅ‚em swojÄ… wiedzÄ™ w zakresie Web Design Concepts. Wynik przerósÅ‚ moje najÅ›mielsze oczekiwania. ZaliczyÅ‚em Master’s Level (4.28 pkt. w piÄ™ciopunktowej skali). W podsumowaniu wyników napisano, iż rozwiÄ…zaÅ‚em test lepiej niż 98% egzaminujÄ…cych siÄ™ przede mnÄ… osób!

RozwiÄ…zanie testu, w skÅ‚ad którego wchodzÄ… 30 pytania, zajęło mi dokÅ‚adnie 27 minut i 9 sekund. ByÅ‚o szybko, Å‚atwo i przyjemnie – wszak ma siÄ™ 10 lat doÅ›wiadczenia w web designie… ;)

Moje mocne strony:
* Web Analytics
* Design Process
* HTML Knowledge
* DOM Scripting (Javascript)
* WWW (World Wide Web) Knowledge
* Accessibility
* CSS Knowledge

Słabe strony: brak

Szczegółowy wynik testu: http://www.brainbench.com/content/transcript/topicdetail.do?testid=10442388

Psi 0.14-rc2 już dostępne

Szybki news będący rozszerzeniem poprzedniego.

DostÄ™pna jest druga wersja kandydujÄ…ca Psi 0.14. Można jÄ… pobrać i testować ze strony Sourceforge. Zmian niewiele – poprawiono błędy zgÅ‚oszone po wydaniu wersji RC1.

Nastąpiła także planowana data oficjalnej (pełnej) wersji 0.14. Zamiast 22. listopada, najnowsze Psi ma ujrzeć światło dzienne 25. listopada.

Nowy projekt (a wÅ‚aÅ›ciwie dwa) majÄ… zostać oparte o Zend Framework. Niby wszystko piÄ™knie – no bo mamy “zajefajny” framework, który zrobi niemal wszystko (brakuje tylko faktu, że kawy nie parzy ;) ).

Chcąc mieć projekty pięknie od początku wykonane z użyciem Zend_Tool i Zend_Application generuje strukturę dokumentu. Przy czym, w ZF 1.8 zaleca się trzymanie wszystkich ustawień w konfiguracyjnym pliku INI (w celu odchudzenia klasy Boostrap).
WracajÄ…c do projektu – od razu zakÅ‚adam panel administracyjny – tworzÄ™ osobny moduÅ‚.
Moduł ten będzie obsługiwał kontrolę dostępu i autentyfikację opartą o bazę danych. Żeby nie powielać kodu dziesiątki razy chcę stworzyć plugin kontrolera, który sprawdzi czy a. user jest zalogowany; b. ma dostęp do zasobu. I tu zonk.

W dokumentacji jest napisane, że w pliku INI można podać listę pluginów:

plugins: array of front controller plugin class names. The resource will instantiate each class (with no constructor arguments) and then register the instance with the front controller.

W przykładzie wygląda to tak:

resources.frontController.plugins.foo = "My_Plugin_Foo"
resources.frontController.plugins.bar = "My_Plugin_Bar"

Niby wszystko jasne, tworzÄ™ dwie klasy dziedziczÄ…ce po Zend_Controller_Plugin_Abstract… Teoretycznie powinienem mieć możliwość wywoÅ‚ania metody preDispatch(), która może sprawdzić czy użytkownik jest zalogowany i czy ma prawa do zasobu. JeÅ›li nie to, w zależnoÅ›ci od sprawdzenia, albo przekierować go na formularz logowania, albo wyÅ›wietlić stronÄ™ z informacjÄ… o braku dostÄ™pu.
Teoretycznie – bo ten kod nie dziaÅ‚a (błąd Å‚adowania klasy, mimo że jest ona w include_path)!
Co wiÄ™cej straciÅ‚em dziÅ› 2 godziny na znalezienie “obejÅ›cia”. ObejÅ›cie to nic innego jak stworzenie metody _initPlugins() w Bootstrap i po staremu dodanie pluginów do front kontrolera:

protected function _initPlugins()
{
    $front = $this->bootstrap('frontController');
    $front->registerPlugin(new My_Plugin_Foo());
}

Przy okazji przejrzałem dokładniej dokumentację ZF i takie oto wnioski przyszły mi do głowy:

  • ZF to straszna kobyÅ‚a, która sama w sobie nie trzyma standardów – można to samo wykonać na 3 różne sposoby (framework chyba powinien narzucać jeden standard!?)
  • oficjalna dokumentacja jest nieaktualna
  • API tez nieaktualne (Zend_Version) pokazuje numer 1.9.3
  • jedynÄ… pomocÄ… sÄ… fora i bugtracker ZF

Do kolejnego razu! (oby można byÅ‚o powiedzieć coÅ› in-plus…)

Niemal rok temu pisaÅ‚em jak zainstalować system Trac w Ubuntu. Niedawno jednak przeinstalowaÅ‚em Ubuntu “od zera” (majÄ…c oczywiÅ›cie kopie wczeÅ›niejszej wersji systemu).

Przy okazji odbudowy systemu postanowiłem przenieść repozytoria svn z /var/lib/svn (jak podałem w zeszłorocznym wpisie) na /home/subversion.
Zmiana podyktowana jest wygodÄ… i wiÄ™kszym bezpieczeÅ„stwem – po prostu /home mam na osobnej partycji, dlatego nie tracÄ™ danych przy ewentualnym padzie systemu i koniecznoÅ›ci reinstalacji.

Jak zatem “przestawić” Trac’a, aby używaÅ‚ nowej lokalizacji repozytorium svn?

Po pierwsze edytujemy konfiguracje każdego z projektów trac (/var/lib/trac/[NAZWA PROJEKTU]/conf/trac.ini).

Odszukujemy liniÄ™:

repository_dir = /var/lib/svn/[NAZWA PROJEKTU]

i zamieniamy jÄ… na:

repository_dir = /home/subversion/[NAZWA PROJEKTU]

Otwierając stronę projektu w przeglądarce (http://127.0.0.1/projects/[NAZWA PROJEKTU]) zobaczymy ostrzeżenie o treści:
Warning: Can’t synchronize with the repository (The ‘repository_dir’ has changed, a ‘trac-admin resync’ operation is needed.). Look in the Trac log for more information.

Wszystko powinno być jasne. Przechodzimy do konsoli i wykonujemy następujące polecenie (będąc w /var/lib/trac):

trac-admin [NAZWA PROJEKTU] resync

Gotowe!

Archiwa