<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"><channel><title>b4rtaz.blog</title><link>http://b.nano2.pl/</link><description>Wpisy z dziennika internetowego Jogger, wspomaganego przez Jabbera</description><lastBuildDate>Mon, 06 Feb 2012 22:43:24 +0100</lastBuildDate><generator>JoggerPL</generator><item><title>Projekt: Trackbuzz</title><link>http://b.nano2.pl/2011/08/10/projekt-trackbuzz/</link><description>

Zacznę może od drobnej uwagi, nie przywiązuje do niniejszego projektu zbyt dużej wagi - jest to dla mnie coś na kształt testu w laboratorium. Pomysł na Trackbuzza zrodził się parę miesięcy temu podczas rozmowy z Dawidem - moim współpracownikiem w serwisie RLY.pl. Rozmowa dotyczyła różnych zastosowań widgetów na stronę od Facebooka czy Twittera (dziś do tej listy powinienem dodać jeszcze G+).

Pół efektem tych rozmów była własna implementacja sharera od Facebooka w serwisie RLY.pl (w liście wpisów przy każdym tytule znajduje się ładniutka ikonka co i ile tam na Facebooku). Tydzień temu postanowiłem rozpocząć pracę nad całą ideą rozwinięcia socjalnych liczników i tak po całym tygodniu plus jednym dniu przedstawiam Trackbuzza.

Bot

Założenie jest bardzo proste, jakąś metodą trzeba pozyskiwać linki i je analizować: przez jakiś czas odpytując Facebooka czy Twittera jak wygląda ich popularność w tych serwisach. W efekcie zbierzemy listę najciekawszych i najpopularniejszych treści w Sieci w danym czasie. Nie będę ukrywał, że poszedłem po linii najmniejszego oporu i jako źródło linków wybrałem kanały RSS - co później okazało się, że nie było to takim złym pomysłem. Początkowo &quot;bot szperający&quot; powstał w języku C# ale ze względu na brak mono na moim serwerze musiałem przepisać go do Javy.

Problemów było bez liku. Wiele serwisów które chciałem śledzić albo posiadają kanał RSS z wzbogacanymi linkami do treści typu ?utm_source=rss... (co wystarczy usunąć) albo korzystają z zewnętrznych rozwiązań do zliczania ruchu z kanałów RSS typu feedburner.com czy feedsportal.com (o ile feedburner udostępnia nie do końca zgodnie ze standardem RSS/ATOM informację o oryginalnym linku, to feedsportal robi to... różnie (chyba zależy od konfiguracji feedu)).

Każdy link do treści musi wyglądać identycznie tak samo jak link który jest linkowany w widgecie na stronie. Dla przykładu, nie jest możliwe drogą RSS pozyskać oryginalny (czyli Facebookowy) link do treści np. w serwisie demotywatory.pl. W kanale znajdziemy link typu demotywatory.pl/3366149 a serwis udostępnia link Facebookowi demotywatory.pl/3366149/bo-najwazniejsze.... Bez bardziej skomplikowanego bota który czytał by HTML na razie Demotywatory nie zagoszczą na Trackbuzzie.

Front-end

Jeżeli chodzi o front-end największym problemem było sortowanie danych. W pierwszym dniu gdy wykonałem pierwsze zapytanie wg. stanu licznika odrobinę się zmartwiłem, serwis kwejk.pl posiadał udostępnień/polubień tak dużo, że praktycznie większość zwróconych rekordów pochodziło z serwisu kwejk. Wtedy wpadłem na pomysł, że należy dorobić kategorię kanałów i wprowadzić tzw. siterank (czyli stałą dla każdego kanału przez którą wartość socjalnego licznika jest przemnażana, zawyżając lub zaniżając licznik).

Efekt był całkiem zadowalający. A kategorie chyba rozwiązały problem doboru treści do użytkownika. Po prostu odznaczamy czego nie chcemy i tyle.

Aktualnie siterank jest dobierany na zasadzie &quot;spróbujmy tak&quot;, więc wszystko jest jeszcze do wyregulowania. Ogólnie myślę aby odrobinę zmienić algorytm filtrujący dane. Tymczasem daje w ręce Wam prawie gotowy produkt i jestem ogromnie zaciekawiony waszą reakcją.

Dodam jeszcze, że czas na stronie bez względu na wszystko jest podawany w strefie UTC. Na razie problem lokalizacji sobie odpuściłem.</description><pubDate>Wed, 10 Aug 2011 14:52:21 +0200</pubDate><guid>http://b.nano2.pl/2011/08/10/projekt-trackbuzz/</guid><category>Idea</category><category>Programowanie</category><category>Projekty</category><category>Techblog</category></item><item><title>Jak Google wykonuje zrzut ekranu strony</title><link>http://b.nano2.pl/2011/07/27/jak-google-wykonuje-zrzut-ekranu-strony/</link><description>

