Kategorie: Wszystkie | medycyna | meteo | moje przemyślenia | muzyka | prawo | przyroda | sprzęt sportowy | technologie i programowanie
RSS

technologie i programowanie

wtorek, 26 lutego 2013

Wizualizacja danych to graficzny sposób prezentacji informacji. Jest szczególnie ważna, bo dane graficzne same w sobie mogą przekazać olbrzymią ilość informacji na raz. Wynika to ściśle z naszej ewolucji, wyjątkowo dobrze ewolucyjnie rozwinięte procesy spostrzegania kolorów, ruchu, wyprzedzają znacznie później rozwiniętą umiejętność czytania. Postrzeganie obejmuje cały obraz w jednym momencie, a do przeczytania tekstu potrzebne jest prześledzenie słowo po słowie i niemal litera po literze. Są dane abstrakcyjne, jak dane liczbowe, które zyskują wiele po przyporządkowaniu im kolorów, same w sobie prawie nie nadają się do interpretacji wzrokowej przez czytelnika. Czym wyższa liczba wymiarów, tym trudniejsza wizualizacja, a tekst już przy dwóch wymiarach przestaje być odpowiednim narzędziem przedstawienia danych i powinien być od razu odrzucony. 

ściągnij bibliotekę - kliknij tutaj prawym przyciskiem myszy i wybierz "zapisz jako".

Wizualizacja danych naukowych

Często w projektach naukowych używane są skomplikowane biblioteki służące wizualizacji danych, zasadniczym problemem związanym z tego typu oprogramowaniem jest niewielka przenośność. Pliki wykonywalne nie do końca sprawdzają się w prezentacji wyników swojej pracy szerokiemu gronu ludzi, ze względu na fragmentację oprogramowania i systemów operacyjnych stosowanych w skali globalnej. Pliki wykonywalne w dobie rozpowszechnienia złośliwego oprogramowania i walki o dane osobowe budzą niechęć wielu osób, a ich instalacja może być zarówno groźna jak i czasochłonna.

HTML5 - efektywny i przenośny.

Na szczęście pojawił się HTML5, który wraz z zaawansowanym i bardzo wydajnym javascript’em umożliwia tworzenie wizualizacji danych zbliżających się efektywnością i szybkością działania, do plików wykonywalnych. Wszystko to dzieje się w przeglądarce, która jest dostępna dla wielu systemów operacyjnych i działa bardzo szybko. Pewne elementy wyświetlania są wspomagane sprzętowo, tak jak to dzieje się w specjalizowanych bibliotekach do wizualizacji danych, a których użycie do tej pory wymagało kompilacji.

Obiekt Canvas pozwala na rysowanie w czasie rzeczywistym przy pomocy pewnych metod prymitywnych, a zarazem umożliwia tworzenie przy ich pomocy bardziej zaawansowanych funkcji. Podobnie, użycie tego elementu zezwala na dostęp do danych zawartych lokalnie w obrazie, a więc wiele algorytmów cyfrowego przetwarzania obrazów może działać w formie rozproszonej na komputerach użytkowników, a nie jak dotychczas, jedynie na serwerze.

Utrzymać uwagę na celu nadrzędnym.

Ideałem w przypadku wizualizacji danych dla celów webowych i naukowych, jest zastosowanie relatywnie łatwej w użyciu biblioteki, która ‘po prostu działa’, aby twórca nie musiał poświęcać długich godzin na choćby uruchomienie wyświetlania. Osoby, które na co dzień zajmują się obliczeniami naukowymi powinny móc użyć developerskiej wersji prostej biblioteki, która pozwoli na bieżąco sprawdzać prawidłowość działania algorytmów, a sama w sobie nie przyprawi o ból głowy w implementacji. W ostatecznej wersji można poświęcić dodatkowe godziny na opanowanie bardziej zaawansowanych sposobów wizualizacji danych, podczas pracy dąży się do jak najprostszego sposobu, aby móc zogniskować uwagę na celu nadrzędnym, a więc samych obliczeniach naukowych. W chwili obecnej łatwo znaleźć ogólne i zaawansowane kombajny graficzne, które nie spełniają założenia prostoty, których modyfikacja i dostosowanie do własnych potrzeb jest możliwa jedynie dla osób, które zajmują się ich wdrażaniem na co dzień. Osoba pracująca nad innym tematem, okazjonalnie używająca bibliotek wizualizacji może mieć z tym duże kłopoty.

To właśnie moja motywacja, podczas tworzenia biblioteki javascript do wyświetlania wykresów liniowych, a także obecnie prezentowanej biblioteki do wizualizacji danych z obliczeń naukowych. W tym przypadku wyświetlenie danych można uzyskać już po napisaniu kilku linijek tekstu w javascript. Wklejenie prostego kilkulinijkowego szablonu i zastąpienie przykładowych danych, własnymi, nie powinno zająć więcej jak minutę czasu. Biblioteka sama interpretuje dane liczbowe zawarte w tablicy dwuwymiarowej i dostosowuje do nich dynamiczne skale wyświetlania kolorów, danych liczbowych i wektorów.

Jak to działa?

Biblioteka ta umożliwia wyświetlenie dwuwymiarowej tablicy z danymi liczbowymi w formie graficznej mapy kolorów, wektorów i liczb. Każda z tych funkcjonalności jest dynamicznie skalowalna, a więc nie wymaga od użytkownika ustalania zakresów. Efektem tego rozwiązania jest prostota implementacji i brak wymagań co do dodatkowego kodu.Biblioteka do wizualizacji danych po prostu działa.

