Draganov blog - AXXT

Evo par prvoaprilskih shala na web-u:

1) new sexy phone from Motorola

2) Google paper

3) Google TiSP

4) 8-bit Tie

4) thegeekhouse (neobicni 404 error )

5) Technorati logo

6) BBC

Mortorola je totalni favorit!. Ocu i ja osmobitnu kravatu

Pre par meseci (skoro godinu dana kad bolje razmislim) prvu put sam čuo za Aptanu.
U pitanju je kako ga autori nazivaju “The Web IDE”, ili ti u prevodu najbolje razvojno okruženje za web aplikacije.
Tada kada sam pogledao, to i nije bio neki prizor, malo unapređeniji editor sa ponekom lepom opcijom. Tada sam mnogo više vremena provodio radeći PHP, tako da mi je ZDE bio editor za sve (PHP,CSS,XHTML,SQL,JS….).

Medjutim kako sve više vremena provodim u raznim JS-Ajax projektima počeo sam da uvidjam da Zend ipak nije prava stvar, za pocetak sto se tiče Javascripta on jednostavno boji sintaksu, i to je to…
Počeo sam da tražim nešto što je u principu zend za Javascript…

Posle par dana opet sam nabasao na Aptanu, skinem instaliram… i odmah se osetim ko kod kuće.
Šta je to što mi se svidelo:
- dobar i brz code proposal.
- dobar i brz word competition.
- autocomplete.
- odlicno dokumentovan CSS (sa sve podrskom za browsere)

- JS debbuger + FF extenzija (sa ovim tek trebam da se poigram)
- pametan scope resolution kod code proposal za javascript.
- bojenje sintakse za PHP (za Ajax stvarčice više nije ni potrebno, za komplikovanije stvari zend je i dalje ne zamenljiv).

Ako niste u skorije vreme/nikad probali Aptanu, možda bi ste mogli da joj date drugu šansu.

Trebao mi je neki jednostavan, a opet interaktivan grafik za neke podatke na poslu. Ispostavilo se da je malo teze naci nesto sto je meni u tom trenutku trebalo a da je:
1. Koliko toliko lepo
2. Lako za prilagoditi

Ispostavilo se da nema kuhinje bez domace kuhinje i tako je nastalo ovo.

(da bilo mi je dosadno :] )

Pred vama je verzija za javnost, naravno FREE.

Trenutni sitniji problemi
- mogu se prikazati samo pozitivni brojevi.
- ne znam da li da napravim da na mouseover reaguje polje sa imenom meseca ???

• Demo
• Download (zip, 12KB)

Evo nečeg novog od mene. U pitanju je MyTabz , Mali plugin za Prototype javascript biblioteku.
Glavna svrha ovog plugina je da preformatira vaš dugačak i ne pregledan text u mali box sa tabovima,

Možete pogledati demo ovde.

Mala škola AJAX-a

Zamislio sam ovo kao seriju od 5-10 postova u kojima ću probati da napišem par stvari o AJAX tehnologiji, i to kroz par relativno jednostavnih primera, jer sam ubeđen da je tako najlakše nešto naučiti.

Šta bi trebali da znate, pre nego sto počnemo?

-Osnovno poznavanje HTML-a i CSS-a
-Osnovno poznavanje Javaskripta

Biće tu i malo PHP-a a kasnije i XML-a, ali je sve na početničkom nivou tako da svako ko je imalo upoznat sa ovim tehnologijama ne bi trebalo da ima problema da prati i razume ove tekstove.

Neko će reći, čekaj a AJAX? Tu je glavna poenta, AJAX nije programski jezik, AJAX je platforma, kombinacija više tehnika kojom postižemo da korisnik ne bude ograničen na klasičan sadržaj koji mu pružaju standardni HTML sajtovi. U našem prvom primeru nema potrebe da se ponovo učitava cela stranica da bi korisnik mogao da očita vreme sa servera. Dovoljan je jedan klik mišem.

Počećemo sa krajnje jednostavnom postavkom.

Scenario:

Imamo jednu stranicu sa jednim poljem i jednim dugmentom, ideja je da se na pritisak dugmeta pozove php skripta koja vraća vreme koje je pokupila na serveru.
(ovde možete videti demo )

Imamo 3 fajla:

• index.html - Glavni fajl
• updater.php - Jednostavna PHP skripta koja vraća trenutni datum i vreme
• prototype.js - prototype javascript biblioteka

Zašto baš prototype, a ne xxxx (neki drugi JS framework)??? Pa odgovor je kranje jednostavan: Dobar je kao i većina + ja ga koristim i sviđa mi se