Od czasu gdy Google wydało swój odpowiednik dla Facebooka na niektórych stronach firmy z Mountain View - w tym G+ oczywiście, możemy w rogu znaleźć przycisk Wyślij opinię który pozwala użytkownikom raportować błędy na stronie. Nie było by w tym nic dziwnego gdyby nie fakt, że ta niby zwykła funkcjonalność pozwala zaznaczyć na stronie jaki obszar nas interesuje a na domiar tego jakimś sposobem Google generuje zrzut ekranu naszej strony. Ciekawość mnie zżerała więc zabrałem się za analizę...

Na początku oczywiście wertowanie w Sieci, znalazłem kilka wątków w serwisie stackoverflow.com ale w dyskusji niestety nie odnalazłem sensownej odpowiedzi. Niektórzy użytkownicy sugerowali, że skrypt po stronie użytkownika przesyła do serwera współrzędne zaznaczonych obszarów + adres gdzie się znajdujemy, a resztę renderuje serwer. Niby wszystko jasne ale Firebugiem zmieniamy logotyp Google na napis &quot;WTF&quot; i nasz wygenerowany screen będzie z... nowym napisem.

Legenda głosi, że JavaScript dopuszcza wykonywanie zrzutów strony za pomocą metody drawWindow() w obiekcie canvas. Jest to prawda ale tylko wtedy gdy otrzymamy od przeglądarki (tu Firefox) uprawnienia do XPCOM (albo ewentualnie do UniversalBrowserRead). A jeżeli próbujemy to zrobić ze strony internetowej to niestety dane nam to nie będzie. Żebranie za pomocą enablePrivilege() również się na nic nie zda.

Niestety nadszedł czas na analizę skryptów Google - a każdy kto choć raz do nich zajrzał wie o co chodzi - analiza jednej linijki może zająć nawet parę minut. Tak na marginesie, w skryptach odpowiadających za feedback (product__pl.js, render_frame.js itd.) znaleźć można dużo ciekawych rzeczy, np. algorytm kompresujący grafikę z obiektu canvas do formatu JPG od... Adobe. :)

Po jakimś czasie w końcu odnalazłem rozwiązanie. Większość kodu odpowiedzialnego za generowanie zrzutu strony jest w pliku product__pl.js, a zasada działania metody Google jest bardzo prosta: skrypt na partyzanta generuje screena strony skacząc kolejno po obiektach w DOM dokumentu i generuje samodzielnie widok każdego obiektu (ustala pozycje, oblicza paddingi itd.). Na chłopski rozum mamy do czynienia z przeglądarką w przeglądarce. :)

Na ale o efekt chodzi, prawda?</description><pubDate>Wed, 27 Jul 2011 12:31:26 +0200</pubDate><guid>http://b.nano2.pl/2011/07/27/jak-google-wykonuje-zrzut-ekranu-strony/</guid><category>Programowanie</category><category>Techblog</category></item><item><title>Pcsx2 i emulowanie gier z PlayStation 2</title><link>http://b.nano2.pl/2011/02/20/pcsx2-i-emulowanie-gier-z-playstation-2/</link><description>

Jeżeli jesteś biednym nie mającym na chleb fanem gier konsolowych, nie posiadasz konsoli, i pod ręką masz komputer z powiedzmy 4 rdzeniami, 4GB pamięci RAM oraz dosyć nowoczesną kartę graficzną* to istnieje pewien sposób jak zagrać w gry z PlayStation 2 nie rezygnując jednocześnie z masła na chlebie.

Dla przypomnienia dodam, że PlayStation 2 zostało wydane w 2000 roku. Wewnątrz znajdziemy 64-bitowy procesor 299Mhz oraz 32MB pamięci RAM. Tak, ja też nie wierzyłem na początku. Tu źródło.

Co jest nam potrzebne?


Emulator Pcsx2. Im nowsza wersja tym lepiej, ja pobrałem najnowszą betę w wersji 0.9.7 która oprócz wielu ulepszeń współpracuje w zdecydowanie milszy sposób z Windowsem 7 niż starsza wersja.
Bios. Trzeba znaleźć na własną rękę w Sieci albo zgrać go z prawdziwej konsoli. Nie jestem pewien ale chyba pierwszy i drugi sposób firmie Sony może się nie spodobać.
Jakiś pad. Co prawda można skonfigurować emulator tak aby symulował, że klawiatura to pad ale to niestety  może się skończyć połamaniem palców.
Gra na PlayStation 2. Czy to nie oczywiste?