Po podpięciu do niej tablicy dwuwymiarowej, wartości są analizowane i biblioteka automatycznie dobiera skalę kolorystyczną, długości wektorów i zaokrąglanie wartości liczbowych tak, aby wszystko wyglądało i wyświetlało się bezbłędnie. Oprócz tego funkcje zwarte w niej są logicznie pogrupowane i mają informatywne nazwy, modyfikacje nie powinny stanowić dużego problemu, a wręcz, są wskazane. Każdy sposób wizualizacji danych powinien być dostosowany do indywidualnych potrzeb twórcy. Teraz, kiedy wszystkie kluczowe elementy są gotowe, pozostaje jedynie dostosowanie detali, a i bez tego dane prezentują się dobrze.

Wizualizacja danych javascript

Co należy zrobić, aby ją uruchomić? Należy ściągnąć ją stąd, następnie dołączyć w swoim pliku HTML. Podstawę stanowi utworzenie obiektu canvas, a następnie w javascript stworzenie nowego obiektu (nazwijmy go draw) klasy SciDraw, a więc naszego wykresu. Kolejnym krokiem jest wskazanie stworzonego wyżej obiektu canvas, jako powierzchni do rysowania - draw.canvas i w reszcie dołączenie naszej surowej tablicy dwuwymiarowej z danymi do obiektu draw.data. Teraz pozostaje jedynie odrysowanie danych na powierzchni canvas przy pomocy  draw.plot. Jeśli wszystko poszło dobrze, na płótnie(canvas) pojawią się kolory i sformatowane wartości.

Ściągnij i obejrzyj działający przykład (plik zip)

Zapraszam do testowania funkcjonalności biblioteki, wyrażam zgodę na jej dowolne modyfikowane i publikowanie na swoich stronach internetowych i w projektach naukowych. W najbliższej notce postaram się napisać więcej na temat dostosowania biblioteki do własnych potrzeb i pokazać działający przykład użycia. Więcej programowania na podstronie, możesz też skorzystać z poniższej wyszukiwarki.

poniedziałek, 03 września 2012

W ramach tej notki chciałbym nie tylko przedyskutować temat reklam Google AdSense na stronie, ale także zaproponować gotowy algorytm umieszczania i pozycjonowania reklamy w treści strony na blogu blox. Tematyka reklam ma stronie internetowej jest dość kontrowersyjna. Ściślej, chodzi tu o różnice pomiędzy spojrzeniem autora strony i Czytelników. Nikt poza właścicielem reklamy i autorem strony nie lubi reklam. Zajmują one miejsce na stronie, odwracając uwagę od właściwej treści, zarazem zmniejszając szybkość działania strony i zwiększając ilość danych potrzebną do wyświetlenia strony. Na szczęście reklamy kontekstowe Google AdSense nie mają tendencji do wskakiwania samoczynnie pod kursor użytkownika, nie zajmują całej przestrzeni na stronie, tym samym są przewidywalne. Niestety dla właściciela strony, znacznie mniej klikane.

Reklama w treści bloga

Ja jednak uważam, że reklamy powinny stanowić przedłużenie treści strony, a zarazem dawać Czytelnikowi możliwości kontynuowania internetowej podróży dzięki reklamowym odnośnikom. Po drugiej stronie reklamy może być bowiem równie ciekawa treść, godna lektury.

Możliwości na blogu blox.pl

Silnik blogowy blox nie daje możliwości umiejscowienia reklamy w dowolnym miejscu na stronie. W zasadzie pozostają dwie łatwo osiągalne lokalizacje. Jest to pasek boczny, widoczny w większości blogów po prawej stronie, oraz miejsce na dole strony. Ze względu na swoją specyfikę, oba te miejsca są skutecznie omijane przez Czytelników. Idealne ze względu na klikalność są reklamy w treści strony, o wyglądzie, jak najmniej odcinającym się od czytanego tekstu, jaki znajduje się dokoła jednostki reklamowej.

Nie zawsze tak łatwo.

Efekt ten można osiągnąć dwojako. Pierwszym sposobem jest wklejenie odpowiedniego kodu AdSense w momencie tworzenia notki, drugim natomiast napisanie stosownego skryptu. Pierwsze rozwiązanie oferuje kapitalną kontrolę nad umiejscowieniem jednostki reklamowej, wymagając od blogera perfekcjonizmu i samodyscypliny, a także elementarnej znajomości HTML. Dlaczego? Otóż okazuje się, że zewnętrzny skrypt, lub nierozumiany przez edytor kod, jak warstwa div, można dołączyć jedynie w trybie edycji surowego kodu HTML, wyświetlanego jako czysty tekst bez kolorowane składni. Przypadkowe późniejsze otwarcie wyedytowanego kodu przez edytor graficzny, wiąże się ze skasowaniem żmudnie wprowadzonej ręcznie części. Podobnie, późniejsza edycja opublikowanej notki, wiąże się z wymazaniem dodanego kodu. Edytor powinien ignorować nieznany kod, wyświetlając jedynie blackbox - obszar na stronie ze znakiem zapytania, nie niszcząc manualnych modyfikacji. Nie mam jednak pretensji do blox, zastosowali łatwy w obsłudze i przyjemny dla twórcy edytor, który poza tym w zasadzie nie ma wad.

A może by tak automatycznie?

W kwestii reklam, zostawia to jednak twórcy jedyną sensowną możliwość, wstawienia reklamy przez automatyczny skrypt. Możliwość to tak dobra, jak dobry jest autor strony, przynajmniej jeśli chodzi o znajomość HTML i JavaScript. Skrypt nie jest w tej chwili dostępny, przynajmniej o ile mi wiadomo. Trzeba więc napisać go samemu. Albo ewentualnie przeczytać ten tutorial akceptując niedoskonałości mojego kodu. Zacznijmy więc.

Do pracy...

Na początek należy zaplanować położenie jednostki reklamowej. Czy powinna być stałe? A może lepiej ustalić zakres położenia, w którym przy każdym załadowaniu, choćby i tej samej strony, położenie reklamy jest losowane? Obiektywnie, sprawia to, że użytkownika trudniej przyzwyczaić do omijania wzrokiem obszaru strony zajętego reklamą, co za tym idzie, pozwala zwiększyć klikalność. Reklama musi być gdzieś wklejona, przynajmniej na początek. W przypadku blogu na blox, będzie to boczna szpalta lub obszar pod notką, do których kodu mamy dostęp. Reklamę trzeba opakować w warstwę div o danym identyfikatorze. Na początku reklama będzie niewidoczna, załadowana do bocznej szpalty, do kontenera div. Nasz skrypt przemieści ją w określone miejsce na stronie i wtedy dopiero zsunie czapkę niewidkę. Odbędzie się to tuż po załadowaniu strony i będzie trwało jedno mrugnięcie okiem.

Zastosowanie na stronie

Tutaj znajdziesz link do skryptu

W bocznej szpalcie lub też w dodatkowym polu na kod html pod wpisem należy wkleić skrypt i jednostki reklamowe AdSense opakowane w kontenery div o identyfikatorach(id) mojaReklama0, mojaReklama1 oznaczonych kolejnymi liczbami 0,1,2,3,4... Styl kontenera div powinien zawierać atrybut display:none, nic nie stoi na przeszkodzie, aby styl warstwy div dostosować do swoich potrzeb dodając inne właściwości, których nie ma w przykładzie poniżej.

Reklamy w treści notki bloga

W tym momencie kod eksperymentalnie pracuje u mnie na stronie, dodając małą jednostkę reklamową w treści strony. W przypadku problemów i pytań, zapraszam do pisania komentarzy na blogu, a także mailowania do mnie.

czwartek, 26 lipca 2012

Pierwszą część artykułu, zakończyliśmy na napisaniu funkcji wyszukującej pojedyncze słowa w bazie danych i aktualizującej tablicę trafności wyszukiwania. Pozostaje teraz posortować wyniki wyszukiwania tak, aby na samej górze były te najtrafniejsze. 

Sortowanie wyników wyszukiwania

Własna wyszukiwarka w javascript

4. Funkcja sortująca wyniki używa algorytmu sortowania bąbelkowego. Wykorzystuje ona globalną tablicę 'phraseMatchArray' przechowującą liczbowo wyrażone sumy trafności porównań szukanych słów i wartości rekordów bazy danych. Indeksy tej tablicy są skorelowane z indeksami bazy danych, indeks ‘x’ tablicy odpowiada indeksowi ‘x’ bazy danych. Jednak ani tablica ani związane z nią rekordy bazy danych nie zostały jeszcze posortowane. Funkcja 'sortResults'  najpierw tworzy pary liczbowej trafności i indeksu odpowiedniego rekordu bazy w postaci obiektów, a następnie sortuje je bąbelkowo po liczbowej trafności ( do, while ) aż podczas kolejnej pętli ani jedna para nie zostanie zamieniona miejscami ('flipsNumber = 0'). Przeczytaj więcej o sortowaniu bąbelkowym. Jest to warunek zakończenia sortowania.

 Nie wszystkie jednak wyniki są sortowane. Są to jedynie te o najwyższej i o 1 niższej liczbie trafień. Załóżmy, że użytkownik wpisze 3 słowa w pole wyszukiwania. Wśród wyników znajdzie się prawdopodobnie grupa rekordów z dopasowanymi trzema, dwoma, i jednym wyrazem z tej frazy. Grupa z dopasowanym jednym  wyrazem będzie najliczniej reprezentowana, ale jest też najgorzej dopasowana. Można więc zrezygnować z jej wyświetlenia i pozostać jedynie z zaprezentowaniem użytkownikowi rekordów z trzema i dwoma trafieniami. Liczbę maksymalnych trafień określa funkcja 'matchedPhrasesMaximum'.  Można to zmienić, ale zbytnie rozszerzenie powoduje wyświetlenie zbyt dużej liczby wyników, wydłuża czas sortowania, a także wyświetlenia wyników.

///////////////////////////////////////////////////
function sortResults() {
var sortedArray = new Array();
    var count=0;
    for(var i=0,len=phraseMatchArray.length;i<len;i++) {
        if (phraseMatchArray[i]>matchedPhrasesMaximum()-1)
         {
        var sortedPair = {
        matchedPhraseDataBaseIndex:i, 
        sortedBy:phraseMatchArray[i] 
        };
        sortedArray[count] = sortedPair;
        count++;
        }
    }

    do {
    var flipsNumber=0;
        for(var i=1,len=sortedArray.length; i<len;i++) {
            if (sortedArray[i].sortedBy>sortedArray[i-1].sortedBy) 
            {
            var tmpVar = sortedArray[i];
            sortedArray[i] = sortedArray[i-1];
            sortedArray[i-1] = tmpVar;
            flipsNumber++;
            }
        }
    } while (flipsNumber>0);
    
    return sortedArray;
}
///////////////////////////////////////////////////

 

