IxEdit: dinamizează paginile web


Webmasterii începători, dar şi cei avansaţi, vor saluta – sunt sigur – proiectul IxEdit. Când scriu, proiectul este în beta public şi sper sincer să rămână gratuit şi după ce iese din beta. Ce face el? Ne permite ca, introducând temporar câteva linii de cod, să dinamizăm o pagină web cu tot felul de efecte. Dacă vă întrebaţi ce bibliotecă JavaScript este în spate atunci răspunsul nu vă va mira: jQuery. Doar că pentru utilizatorul IxEdit nu este nevoie de cunoştinţe despre jQuery: totul se face din mouse, ca într-o aplicaţie desktop în care configurezi diverşi parametri.

 imagine

Să o luăm de la început. Am făcut o pagină simplă cu două butoane şi un div cu un text. Introducând liniile IxEdit (cine va fi interesat va vedea când descarcă kitul la ce linii mă refer) şi reîncărcând pagina avem o nouă fereastră, plutitoare, numită evident IxEdit. Cu ea vom adăuga efecte: de la animaţii (apare, dispare, slide ş.a.), la schimbări de clase, manipulări DOM, convertire liste în taburi, componente draggable şi multe altele. Eu încerc să merg pe ceva simplu de dragul demonstraţiei. Aş vrea ca un click pe primul buton să ascundă iar apoi să arate div-ul cu text. În fereastra neagră-transparentă dăm click pe New (având Action Event activ). Fereastra se va modifica, arătând ca mai jos.

imagine

Alegem evenimentul (rămâne Click în cazul nostru) şi apoi trebuie să stabilim click pe… ce? Dăm click pe butonul din dreapta la câmpul Selector. Când dăm click, mouse-ul va evidenţia fiecare element HTML şi astfel putem indica butonul dorit. Atenţie: am pus ID-uri la fiecare buton, ca să identifice care anume dintre cele două butoane (folosind ID-uri veţi putea identica cu uşurinţă orice element din pagina HTML).

imagine

După ce am ales evenimentul şi obiectul, a mai rămas să spun efectul: Slide Down/Up; pe ce element să se aplice efectul – pe div-ul cu text, la care eu i-am pus ca ID ceva; şi în fine, durata efectului – am pus 250ms ca să se vadă, să nu fie foarte rapid. Evident, se pot pune mai multe efecte în lanţ, folosind semnul + în cerc pe care îl vedeţi mai jos. De asemenea se poate condiţiona efectul. Cu alte cuvinte webmasterii avansaţi pot realiza cu IxEdit scenarii complexe.

imagine

La final click pe Done and Reload pentru a vedea ce a ieşit. A ieşit ce doream. Un click pe primul buton ascunde, apoi arată div-ul cu text. Misiune îndeplinită! Dar cum facem să păstrăm efectele? Să presupunem că am adăugat toate efectele dorite (după cum vedeţi mai jos, ele pot fi ulterior modificate): acum din meniul IxEdit (rotiţa) alegem Deploy şi vom vedea liniile de cod ce trebuie să le punem în pagina noastră. Vom şterge liniile puse pentru a lucra cu IxEdit şi punem noile linii furnizate. Atât! Şi astfel, fără să fi scris vreun rând de cod, putem avea n efecte spectaculoase, via jQuery.

imagine

Acum partea… negativă (?). Ca IxEdit să poată să memoreze efectele, cât timp lucraţi la ele, va trebui să stocheze undeva datele, nu? Pentru aceasta foloseşte Google Gears. Acesta vine automat cu Chrome, dar se poate instala ca supliment in Firefox. Permiteţi componentei Gears să memoreze datele şi totul va merge perfect (poate nu chiar perfect… e doar beta…). Las clipul oficial să vorbească suplimentar despre acest interesant produs. Dar mai mult vă vor impresiona exemplele de aici.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

3 comentarii

  1. cititor spune:

    „Dacă vă întrebaţi ce librărie JavaScript este…” Library=biblioteca, nu librarie, tot asa cum, de exemplu, cold nu e cald, phrase nu e fraza. Se cheama „false friends” dar banuiesc ca stiti asta. Hai sa folosim limba romana asa cum trebuie si sa o iubim, sa dam un exemplu bun intr-o lume tot mai invadata de expresii ca „giobul meu e in pi ar”. Despre calitatea articolelor … ma inclin cu respect.

  2. radu.capan spune:

    Mulţumesc. A fost o scăpare şi am corectat-o. E drept că tentaţie e foarte mare de a face jQuery „librărie” în loc de „bibliotecă”.

  3. cititor spune:

    Felicitarile pentru munca depusa ramin totusi pe primul loc.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *