Draganov blog - AXXT

Ogorčen količinom loše dizajniranih sajtova koje u zadnje vreme viđam na zoni i DPT-u reših da makar malo pokušam da doprinesem edukaciji.

Danas ću pokušati da objasnim sta je to “Vertikalni ritam” (moj slobodni prevod)

sve to naravno ima objasnjeno na netu, posebno lepo na ovoj stranici a boga mi i ovde, ali sto bi to neko čitao, kad može lepo da zakači svoj sajt na forum i još da se ljuti kad mu neko kaže da to njegovo ne vaja i da nije u pravu.

elem, ovde sam stavio primer sa dobro i leše podešenim marginama, po meni razlika je više nego očigledna, evo i slike za one koji i dalje ne kapiraju u čemu je štos

Znači nije poenta da vertikalni razmak između svih elemenata bude isti ili potpuno odokativan (kao u lošem primeru), već treba za mernu jedinicu uzeti visinu jedne linije običnog teksta i onda srazmerno tome podesiti sve elemente na stranici.

naravno, može neko da izabere da koristi 4x i 3x ili 2x i 4x razmake, sve zavisi do stranice, nije ni svaka situacija ista, no važno je da postoji neka pravilnost i da se ne krši vertikalni ritam stranice.

• DEMO
• CSS Fajl

CSS Menu - mali, brz, lak za uptrebu, dobar za SEO

Ovo je moja omiljena tehnika pravljenja CSS menija. I principu to je kombinacija par CSS tehnika (image replacement, css list menus..).
Pokazalo se kao sasvim ok tehnika, apsolutno isto se prikazuje u FF, IE i Operi i ima sasvim normalan HTML ispod haube, tako da ce Google i ostali pretrazivaci sasvim korektno indeksirati vas sadrzaj - a to je valjda najvaznije.

Primer

Uputstvo za upotrebu

1) Napraviti pozadinsku sliku

Paznja ovo je jedna slika, a ne dve.
Ako je vas meni 400px sa 50px (kao u ovom primeru) pozadinska slika treba da bude 400px by 100px. Gornja polovina je za normalno stanje, a donja za rollover.

2) HTML kod

<div id=“main-nav”>
	<ul>
		<li><a href=“#” class=“home”><span>Home</span></a></li>
		<li><a href=“#” class=“about”><span>About us</span></a></li>
		<li><a href=“#” class=“faq”><span>F.A.Q.</span></a></li>
		<li><a href=“#” class=“contact”><span>Contact</span></a></li>
	</ul>
</div>

3) Ubaciti CSS

Sve sto ostaje je ubaciti ovaj CSS, i to je to - uzivajte u vasem CSS meniju.

MGraph - Ajax grafik, updateovan na v0.95

Posle par dana evo i update-a za MGraph.
Sada je izgleda malo sredjen a i dodao sam prostor gde korisnik moze da doda neki note (videti primer). Dobra stvar je sto se tako moze ubaciti i html, tako da se moze staviti neka mala slika, ili link.

Promene u ovoj verziji

• Dodavanje teksta i naslova teksta (note)
• Transparencije
• Izmenjen izgled

Dobio sam dosta pozitivnih reakcija putem mail-a. Trudicu se da nastavim da razvijam MGraph i ostale grafike, ocekujem nove verzije u toku narednih mesec - dva, u zavisnosti od mog slobodnog vremena.

• Demo
• Download (zip, 14KB)
• Stara verzija

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>