Wyświetlenie wyników wyszukiwania

 5. Wyświetlenie wyników wyszukiwania stanowi ostatni etap tworzenia wyszukiwarki. Wystarczy użyć tablicy par indeksów rekordów i trafień w posortowanej postaci i wypisać rekordy o wybranych indeksach w kolejności. W tym celu tworzymy warstwę 'div' o identyfikatorze 'id = outputArea' i używając funkcji 'innerHTML'  wypisujemy wszystkie rekordy umieszczone w tablicy 'sortedResults' wraz z liczbą porządkową.

///////////////////////////////////////////////////
function printResults(sortedResults) {
var outputArea = document.getElementById("outputArea");
outputArea.innerHTML="";

    for(var i=0;i<sortedResults.length;i++) {
     var record=produkty[sortedResults[i].matchedPhraseDataBaseIndex];
    outputArea.innerHTML = (i+1) + '. '  + record + '
'
; } } ///////////////////////////////////////////////////

Kod warstwy div, wyświetlającej wyniki może wyglądać w ten sposób :

<div id="outputArea" style=
"height:200px;overflow:auto;margin:10px"></div>

Wykrywanie zakończenia wpisywania danych przez użytkownika

6. Ustalmy, czy użytkownik zakończył już pisanie frazy w polu input, aby uruchomić silnik wyszukiwarki. Ważne jest, aby uruchomić go w odpowiednim czasie. Jeżeli wyszukiwarka włączy się w trakcie pisania, wypisanie wszystkich rezultatów, czyli funkcja innerHTML spowoduje chwilowe zamrożenie ekranu, w tym także pola z wprowadzanymi przez użytkownika danymi.

<input type="text" id="searchedPhrase" style="
width:350px; margin:10px" onkeydown="setInterv()">

Idea, którą zdecydowałem się zastosować jest następująca. Wciśnięcie dowolnego przycisku w polu tekstowym, w tym napisanie tekstu, jaki użytkownik zamierza wyszukać, powoduje wywołanie funkcji ‘setInterv’, sprawdzającej czy interwał został już ustawiony (setInterval). Jeżeli nie, interwał zostaje ustawiony, jeśli tak, zostaje wyczyszczony i ustawiony ponownie na zadaną wartość. W odpowiednim odstępie czasowym zostaje wywołana funkcja ‘checkSearch’. Jej zadaniem jest sprawdzenie, czy od ostatniego wywołania zawartość pola tekstowego zmieniła się. Wyszukiwanie rozpoczyna się, jeżeli zawartość nie została zmieniona przez okres zdefiniowany w interwale. Jest to rozumiane jako zakończenie wprowadzania tekstu przez użytkownika.

function checkSearch() {
 var searchedPhrase = document.getElementById("searchedPhrase");
    if (lastSearchedValue!=searchedPhrase.value) {
    lastSearchedValue = searchedPhrase.value;
    } else {
     clearInterval(refreshInterval);
     refreshInterval = 0;
     initEngine();
    }
}
////////////////////////////////////////////////////
function setInterv() {
    if (refreshInterval != 0) {
    clearInterval(refreshInterval);
    refreshInterval = setInterval("checkSearch()",300);
    } else {
    refreshInterval = setInterval("checkSearch()",300);
    }
}

Funkcja inicjalizująca wyszukiwanie (initEngine()) pobiera wyszukiwaną frazę z pola tekstowego, następnie ustawia tablicę globalną trafień i inicjalizuje ją z zerowymi wartościami indeksów, aby umożliwić zwiększanie wartości przez funkcje ustalania trafień w rekordy z bazy danych.

////////////////////////////////////////////////////
function initMatchedPhrasesArray() {
    for(var i=0;i<produkty.length;i++) {
    phraseMatchArray[i]=0;
    }
}
////////////////////////////////////////////////////
function initEngine() {
 var searchedPhrase = document.getElementById("searchedPhrase");
 phraseMatchArray = new Array();
 initMatchedPhrasesArray();
 performSearch(searchedPhrase.value);
}
////////////////////////////////////////////////////

To wszystko, co jest potrzebne do zbudowania prostej wyszukiwarki w javascript. Kod ten można dowolnie modyfikować, komplikować nieco mechanizmy wyszukiwania, celem wyświetlania bardziej trafnych wyników wyszukiwania. Zapraszam też do komentowania kodu i jego zastosowań w komentarzach na blogu.

 Działający przykład wyszukiwarki na stronę w javascript. 

Zobacz też :

  1. Część pierwsza tutorialu o tworzeniu własnej wyszukiwarki www na stronę internetową w javascript
  2. Podstrona bloga o programowaniu

Budowa silnika wyszukiwarki.