Po zainstalowaniu pierwsze uruchomienie, konfigurujemy w kreatorze gdzie i jakie katalogi mamy mieć. Wrzucamy w katalog /bios bios (rozszerzenie .bin), i zaczynamy zabawę z konfiguracją pluginów. Menu Config -&gt; Plugin/Bios selector. W zakładce bios wybieramy przed chwilą wrzucony bios.

Zakładka plugins. Tutaj już niestety nie mogę precyzować za dużo, gdyż np. konfiguracja sterownika graficznego i jego opcji zależy od karty graficznej. Dla mojego GeForce 9800 GT plugin GDSx z obsługą SSE2, w trybie DirectX 9, z wyłączonym skalowaniem (tryb używania oryginalnej rozdzielczości PS2) działa najwydajniej.

Resztę pluginów oprócz pluginów do obsługi pada i napędu DVDROM osobiście nie ruszałem. Wszystko intuicyjnie da się skonfigurować. Zapisujemy. W menu CDVD wybieramy skąd emulator ma załadować grę (obraz iso, czy używać pluginu czytającego z naszego napędu).

Uruchamiamy grę w menu System -&gt; Boot .... Jeżeli wszystko jest dobrze skonfigurowane powinniśmy ujrzeć nowe okienko z ładującą się grą.

Jak to działa

Osobiście po kilku próbach udało mi się skonfigurować emulator tak aby renderował średnio 54 klatki na sekundę w grze Fight Night 3. Szczyt szczęścia to 60 klatek na sekundę, ale spowolnienie rzędu kilku procent w moim odczuciu nie przeszkadza w grze. Zwłaszcza, że mam wrażenie, iż FN3 na prawdziwym PS2 chodziło chyba troszkę wolniej.

Jako, że próba nagrania efektów pracy emulatora za pomocą Frapsa kończyła się spadkiem renderowania do 15 klatek na sekundę, postanowiłem nagrać krótki film pokazowy w troszkę partyzancki sposób: aparat cyfrowy przystawiony do ekranu.



Jak widać wygląda to nawet całkiem znośnie. Przypomnę, że autorzy emulatora na swojej stronie umieścili listę wspieranych gier. Warto się z nią zapoznać.

* to nie są minimalne wymagania emulatora, tylko specyfikacja mojej jednostki.</description><pubDate>Sun, 20 Feb 2011 16:31:21 +0100</pubDate><guid>http://b.nano2.pl/2011/02/20/pcsx2-i-emulowanie-gier-z-playstation-2/</guid><category>Myśli kudłate</category><category>Offtopic</category><category>Techblog</category></item><item><title>Textarea i blokowanie zmiany rozmiaru pola</title><link>http://b.nano2.pl/2011/02/09/textarea-i-blokowanie-zmiany-rozmiaru-pola/</link><description>Nowy Firefox 4 oferuje domyślnie* podobne udogodnienie co wcześniej oferował Google Chrome czy Opera, czyli domyślnie włączona możliwość zmiany rozmiaru pola  - w przypadku gdy designer popuścił wodzę fantazji i dał za mało miejsca do wprowadzania tekstu. Jako, że parę osób już mnie pytało jak to okiełznać najrozsądniej będzie jak umieszczę opis tutaj.

Chociaż wyżej wymieniona funkcjonalność jest całkiem przydatna, to niekiedy szablon potrafi się ładnie wysypać jeżeli użytkownik zbytnio poszaleje ze zmianą rozmiaru pola. Aby na to nie pozwolić, CSS3 daje nam nam nowy atrybut resize do którego możemy zastosować 5 wartości.

resize: none;         // zmiana rozmiaru zablokowana.
resize: horizontal;   // tylko w osi x.
resize: vertical;     // tylko w osi y.
resize: both;         // oś x i y.
resize: inherit;      // dziedziczenie, domyślne.

Więc aby zablokować zmianę rozmiaru pola  wystarczy taki kod CSS:

textarea {resize: none;}

Dodam jeszcze, że atrybut resize możemy śmiało stosować w innych tagach niż tylko wyżej wspomniany. Dla niedowiarków dorzucam mały przykład jak to działa za życia.

* wcześniej był na to stosowny plugin.</description><pubDate>Wed, 09 Feb 2011 14:48:45 +0100</pubDate><guid>http://b.nano2.pl/2011/02/09/textarea-i-blokowanie-zmiany-rozmiaru-pola/</guid><category>Programowanie</category><category>Techblog</category></item><item><title>Glóp lóp, czyli globloop.pl</title><link>http://b.nano2.pl/2010/12/29/glop-lop-czyli-globloop-pl/</link><description>

