WTFramework - What The Framework?

On sul tekkinud mõne põneva ja liikuva saidi puhul küsimus millist javascripti/ajaxi raamistiku antud leht kasutab? Üks võimalus küsimusele vastuse leidmiseks on lihtsalt vaadata lehe lähteteksti ("View source") ja siis üles otsida koodist raamistiku kaasamise element ja attribuudid.
Kuid on ka lihtsam lahendus: WTFramework, bookmarklet'ina kasutatav tööriist (väike javascripti detektor).

Alustamiseks tuleb lihtsalt rebida detektori otselink enda veebilehtiseja järjehoidja ribale ja "põneval" saidil sellele viitele vajutada ja tulemus ongi käes. Esialgu sisaldab nimekiri mida see peaks see ära tundma järgmisi raamistike MooTools, Yahoo User Interface, jQuery, Scriptaculous, Dojo Toolkit ja Mochikit.

Lisatud: 19.11.2008 11:57

jQuery: onmouseover ja onmouseout

Lihtsate onmouseover ja onmouseout tabeliridade (ei mingeid tabeleid enam) värvide vahetamiseks tavalise primitiivse ja talupoegliku lahenduse:

<dl onmouseover="this.style.backgroundColor='#F8F8F8';" 
onmouseout="this.style.backgroundColor='#FFF';">
	<dt>Veerg 1</dt>
	<dd class="competion">Veerg 2</dd>
	<dd class="place">Veerg 3</dd>
	<dd class="organizer">Veerg 4</dd>
</dl>

asemel kasutada hoopis jQuery pakutavat lahendust (mitme muutuva css attribuudi korral):

<dl class="row;">
	<dt>Veerg 1</dt>
	<dd class="competion">Veerg 2</dd>
	<dd class="place">Veerg 3</dd>
	<dd class="organizer">Veerg 4</dd>
</dl>


$(function() {
    $("dl.row").hover(function () {
      $(this).css({ "background": "#DFFFFF", 
		  "color": "#00a7d8","border-bottom": "1px solid #9EE9FF" });
    }, function () {
      var cssObj = {"background": "#FFF", 
		  "color": "#2C2C2C", "border-bottom": "1px solid #CBCACA" }
      $(this).css(cssObj);
    });
});

või pisut lihtsustatud varianti (ühe muutuva css attribuudi korral):

$(function() {
    $('dl.row').hover(function() {
            $(this).css("background","#DFFFFF"); }, 
       function() {
            $(this).css("background","#FFF");} );
});

Puhtam, kergem ja mugavam tunne :)
Peaks ka "Unobtrusive" olema!
Lisatud: 22.10.2008 21:44

jQuery, Microsoft ja Nokia

JavaScripti raamistik jQuery on pööranud uue lehekülje Microsoft'i ja vabavara vahelises suhtes.

Tarkvarahiid Microsoft võttis ametlikult oma programmeerimistarkvaras Visual Studio kasutusele jQuery, liites raamistiku programmi ja seal sees oleva ASP.NET Ajax raamistikuga, andes nii vajalikud vahendid ja funktsionaalsused ASP.NET ja kindlasti ASP.NET AJAX'i arendajatele oma töö kergendamiseks, lihtsustamiseks ja täiustamiseks. Samas peaks see muutma ka väiksemaks vahet erinevates browserites (cross-browser) javascripti käitumist, sest arendajad kasutavad siis järjest enam sarnaseid vahendeid ja funktsioone toodete/lahenduste loomiseks.

Microsofti .NET korporatiivse arendusdivisioni asepresident Scott Guthrie on omalt poolt lubanud, et Microsoftist saab hea liige jQuery kommuunis, leppides kommuuni pakutava loominguga, ise seda muutmata ja uut haru arenduses tekitamata, samas on lubatud kaasa aidata arenduses, testides koodi ja siis sealt saadud tulemusi jQuery projektiga jagades. Samas on ka siinkohal suurimad riskid hõõrdumiste tekkimiseks ja valitud joonelt kaldumiseks.

Selle sammuga ühtlasi kinnitab Microsoft oma ekslikkust varasemate negatiivsete vaadete kohta vabavara suunal.

Sellega jQuery võidukäik veel ei lõppe, sest samal ajal sai teatavaks veel teise suure tegija, mobiilitootja Nokia poolne jQuery kasutuselevõtt. Soome telefonivalmistaja kasutab seda oma WebKit'il põhineval Web Runtime (WRT) mobiilibrowserimootori lahenduste väljatöötamiseks, ühtlasi tähendab see seda, et kõigist uutest Web Runtime sisaldavates Nokia telefonides on ka jQuery.

Kokkuvõtteks peab kindlasti ära märkima, et mõlemast projektist on kindlasti võimalik võita mõlemal projektipoolel. Nokia ja Microsoft saavad osa jQuery innovatiivsusest ja funktsionaalsusest, jQuery ise saab samuti kasu suurte tegijate poolt sooritatavate loetematute testimiste, paranduste ja täienduste näol.
Lisatud: 04.10.2008 19:14

Animeeritud veebidisain

Alles see oli kui flash võitis oma õhulise liikumisega paljude südamed. Kuid ka flashil on omad puudused, keerukamate projektide puhul muutub flash liialt mahuliseks, aeglaseks (eriti nõrgemates arvutites), vaatamata Google poolsetele uudistele edust otsida ka flashi sisust on just see pool flashis nõrgim külg.

Õhuline liikumine on aga toodud javascripti ja ajaxi abil ka html ja css veebilehtedesse. Kasutades poppe javascript teeke nagu Prototype, jQuery ja MooTools on võimalus luua flashilike liikumisi ja animeeritud sisu.

Allpool siis ainult mõned näited sellest edust:
Animeeritud menüü 1
Animeeritud menüü 2
Animeeritud menüü 3
Lisatud: 31.08.2008 10:25
Leheküljed: 1 2