Własna wyszukiwarka w javascript na stronę internetową www                Postarajmy się napisać prostą wyszukiwarkę w javascript. Silnik wyszukiwarki ma za zadane włączyć się automatycznie w momencie w którym użytkownik skończy pisać albo też zrobi przerwę. Wpisana przez użytkownika fraza nie musi idealnie pasować do zapisanego w bazie danych rekordu, powinna być raczej podzielona na słowa, a wysokość w wynikach wyszukiwania powinna zależeć od ilości dopasowanych słów. Dyskusyjne jest stosowanie wyszukiwania całych słów, zamiast jedynie pasującego podciągu. W pierwszym przypadku, wpisanie przykładowego słowa 'zup' wiedzie do wyszukania 'zup', 'zupa', 'zupka', 'szczupak', 'zupełny' itp. Wyniki wyszukiwania są więc szersze. W drugim przypadku wyszukany zostanie tylko rekord zawierający szukany ciąg. Wybór sposobu wyszukiwania pozostawiam czytelnikom. Nic nie stoi na przeszkodzie, aby promować znalezienie dokładnej szukanej frazy poprzez umieszczenie jej na szczycie wyników wyszukiwania.

 

Dlaczego własna wyszukiwarka javascript jest warta napisania ?

 Jeżeli Czytelnik jest właścicielem niewielkiej strony internetowej, nie musi inwestować serwer z php i mysql do stworzenia własnej wyszukiwarki. Dodawanie nowych treści i słów kluczowych do bazy w pliku javascript jest bardzo łatwe. Dodatkowo wyszukiwarka działa dość szybko na komputerze użytkownika.

Jeśli natomiast Czytelnik ma duży serwis, zapewne wie, że z racji dużej mocy obliczeniowej komputerów końcowych, część zadań, które normalnie spoczywałyby na serwerze, przenosi się na komputery użytkowników, dzięki JavaScript. W tym czasie moc obliczeniowa serwera może być wykorzystana na obliczenia, które nie są możliwe na komputerze użytkownika. Sama baza danych js może i powinna być tworzona przez skrypt php po stronie serwera, a także serwer może zająć się dodawaniem do niej nowych rekordów.

 

Zaprojektujmy własną wyszukiwarkę.

1. Baza danych to podstawa. W niej umieszczone są rekordy przeszukiwane przez silnik wyszukiwarki. W przypadku prostej wyszukiwarki jest to tablica jednowymiarowa, zawierająca ciągi (string) rozumiane jako pojedyncze rekordy. Nic nie stoi na przeszkodzie, aby tablica była dwuwymiarowa albo też zawierała obiekty. W tych przypadkach kosztem dłuższego o kilka linijek kodu można zyskać przejrzystość i szybkość wyszukiwania. Druga cecha jest szczególnie istotna przy bazach zawierających po kilka tysięcy rekordów albo też długie rekordy, które można zastąpić słowami kluczowymi, żeby nie przeszukiwać długiego tekstu.

var rekordy = new Array("rekord 1","rekord 2", ... , "rekord n");

 Rekordy mogą zawierać wiele informacji oddzieloneza pomocą przecinków, po znalezieniu frazy można je podzielić na elementy składowe i każdy z nich odpowiednio wykorzystać.