Mieć pomysły, kreować pomysły albo chociaż wspierać pomysły. Nie mogłem sobie nie pozwolić dopomóc przy Globloopie. Tak więc jest lay made in me, i do tego system głosowania na wpisy*. W ramach buntu kompletnie olane renesansowe IE'ki.

Domena za 12,50 na rok, więc nazywam ten projekt co najmniej eksperymentalnym.

* A wszystko stoi na Joggerze. Który jest nie miły i nie dodaje wpisów z GL na swoją główna.</description><pubDate>Wed, 29 Dec 2010 11:14:50 +0100</pubDate><guid>http://b.nano2.pl/2010/12/29/glop-lop-czyli-globloop-pl/</guid><category>Idea</category><category>Programowanie</category><category>Projekty</category></item><item><title>Nowa odsłona bloga</title><link>http://b.nano2.pl/2010/10/31/nowa-odslona-bloga/</link><description>Zebrałem w końcu siły, i posprzątałem ten bałagan. Po kilku latach niesystematycznych wpisów, niezunifikowanego stylu prowadzenia bloga w efekcie więcej profesjonalizmu mogłem dostrzec w skompilowanym kodzie źródłowym notatnika niż na moim podwórku. Tak też, nowy design, HTML5 i paręnaście skasowanych wpisów, których poziom niestety już mi nie odpowiadał.

Teraz z pewnością, przyjemniej będzie mi się tutaj wracało. Nawet podstronę o-mnie uzupełniłem!</description><pubDate>Sun, 31 Oct 2010 14:29:58 +0100</pubDate><guid>http://b.nano2.pl/2010/10/31/nowa-odslona-bloga/</guid><category>Blog</category></item><item><title>Rly.pl już jest, zdążyłem...</title><link>http://b.nano2.pl/2010/10/03/rlypl-juz-jest-zdazylem/</link><description>

Rok studencki już praktycznie się zaczął, a jak wiadomo ilość wolnego czasu teraz spadnie dosyć gwałtownie. Cel był jeden, zdążyć przed studiami. I chodź mamy dwa dni opóźnienia i radosny weekend, chyba się wyrobiłem.

Serwis RLY.pl traktuje dosyć szeroko o ciekawostkach. Do dzisiaj wszystkie treści były dodawane przez moją osobę oraz przez Dawida. Od dzisiaj otwieramy się na ludzi, dając każdemu użytkownikowi porządny panel redaktorski. Dodawanie newsów, artykułów, galerii, filmików czy linków - wszystko prosto i łatwo.

Wiele pomysłów w nowej wersji zostało zaczerpniętych z zewnątrz. Mamy ikonki koło nicków z Allegro, procentowe ocenianie treści z Digartu, powiadomienia z Deviantartu, poczekalnie z Digga, zbieranie gotówki za aktywność z... długo by mówić. Inspirowaliśmy się najlepszymi. Myślę, że widać.

Wprawdzie zostało nam jeszcze trochę pracy, ale już niedługo wszystko będzie dopięte na ostatni guzik. Tymczasem, zapraszam.</description><pubDate>Sun, 03 Oct 2010 11:10:59 +0200</pubDate><guid>http://b.nano2.pl/2010/10/03/rlypl-juz-jest-zdazylem/</guid><category>Programowanie</category><category>Projekty</category></item><item><title>Wrzuta.pl i pobieranie znów nie działa...</title><link>http://b.nano2.pl/2010/07/18/wrzuta-pl-i-pobieranie-znow-nie-dziala/</link><description>Programiści z wrzuty po raz kolejny zmienili sposób pobierania danych ich playera z serwerów. Rezultat jest dosyć oczywisty, większość programów oraz serwisów żerujących na wrzucie przestało działać. Jako, że wizja niemożności słuchania Beethovena w przeglądarce bez Flasha była wręcz przerażająca - postanowiłem przyjrzeć się co się zmieniło.

 Dawniej wystarczyło skopiować tzw. hash z adresu naszego utworu Beethovena po czym przepisać adres w przeglądarce na kształt:

http://[1].wrzuta.pl/aud/file/[2]/[3]

1 - nick osoby która wgrała plik
2 - hash pliku
3 - nazwa utworu (chyba nawet nie potrzebna)

Zostało to później zmienione - tzn. zmiany nazw katalogów, ale zasada była taka sama. Dzisiaj aby dostać się do pliku wymagany jest nie tylko hash (i to nie ten który widnieje w adresie przeglądarki!), ale również czas wywołania żądania oraz pewna suma kontrolna - która jest generowana względem czasu żądania.