Ako planiarte da pokrenete ove primere kod negde kod vas, ili da koristite prototype za neki projekat pogledajte OVDE To je oficijelni sajt gde možete skinuti najnoviju verziju, takodje prototype poseduje odličnu dokumentaciju koju možete citati online, ili skinuti u PDF formatu.
Prvo počinjemo sa index.html fajlom.
index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
        <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ />
        <script type=‘text/javascript‘ src=‘prototype.js‘></script>
        <style type=“text/css“>
            body{margin:0px;padding:0px;background:#565656;text-align:center;color:#414141;font:normal 14px “Trebuchet MS“;}
            #container{margin:50px auto;border:solid 4px #561112;padding:10px;width:400px;background:#e1e1e1;}
            #time_div{border:solid 1px #cacaca;margin:10px;background:#ffffff;}

        </style>
        <title>Untitled Document</title>
    </head>
    <body>
        <div id=“container“>
            <h1>Ajax 001 example</h1>
            <div id=“time_div“>not loaded yet</div>
            <input type=“button“ onclick=“updateTime(‘time_div’);“ value=“update“ /> 

        </div>

    </body>
</html>

Sada dodajemo glavni deo, tj sam javaskript koji “radi glavnu stvar”, tj poziva PHP skriptu, očita rezultat, i na kraju sve to upise u za to namenjen div.
(ovaj deo mora da ide negde između <head> i </head> tagova):

<script type=“text/javascript“>
updateTime = function(elm){
    //myElement postaje pokazivač na time_div 
    var myElement=$(elm);
    // Promenićemo sadržaj, i stil (boje) elementa, sve na jednoj liniji!
    myElement.update(‘Loading…’).setStyle({background: ‘#ffd1d1′,color:‘#a1a1a1′});
    // napravimo AJAX upit ka updater.php skripti
    new Ajax.Request(‘updater.php’, {
        // ako dobijemo odgovor:
        onSuccess: function(transport) { //
                // upisujemo odgovor, i vraćamo boje u normalu
                myElement.update(‘Server time: ‘ +transport.responseText).setStyle({ background: ‘#ffffff’,color:‘#000000′ });
      }
    });

}
</script>

Now you can see true power of prototype, instead of writing:

type=“text/javascript“>
var myElement=document.getElementById(elm);
myElement.innerHTML=‘Loading…’;
myElement.style.background= ‘#ffd1d1′;
myElement.style.color=‘#a1a1a1′;

as we would in standard javascript, we end up with this:

var myElement=$(elm);
myElement.update(‘Loading…’).setStyle({background: ‘#ffd1d1′,color:‘#a1a1a1′});

That may not look like big thing, we saved just a few lines, but we included 74kB Javascript library!?! Actually this is not as bad as it seams:
-Prototype is very well written, and well documented library.
-You may strip down all unused functions, and reduce size of prototype.js
-By using prototype (or some other javascipt framework), you can reduce your development time.

Next we write simple PHP file that prints current date and time. IF you wonder what does sleep(1) means, answer is really simple: it just pauses script execution for one second, so you can actually see “Loading… ” text and background color change

updater.php

<?php
    sleep(2);
    echo date(“D M Y H:i:s”);
?>

whole script:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
        <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ />
        <script type=‘text/javascript‘ src=‘prototype.js‘></script>
        <script type=“text/javascript“>
        updateTime = function(elm){
            // assign time_div object to myElement 
            var myElement=$(elm);
            // change innerHTML, and CSS style of time_div ona a single line
            myElement.update(‘Loading…’).setStyle({background: ‘#ffd1d1′,color:‘#a1a1a1′});
            // make AJAX request to updater.php script
            new Ajax.Request(‘updater.php’, {
              // if we get any response:
                onSuccess: function(transport) { //
                  // change innerHTML of time_div (print response from PHP), and change colors to normal 
                        myElement.update(‘Server time: ‘ +transport.responseText).setStyle({ background: ‘#ffffff’,color:‘#000000′ });
              }
            });

        }
        </script>
        <style type=“text/css“>
            body{margin:0px;padding:0px;background:#565656;text-align:center;color:#414141;font:normal 14px “Trebuchet MS“;}
            #container{margin:50px auto;border:solid 4px #561112;padding:10px;width:400px;background:#e1e1e1;}
            #time_div{border:solid 1px #cacaca;margin:10px;background:#ffffff;}
            </style>
        <title>Untitled Document</title>
    </head>
    <body>
        <div id=“container“>
            <h1>Ajax 001 example</h1>
            <div id=“time_div“>not loaded yet</div>
            <input type=“button“ onclick=“updateTime(‘time_div’);“ value=“update“ />
        </div>
    </body>
</html>

Napustio sam stari blog, od sada cu sva svoja pisanija drzati ovde. Uskoro krece nova serija postova tutorijala i jos ko zna cega…