var rekordy = new Array("nazwa, treść, http://jakiś-adres.pl
","nazwa 2, treść 2, http://jakiś-adres-2.pl");

2. Funkcja 'performSearch' stanowi najważniejszy element składowy naszej wyszukiwarki.   dzieli ona frazę 'totalExpression' wpisaną przez użytkownika na pojedyncze wyrazy(elementy) i wyszukuje ich wystąpień w rekordach bazy danych przy użyciu funkcji 'searchQueryElement' . Jak widać znak podziału to spacja. Funkcja split dzieli łańcuch i zwraca tablicę łańcuchów. Jeśli brak znaku podziału w przeszukiwanym łańcuchu, cały bazowy łańcuch będzie w indeksie '0'.  Na uwagę zasługują dwie zmienne phraseMinimumLength i wordMinimumLength. Ustalają one jakiej minimalnej długości słowa mają być wyszukiwane, a także jakiej długości może być minimalnie wyszukiwana fraza. U siebie obie te zmienne  zainicjowałem z wartością 2. Następnie wyniki są sortowane funkcją 'sortResults', zwracającą je pod postacią tablicy 'sortedArray'i wyświetlane przez 'printResults'.

////////////////////////////////////////////////////
function performSearch(totalExperssion) {
 var cursorPosition=0;
 var resultsArray=totalExperssion.split(" ");
 if (totalExperssion.length>phraseMinimumLength) {
    do {
        if (resultsArray[cursorPosition].length>wordMinimumLength) {
        searchQueryElement(resultsArray[cursorPosition]);
        }
    cursorPosition++;
    } while (resultsArray.length>=(cursorPosition+1));
    
    
    var sortedArray = sortResults();
    printResults(sortedArray);
 }
}
////////////////////////////////////////////////////

  

3. Funkcja 'searchQueryElement' wyszukuje pojedynczego słowa w bazie danych i jeśli znajdzie (wynik szukania różny od-1),  zwiększa wartość globalnej tablicy 'searchQueryElement' o indeksie i, odpowiadającym przeszukanemu rekordowi o 1. Tu jest miejsce w którym można sprawdzić, czy fraza stanowi całe słowo, czy jedynie podciąg ciągu i promować dokładne wyszukania dodając do odpowiedniego indeksu tablicy 'searchQueryElement', premiowaną wartość. Tablica ta będzie podstawą następującego później sortowania wyników.

/////////////////////////////////////////////////// 
function searchQueryElement(phrase) {
    for(var i=0, len=produkty.length;i<len;i++) {
    var result = produkty[i].search(phrase);
        if(result!=-1) {
        phraseMatchArray[i]++;
        }
    }
}
///////////////////////////////////////////////////

 W kolejnej części przeanalizujemy algorytm sortowania bąbelkowego, funkcję wypisującą wyniki wyszukiwania na ekran i dynamiczne wyzwalanie wyszukiwania, kiedy użytkownik zakończy wprowadzanie frazy. 

 Działający przykład wyszukiwarki na stronę w javascript. 

Zobacz też :

  1. Część druga tutorialu o tworzeniu własnej wyszukiwarki www na stronę internetową w javascript
  2. Podstrona bloga o programowaniu.
czwartek, 19 lipca 2012

trajka firmy trikkeTrajki, czyli trójkołowce, popularna forma użytkowa, mowa tu jednak o rowerze elektrycznym, przynajmniej według litery prawa. Rowerze niezwykłym, bo nie posiadającym klasycznego układu napędowego i dużych kół. Mowa o trajce z małymi kółkami 10cali przednie i 8.5 cala tylne, na planie litery „V”, gdzie nogi spoczywają na obu jej ramionach. Czy jest to godna alternatywa klasycznego roweru elektrycznego ? Pomyślmy.

Trajka ma małe kółka, jest więc bardzo wrażliwa na nierówności naszych polskich dróg, jeśli wpadnie się kołem w dziurę o odpowiedniej głębokości, można nie wyjechać, a przynajmniej nie wyjechać w pozycji stojącej. Przednie koło w dziurze powinno spowodować, że razem z trajką upadniemy do przodu. To jest spowodowane zarówno małym promieniem koła jak i pionową postawą z wysoko położonym środkiem ciężkości. Na klasycznym rowerze, o taki wypadek zdecydowanie trudniej. Ze względu na klasyczny układ jednośladu, dziurę z reguły łatwiej ominąć. Szerokość trajki sprawia, że bezpieczniej również może się czuć użytkownik jednośladu, pozostawia kierowcom samochodów na ulicy znacznie więcej miejsca przy wymijaniu.

Kolejnym minusem jest, według testującego rower reportera gazeta.pl, konieczność stania na notorycznie ugiętych nogach, co po jakimś czasie męczy. Sprawia, że nogi zaczynają boleć, a pozycja przypomina w dużej mierze tą znaną z narciarstwa.

rower elektryczny

Argumenty importera sprzętu z USA :

  • „Tani w eksploatacji, za 1km jazdy samochodem w mieście zapłacimy 1zł, a Trajką 1 grosz.”
  • „Można nim dojeżdżać do pracy i na zakupy.” Rzeczywiście rowerek można złożyć, jednak masa wynosi od 15 do 25kg, co proces wnoszenia czyni dla pewnej grupy osób trudnym, zostawiając na zewnątrz można pożegnać się z częścią elektroniki albo całym rowerkiem, pokonanie wystawionej na widok publiczny stacyjki nie jest niestety dla wielu osób problemem.

A teraz kilka rozbieżności pomiędzy wywiadem i stroną internetową :

  • „moc jest rzędu 350W" – na stronie w opisie danych technicznych 250W.
  • „3x 12V-9Ah żelowe akumulatory”, według opisu na stronie importera, w materiale filmowym gazeta.pl  litowo-jonowy. Jakimś rozwiązaniem tego niedopowiedzenia, zawartego na stronie importera, jest zauważenie, że jak widać są dostępne dwa modele. Jeden o większym zasięgu i mniejszej masie – jak mniemam z akumulatorem litowo-jonowym, drugi natomiast prawdopodobnie z żelowymi, 10 kg cięższy i z mniejszym zasięgiem maksymalnym. W zauważonej przeze mnie naklejce na akumulatorze widnieje napis 9000mAh, 36V (324Wh) i napis „use specified charger only”.
  • Z czego wynika cena – „technologia kosmiczna akumulatorów, za którą trzeba płacić” Czy na pewno ? Akumulatory litowo-jonowe nie stanowią nowości, jednak rzeczywiście są dość drogie. Zestawy o podobnym zastosowaniu kosztują nieco poniżej 2000 złotych, co czyni je prawdopodobnie najdroższym elementem trajki. Niestety złożone są one z pojedynczych ogniw, po jakimś czasie każde z ogniw traci swoje właściwości, a elektronika zarządzająca akumulatorem nie zawsze umie sobie z tym poradzić. W związku z tym awaryjność pojedynczych ogniw znanych z telefonów komórkowych jest niewielka, ale już baterii laptopów znacznie większa. Wydaje się, że ze względu na specyfikę, jeszcze gorzej będzie z zasilaniem trajki.

                 Cena w USA wynosi około $1800, w PL, z importu to 6500zł, jest więc bardzo wysoka, zwłaszcza, jeśli porównać ją do średniej płacy. Jej odpowiednik w USA wygląda znacznie korzystniej. Dla osób, mających problemy z poruszaniem się na zwykłym rowerze, kłopotliwe będzie składanie i przenoszenie (15 lub 25kg), a zostawianie na zewnątrz nie przystaje do polskich warunków. Podobnie jak użytkowanie na większości miejskich dróg, ze względu na podatność na przewracanie się przy napotkaniu dziury. Z tego co wiem, trwałość baterii akumulatorów litowo-jonowych, jest dość niska, zwłaszcza mając w pamięci oscylującą około 2000zł cenę. Wymiana może okazać się nieopłacalna. Oczywiście wspaniałe jest korzystanie z ekologicznego i cichego napędu elektrycznego, ładowanie rowerka w 5 godzin i podróżowanie w ten sposób do pracy. Realia dnia codziennego sprowadzają się jednak do czegoś innego, czyniąc z tego pomysłu fanaberię, a nie realną alternatywę transportu publicznego. Jeżeli jednak ktoś miał szanse korzystać z tego typu roweru, a nie zgadza się z moimi spostrzeżeniami lub chciałby coś dodać, z całego serca zapraszam do dyskusji w komentarzach.

piątek, 08 czerwca 2012

            Dojrzały ? Tak! Dojrzały, bo można już tworzyć aplikacje na Android pod Androidem. Jakkolwiek na smartfonach jest to może tylko dodatek, mało komu potrzebny, z powodu mimo wszystko małej pojemności baterii i krótkiego czasu działania na niej. Natomiast na tabletach to jest to. Można bardzo wygodnie tworzyć aplikacje i uczyć się programowania. AIDE działa bardzo płynie, nawet przy mocno underclockowanym procesorze, zapewniając długie godziny zabawy. Dodatkowo proces kompilacji i testowania nie wymaga już odpalenia pod PC mimo wszystko bardzo wolno działającego emulatora urządzenia.

AIDE zintegrowane środowisko programistyczne Android

            Tworzenie aplikacji używających peryferiów sprzętowych jest też o wiele sympatyczniejsze na realnym urządzeniu, niż na symulatorze. Używanie tabletu nie wymaga też od programisty utrzymywania wymuszonej pozycji przed ekranem monitora, a więc gdziekolwiek się jest, mając trochę czasu można dla swojej własnej satysfakcji – pisać.

            Próżno oczekiwać pojawienia się środowiska programistycznego tego typu na inne platformy, jak iOS Apple albo Windows Phone Microsoftu. Oznacza to, że póki co urządzenie mobilne, bez PC, nie ma szans rozwoju. Z całą pewnością tabletowa edycja Windows 8 będzie jednak dawać podobne możliwości programowania pod nią i zarazem dla niej.

            Przy okazji warto wspomnieć, że Android jako jedyny popularny mobilny system operacyjny zapewnia pełny system plików, czyli jest, jak nasz PC, w przeciwieństwie do sprzętu konkurencji, który przypomina jeszcze zamknięte urządzenia sprzed ery ‘smart’, jak odtwarzacze mp4, które, niby mają już kolorowy wyświetlacz, obsługę wielu formatów, ale jednak nie zapewniają możliwości pctowej interakcji ze światem sieci.

            Podobnie w przypadku sprzętu Apple i Microsoft, nie ma możliwości ściągnięcia dowolnego pliku z sieci, pobrania załącznika e-maila do pamięci urządzenia, potraktowania urządzenia jako pamięci masowej, na które możemy łatwo zrzucać dowolne pliki, w tym pliki nie otwierane aktualnie przez żadną z aplikacji zainstalowanych na urządzeniu. To jest ponownie, cecha bardzo istotna, bo prawdziwie mobilne urządzenie powinno pozwolić na dowolną interakcję ze światem zewnętrznym.

            Nic to dziwnego, bo pod maską nakładek graficznych i wirtualnej maszyny Dalvik, za pomocą której uruchamia się wszystkie znane z Android marketu (sklep Play) programy, pracuje trochę okrojony Linux. System ten świetnie zarządza zasobami, optymalizuje zużycie energii urządzenia, zapewniając przy tym  otwartość i kompatybilność.

            Wirtualna maszyna pod urządzeniem o niewielkiej mocy obliczeniowej ? Wbrew pozorom to nie jest zły pomysł. Zapewniania jest w ten sposób wirtualna warstwa, uniezależniająca programistę od rodzaju urządzenia, a programy, powinny, niezależnie od wersji sprzętu, po prostu działać. Poza tym programy nie mogą ingerować w sam system operacyjny, a dostęp do zasobów sprzętowych i danych, kontroluje system pozwoleń, które muszą być zaakceptowane przez użytkownika. Negatywnym elementem jest utrata pewnego odsetka mocy obliczeniowej, jaką zapewniałoby odpalanie oprogramowania natywnego dla Linuxa, z pominięciem wirtualnej maszyny Dalvika.

            Nawet bez praw super-użytkownika, pod Androidem można mieć kontrolę nad wieloma rzeczami, konfigurować system i dostosowywać go do własnych potrzeb. Instalować programy i widżety, jakie spełniają nasze oczekiwania, a przy tym używać sieci jak na zwykłym PC. Można cieszyć się instalowaniem aplikacji spoza Marketu (sklepu Play), a nawet tworzyć je samemu, nie musząc przy tym włączać PCta. To się nazywa prawdziwie mobilna, otwarta platforma. Zupełnie inna, ale przy tym tak podobna do znanych z PC systemów operacyjnych. Polecam wszystkim, którzy chcą używać swojego mobilnego urządzenia trochę szerzej, niż jako telefonu i odtwarzacza mp4 sprzed ery smart.

AIDE w sklepie Play

niedziela, 29 kwietnia 2012

                Urządzenia mobilne stają się coraz popularniejsze. W dobie otwartego Androida i możliwości zmieszczenia całości funkcjonalnej urządzenia w jednej strukturze krzemowej w cenie  często niższej od $10 (popularny Allwinner A10 – $7), powszechność tabletów zacznie dorównywać PC. Jeśli chodzi o tempo obrotu urządzeniami na rynku i szybkość pojawiania się nowinek technicznych w tym segmencie, znacznie przekroczona została dynamika znana ze sprzedaży komputerów stacjonarnych. Za tym idzie także i rynek usług, w tym zintegrowanych z systemem operacyjnym, jak i niezależnych, jak serwisy internetowe w wersjach na urządzenia przenośne. Blox zdecydował się stworzyć silnik, budujący lekką strukturę strony, idealną ze względu na mniejszą moc obliczeniową, pomagający zaoszczędzić cenną energię akumulatora podczas składania jej w przeglądarce. Warto więc zerknąć na charakterystykę statystyk odwiedzin bloga z urządzeń mobilnych. Dostęp do statystyk zapewnia Google Analytics, którego głównym zadaniem jest obserwacja poczynań użytkowników na stronie, pomagając dostosować się do ich oczekiwań dotyczących treści, a więc sprawić, aby blog bardziej się podobał i był chętniej czytany.

                Ciekawe jest, że pomimo obecności wersji mobilnej bloga, z urządzeń przenośnych korzysta jedynie 2,7% wszystkich odwiedzających mnie. Jeśli zakres styczeń – kwiecień 2012 poszatkować i popatrzeć jak liczba ta wygląda w ostatnim miesiącu (kwiecień),  zobaczymy już 3,7%. Jest to znaczny wzrost.

                Android przoduje jako system operacyjny, mając 60% całkowitych odwiedzin. iOS zgarnia przy tym niewiele ponad 30% zawierając jedynie 3 urządzenia – iPAD 19.5% i iPhone 12,3%, iPod 1,4%. Pozostałe systemy : Symbian – 4,6% , BlackBerry 0,7%. Co ciekawe , wielka nowość z hucznym wejściem na rynek, Windows Phone ma jedyne 0,5% odwiedzin.

wersje mobilnych systemów operacyjnych 2012

                Zobaczmy strukturę wersji Androida, które generowały odwiedziny w okresie 01.01 do 27.04.2012. Większość stanowią urządzenia mające na pokładzie wersje 2.3.x i stanowią one około 45% odwiedzin, dalej plasują się niezdefiniowane (not set) z 25%, 13% dla Androida w wersji 2.2.x i w reszcie 2.1 z 7% udziałów. Wersje tabletowe 3.x to jedynie około 4%, podobnie jak 4.0.x z 3%.

Fragmentacja systemu Android 2012

                Oznacza to dużą fragmentację Androida, związaną prawdopodobnie z wielością urządzeń z tą platformą, customowymi wersjami systemu i producentami, którzy nie zawsze są gotowi wspierać swoje starsze produkty. Tym samym świadczy to o szybkości rozwoju rynku urządzeń mobilnych i samego Androida, który jako system Google ulega stałym modyfikacjom. Programiści tej dużej korporacji cały czas pracują nad ulepszaniem i wydawaniem nowych wersji, szkoda tylko, że producenci sprzętu nie są w stanie stanąć na wysokości zadania i zmodyfikować systemu dla celów wypuszczonych przez siebie produktów. Z drugiej jednak strony warto się zastanowić, czy jest to ewidentny problem dla użytkowników. Ja sam jestem właścicielem urządzeń z Androidem w wersji 2.3.3 i 4.0.3. Za to w mojej rodzinie już dwie osoby mają tablet z systemem skądinąd na telefon 2.3.4 i 2.2.2 i bardzo sobie chwalą funkcjonalność i prostotę użytkowania dla celów typowo konsumpcyjnych ( przeglądanie Internetu, mailowanie, rozmowy tekstowe i głosowe, baza zdjęć, proste gry ). Nie wyobrażam sobie, żeby starsze osoby miały od nowa nauczyć się używania Androida w nowszych wersjach, ponieważ wiąże się to z przeskokiem jeśli chodzi o interfejs Launchera i sposób wykorzystania urządzenia. Te dodatkowe problemy mogłyby zniechęcić, zwłaszcza, jeśli usługi Google nie wspierałyby starszych wersji, co byłoby prawdopodobne przy „wymuszaniu” aktualizacji. Jeżeli występuje tak duża fragmentacja, jest to cecha warunkująca kompatybilność UI aplikacji i sposobu działania usług w tle, która nie protestuje we współpracy ze starszym sprzętem.

                Przyjrzyjmy się wersjom przeglądarek stosowanych przez użytkowników w tym okresie. Androidowcy używali stockowej przeglądarki w w 64% przypadków, podczas, gdy kolejne popularne były Opera Mini z 25% i Opera z 12%. Przeglądarka z Ognistym Lisem uzyskała poniżej 1% częstości odwiedzin.

przeglądarki mobilne 2012

                W przypadku sprzętu firmy Apple, użytkownicy w zdecydowanej większości (95%) używali Safari, natomiast przeglądarka oznaczona jako „Mozilla Compatible Agent” miała niecałe 5%.

przeglądarki apple 2012

            Dla porównania za kilka miesięcy postaram się dodać nową statystykę i omówić ją krótko, żeby przybliżyć moim Czytelnikom informacje o strukturze odwiedzin bloga z urządzeń mobilnych.

 
1 , 2 , 3 , 4 , 5 ... 6
| < Sierpień 2017 > |
Pn Wt Śr Cz Pt So N
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Tagi
Jestem członkiem agregatora naukowego researchblogging.org