http://c.wrzuta.pl/[1]/[2]?SDSAccessKeyId=[3]&amp;Signature=[4]&amp;Expires=[5]

1 i 2 - hash najprawdopodobniej zależny od nazwy utworu/uploadera
3 - wewnątrz serwerowy hash pliku
4 - suma kontrolna
5 - czas żądania typu POSIX

Taki link jest generowany tylko raz, i domyślam się, że staje się nieaktywny po pewnym czasie. Wniosek jest jeden: za każdym razem gdy chcemy odtworzyć utwór Beethovena potrzebny jest nam nowy link.

Jak się okazuje to nie Flashowy player buduje powyższy link do pliku tylko serwer wrzuty. Czyli zanim odtworzymy cokolwiek na wrzucie, najpierw player łączy się z serwerem po czym dostaje owy wygenerowany link i dopiero pobiera interesujący nas plik. Jak otrzymuje owy link?

http://[1].wrzuta.pl/xml/plik/[2]

1 - nazwa użytkownika
2 - hash pliku (ten z adresu)

W odpowiedzi otrzymujemy dokument XML, gdzie w drzewie dokumentu znajdujemy tag fileId z naszym nowym wygenerowanym adresem. Tadam!

Mądra myśl!

Jeżeli myślisz, że zmiana jest bezsensowna bo dalej można dowolnie pobierać pliki to jesteś bliski prawdy. Tym to sposobem Wrzuta.pl zablokowała dostęp do tworzenia pobieranych linków wszystkim serwisom Internetowym generującym owe linki za pomocą JavaScriptu (z poziomu JS nie można pobierać żadnych danych nie ze swojej domeny).

Natomiast serwisy które ten zabieg zrobią po stronie serwera, wrzuta może z czasem zablokować dostęp do serwera po IP - w końcu adres IP serwera jest stały. Zostaną tylko sprawne aplikacje po stronie klienta i własne wklepywanie adresu w przeglądarkę...</description><pubDate>Sun, 18 Jul 2010 22:13:54 +0200</pubDate><guid>http://b.nano2.pl/2010/07/18/wrzuta-pl-i-pobieranie-znow-nie-dziala/</guid><category>Offtopic</category><category>Techblog</category></item><item><title>Canvas i płonący input</title><link>http://b.nano2.pl/2010/07/16/canvas-i-plonacy-input/</link><description>

W ramach przygotowań do nowego wyglądu dla tego bloga, postanowiłem pobawić się trochę nowym wynalazkiem HTML5 - obiektem canvas, którego planuje wykorzystać w nowym designie. Wynik okazał się dosyć nietypowy... [:

Co powiecie na małe podpalenie przycisku po najechaniu na niego myszką? Może taki efekt przydałby się dla przycisku &quot;kup teraz&quot; w serwisie Allegro.pl? Oddam skrypt dla tego celu nawet bez dziękuje...

A już bardziej poważnie, przy szorowaniu myszką po kilku buttonach naraz przeglądarka może srogo spowolnić. Z moich obserwacji efekt najwydajniej działa w Operze oraz Google Chrome. Ale najładniej się prezentuje w Firefoxie i Operze. W przypadku windosowskiego Safari podświetlenie tylko jednego buttona zacina na kilka sekund przeglądarkę.

	Z całą pewnością to nie wina cztero-rdzeniowego pheneona 3,2 Ghz.
Na leciwym laptopie w przeglądarce Google Chrome animacja chodzi o dziwo płynnie.


Aby zaobserwować efekt należy posiadać przeglądarkę z obsługą canvas. Czyli na dziś wszystkie IE'ki odpadają. Omawiany efekt można zobaczyć tutaj...</description><pubDate>Fri, 16 Jul 2010 20:59:19 +0200</pubDate><guid>http://b.nano2.pl/2010/07/16/canvas-i-plonacy-input/</guid><category>Idea</category><category>Programowanie</category><category>Techblog</category></item><item><title>Finser.pl -  uruchomiony</title><link>http://b.nano2.pl/2010/07/03/finser-pl-uruchomiony/</link><description>

Kolejna zakończona realizacja moja... dla mnie. Finser jest webaplikacją służącą do zarządzania pieniędzmi, analizy wydatków czy kontroli przychodów. Wszystko oparte na pomyśle - jednym z głównych atutów, blipa czy twittera: składni. Dane do Finsera wprowadza się za pomocą zwykłego tekstu wzbogaconego o takie elementy jak tagi, konta czy po prostu kwotę.

Wpisujesz -20zł na #kino, dusisz enter i to wszystko! Finser będzie zliczał na bieżąco ile wydałeś na #kino, ile masz jeszcze pieniędzy w $portfel'u - a to dopiero początek! Analiza miesięczna, roczna, statystyki i wykresy to niewątpliwie cenne dane podczas kolejnych wydatków.

Przykłady jak używać Finsera oraz niektóre jego funkcje można zobaczyć w prezentacji instruktażowej.</description><pubDate>Sat, 03 Jul 2010 10:59:23 +0200</pubDate><guid>http://b.nano2.pl/2010/07/03/finser-pl-uruchomiony/</guid><category>Idea</category><category>Projekty</category></item><item><title>Szybciej niż DOMContentLoaded</title><link>http://b.nano2.pl/2010/07/02/szybciej-niz-domcontentloaded/</link><description>Oddzielenie warstwy zawartości, prezentacji i zachowania w dzisiejszych czasach stało się już nie trendem, a jednym z podstawowych umiejętności koderów. Takie rozwiązanie ma wiele zalet - daruje sobie i Wam ich wyszczególnianie. Są oczywiście również wady. Jedną z bolączek tego rozwiązania jest problem skakania strony podczas ładowania dłuższych dokumentów. Związane jest to z faktem, że zanim DOM dokumentu zostanie załadowane wszystkie bloki które zostaną ukryte za pomocą JavaScriptu na chwilę pojawią się na ekranie po czym znikną (np. w przypadku kart zakładek).


	Oczywiście jeżeli koder stwierdzi: czemu by nie ukryć za pomocą stylów wszystkich kart zakładek z wyjątkiem tej wybranej - bo przecież JavaScriptem można zmieniać zakładki, to rzecz jasna problemu nie będzie...
	Ale jeżeli chcemy być przyjaźni dla osób bez JavaScriptu oraz QL&amp;Trendy to problem jest.


Riddle kiedyś na swoim blogu wspominał, że w tylko w takich przypadkach wrzucanie skryptów gdzieś w bebechy  jest usprawiedliwione. To jedyne wyjście?

Ostatnio wpadłem na pomysł jak można by w niektórych przypadkach ten problem rozwiązać. Wystarczy, że za pomocą JavaScriptu umieszczonego w sekcji  dokumentu dorzucimy do tagu  klasę js. Możemy to zrobić nawet jeżeli jeszcze nie został dodany ani jeden element  do DOM. Odtąd tworząc style stosujemy prefiks .js ustalając zachowanie elementów z włączonym JavaScriptem. W efekcie otrzymujemy CSS dla użytkowników z JavaScriptem i bez.

Metoda działa we wszystkich nowoczesnych przeglądarkach jak i również w IE 6.0 i wyższych.

{geshi lang=javascript} 
document.getElementsByTagName('html')[0].className = &quot;js&quot;; 
{/geshi}

{geshi lang=css}.tab {display:block;}

.js .tab {display:none;}
.js .tab.select {display:block;}{/geshi}

Dzięki temu rozwiązaniu, również możemy np. w prosty sposób ukryć na stronie elementy które są dostępne tylko z JavaScriptem. Zastosowań jest wiele...

{geshi lang=css}#twitter {display:none;}
.js #twitter {display:block;}{/geshi}

Przygotowałem dwie prezentację, pierwsza to bardzo prosta pokazówka jak działa powyższy kod, druga zaś to przykład kart z zakładkami (nie zapomnieć zobaczyć karty bez JavaScriptu!).

Edit: kilka poprawek.</description><pubDate>Fri, 02 Jul 2010 15:52:58 +0200</pubDate><guid>http://b.nano2.pl/2010/07/02/szybciej-niz-domcontentloaded/</guid><category>Idea</category><category>Programowanie</category><category>Techblog</category></item><item><title>Generowanie wykresów Flash za pomocą JavaScriptu</title><link>http://b.nano2.pl/2010/03/11/generowanie-wykresow-flash-za-pomoca-javascriptu/</link><description>

Generowanie wykresów na stronach Internetowych jest problemem który możemy rozwiązać na kilka sposobów. Od rozwiązań po stronie serwera - czyli generowanie obrazków z wykresem przez nasz skrypt, po rozwiązania po stronie klienta. Albo stosujemy jakieś zewnętrzne narzędzia - np. Google API, albo próbujemy sami. Możemy to zrobić np. wyginając niesemantycznie kilka warstw (lub ładniej obiektem , ale niestety nie zawsze wspieranym) lub podać dłoń technologii Flash - której się przyjrzę.

Poszukując dla swojego projektu rozwiązania, głównym kryterium był wymóg prostej interakcji z użytkownikiem. Mam na myśli, wyświetlenie bardziej precyzyjnych danych pozycji wykresu po najechaniu na nią myszką. Dlatego generowania obrazkowych wykresów kategorycznie się nie nadawało. Wybór technologii Flash spowodowany był tylko jednym argumentem - większa dostępność w stosunku do młodego obiektu canvas.


	Tak trochę odbiegając, generowanie po stronie klienta wykresów ma spory plus, oszczędza moc naszego serwera...


Open Flash Chart 1.9.7

Jako, że z technologią Flash miałem dawno krótką przygodę postanowiłem poszukać jakiegoś gotowego rozwiązania. Odnalazłem projekt o nazwie Open Flash Chart który został opublikowany na bazie licencji GPL. Projekt aktualnie jest rozwijany w wersji 2.x - która dla mojego dosyć purystycznego oka, posiada dosyć sporą wadę: plik Flash waży ponad 250KB. Na szczęście w serwisie SourceForge odnalazłem, ostatnią wersję projektu z linii 1.x w której plik Flash nie przekracza 65KB a zarazem spełnia wszystkie moje oczekiwania.

Wersja z linii 1.x niestety dopuszcza tylko dwa sposoby wprowadzenia danych do wykresu - i nie ma możliwości zrobienia tego za pomocą JavaScriptu (co ciekawe w linii 2.x zostało to wprowadzone, ale było by za łatwo). Pierwszy to przez podanie parametru ze ścieżką z danymi do wykresu wraz ze ścieżką do pliku Flash, np.:

</description><pubDate>Thu, 11 Mar 2010 14:15:45 +0100</pubDate><guid>http://b.nano2.pl/2010/03/11/generowanie-wykresow-flash-za-pomoca-javascriptu/</guid><category>Programowanie</category><category>Projekty</category><category>Techblog</category></item><item><title>Nano² Studio uruchomione</title><link>http://b.nano2.pl/2010/02/12/nano-studio-uruchomione/</link><description>

W końcu! Wielotygodniowy produkt mych dłoni w końcu mogę odhaczyć na liście pt. &quot;do zrobienia&quot;...

A tymczasem aż wypada się pochwalić. Zapraszam: nano2.pl . :)</description><pubDate>Fri, 12 Feb 2010 12:54:14 +0100</pubDate><guid>http://b.nano2.pl/2010/02/12/nano-studio-uruchomione/</guid><category>Programowanie</category><category>Projekty</category></item><item><title>Google Maps w komercyjnym zastosowaniu...</title><link>http://b.nano2.pl/2008/07/09/google-maps-w-komercyjnym-zastosowaniu/</link><description>Zostałem przydzielony do wykonania broszurki reklamowej dla małej prywatnej firmy. Broszurki na której oprócz nazwy firmy, wypunktowanej oferty oraz adresu znaleźć się miała mapa z zaznaczonym punktem gdzie-to-jest. Jak nauczyła historia – na szczęście nie na mojej skórze, użycie do tego celu polskich map (z naciskiem na polskie aplikacje) nie było najlepszym wyjściem.  Dlatego też, postanowiłem skorzystać z usług Google Maps.

Właściciel owej prywatnej firmy jest moim krewnym. Ale to chyba nie ma nic do rzeczy?
Sam projekt graficzny mam nadzieje, że także nie ma nic do rzeczy?



Przyznać się muszę, że najpierw sporządziłem projekt graficzny z użyciem map Google a później dopiero zacząłem studiować tzw. warunki korzystania. Które wnet bezapelacyjnie, rozwiązują kwestie komercyjnego użytku:

Mapy Google, w tym wyniki lokalnego wyszukiwania, mapy i zdjęcia, są udostępniane użytkownikowi tylko do osobistego, niekomercyjnego użytku. Mapy Google są udostępniane użytkownikowi biznesowemu wyłącznie do użytku wewnętrznego i nie mogą być redystrybuowane w celach komercyjnych.

Request for permission
A pod jakim kątem nie spojrzeć, broszurki są wytworem komercyjnym - i nie miały służyć jedynie użytkowi wewnętrznemu. Plan rozpowszechniania broszurek, był prosty: każdy potencjalny klient odwiedzający firmę mógłby otrzymać je za darmo. Ostatnim ratunkiem, przed ręcznym odrysowywaniem dość sporego terenu, był  formularz wniosków o pozwolenie (w j. Ang).

Kiedy potrzebne jest pozwolenie na wykorzystanie Cech marki Google?
Krótka odpowiedź brzmi: prawie zawsze. [...]

Po dokładnym wypełnieniu, formularza oraz dołączeniu do niego zdjęcia broszurki, zgodnie z komunikatem potwierdzającym, odpowiedź miała przyjść w terminie dwóch-czterech tygodni. Przyszła po... sześciu godzinach. Z radosną nowiną: pozwolenie jest (z naciskiem na; tylko ten projekt oraz użycie nie pociągające za sobą zysk) ale z wymogiem dostosowania się do wytycznych dot. korzystania z Cech marki Google.

Wcześniej na użytych mapach Google, był naniesiony tekst &quot;Google Maps ™&quot;. Co zobowiązało do naniesienia poprawek (dodania &quot;© 2008 PPWK, TeleAtlas&quot;).


Wpis ten niech będzie potwierdzeniem, że w Google pracują... ludzie.</description><pubDate>Wed, 09 Jul 2008 12:25:23 +0200</pubDate><guid>http://b.nano2.pl/2008/07/09/google-maps-w-komercyjnym-zastosowaniu/</guid><category>Techblog</category></item><item><title>Wszyscy zaczynają od... hello world!</title><link>http://b.nano2.pl/2007/11/17/wszyscy-zaczynaja-od-hello-world/</link><description>Więc i ja tak zacznę. Nie dlatego, że nie stać mnie na nic bardziej oryginalnego. Po prostu uważam, że ten oklepany zwyczaj, może już trochę wyświechtany, nadaje się doskonale na tytuł pierwszego wpisu. Tak, pierwszego. Choć podpięty do Internetu jestem już ładne kilka lat, to prócz paru okazyjnych tekstów na blogach &quot;po znajomości&quot; nie miałem okazji prowadzić dziennika na własne konto.


Dlaczego postanowiłem zacząć...
...przygodę z blogowaniem? Otóż, na to pytanie nie ma jednej, prostej odpowiedzi. Z ów zamiarem nosiłem się już kilka miesięcy, lecz każda próba kończyła się niedokończonym projektem CMS'u, kilkunastoma kreskami Designu czy też urwanym zdaniem pierwszego posta na blogspocie. Chociaż podejść było kilka, zawsze próbowałem stworzyć swoje własne miejsce w sieci. Gdzie mógłbym &quot;wylewać&quot; swoje własne przemyślenia czy pomysły. I tak dziś, bez większego planowania - które dla idei stworzenia bloga mogło by być zgubne, postanowiłem stworzyć konto na joggerze. Oraz przyłożyć się na tyle, aby pierwszy wpis w końcu ujrzał światło dzienne. Najgorzej jest zacząć - jak to zdarza się słyszeć.

Kim jestem?
Po powyższym akapicie już pewnie domyślasz się kim jestem. Trochę programistą - z wielkim, szybko uciekającym entuzjazmem, i trochę grafikiem - który nigdy nie kończy swoich prac. Programowaniem zajmuję się - jeżeli można tak to ująć, około pięć lat. Zacząłem klasycznie - od nauki układania tagów w HTML'u. Następnie przyszedł czas poznania arkuszy CSS oraz pierwsze kroki w programowaniu skryptowym - webowy JavaScript. W między czasie &quot;liznąłem&quot; podstawy C, oraz dobrałem się do serwerowego PHP. Na dzień dzisiejszy w największym stopniu programuje w C, chociaż czym będę zajmować się jutro - nie potrafię stwierdzić. Na temat &quot;mnie i grafiki&quot;, warto wspomnieć tylko jeden fakt. Od czasu gdy wpadł mi w ręce Corel Photo-Paint zajmuję się tylko jedną kategorią grafiki - web designem. Z jakim skutkiem? Ocena nie należy do mnie.

O czym mam zamiar pisać?
Oprócz programowania i grafiki, jestem wiecznym emigrantem przechodzącym na Linuksa. Tak, też z tematycznymi wpisami o komputerach - tj. o programowaniu czy grafice, postaram się pisać o moich wrażeniach, problemach czy własnych rozwiązaniach związanych z emigracją na Linuksa. A co poza komputerami? Znam tylko dwa &quot;pewniaki&quot; na to pytanie - atakująca zewsząd polityka, oraz co nieco o naukach ścisłych.
Kończąc swój pierwszy wpis, nie pozostaje mi nic innego jak przytoczyć fragment tytułu. A więc... hello world!
</description><pubDate>Sat, 17 Nov 2007 16:38:21 +0100</pubDate><guid>http://b.nano2.pl/2007/11/17/wszyscy-zaczynaja-od-hello-world/</guid><category>Blog</category></item></channel></rss>
