Arhiva pentru tagul “JavaScript”

Maxmertkit: alt framework ca să începi rapid un sit

Am scris în ultimele săptămâni despre Twitter Bootstrap şi o voi mai face, pentru că e un “produs” excepţional. Şi când iei un sit de la zero… dar chiar şi când ai deja un sit şi doreşti să îl îmbunătăţeşti (desigur, există pericole de coliziune – CSS şi JavaScript – dar toate se pot rezolva… în cele din urmă). Am dat recent de Maxmertkit, care îmi pare similar cu Twitter Bootstrap… dar mamă ce diferit e totuşi. În bine sau în rău? Aici depinde mult de gusturi. Efectele sunt mai “artistice”, mai cu rotiri, animaţii şi altele asemenea.

imagine

Un lucru foarte atractiv este că de pe prima pagină poţi testa componentele bibliotecii, chiar şi configura, de la culoare la …


Twitter Bootstrap: informaţii plutitoare

Informaţii plutitoare sună prea abstract? Nu şi dacă aţi privit la captură (exemplul live e aici), de unde cel puţin cu termenul tooltip v-aţi luminat. Vom vedea mai încolo şi ce e cu popover, dar să o luăm cu începutul. Navigatoarele oferă implicit un sistem de tooltip, pur şi simplu indicând un title la link, imagine… Dar nu e foarte estetic, nici configurabil. Ei bine, cu Twitter Bootstrap lucrurile se simplifică puţin. Trebuie însă să folosim puţin JavaScript, linia esenţială fiind $(‘[rel=ajutor]’).tooltip();

imagine

După cum bănuiţi, în loc de [rel=ajutor] putem pune ce selector dorim. Eu am pus acesta, astfel că un link cu rel="ajutor" va avea automat arătat ce este în title ca şi tooltip. Foarte simplu. Şi tot …


Twitter Bootstrap: tabele, formulare, imagini

Continuăm incursiunea-reclamă pentru Twitter Bootstrap cu alte câteva elemente foarte-foarte comune în mai orice pagină web: tabele, formulare şi imagini. Şi ca să începem cu sfârşitul, vă invit să vedeţi ceea ce mai jos este doar captură dând click aici. Vreţi şi un bonus? Redimensionaţi fereastra cu acea pagină şi observaţi cum elementele se adaptează lăţimii disponibile. Da, fără nici o bătaie de cap toate aceste structuri incluse se vor redimensiona corespunzător, sau vor trece una sub alta când nu mai există lăţimea necesară. Cool!

imagine

Să o luăm rapid la rând câte un element. Desigur, pe scurt. Despre tabele mai întâi (documentaţia oficială): totul porneşte de la a pune clasa table la un tabel şi …


Scurtături din taste cu JavaScript (III)

Nici un an fără o astfel de soluţie! Am scris despre shortKeys în 2011, despre MouseTrap în 2012 (iar acest MouseTrap îl folosesc încă în majoritatea webaplicaţiilor pe care le fac) şi iată că acum vorbim de Keyboard JS fiind 2013. În timp ce nu am ajuns să testez soluţia – dar intenţionez să o încorporez în următoarele mele proiecte – mă bucură din start un lucru: că nu funcţionează doar pentru combinaţii, ci şi pentru succesiuni de apăsări (cum găsim de exemplu în GMail şi în alte aplicaţii Google – dacă apăsaţi în GMail Shift+? veţi înţelege despre ce vorbesc).

imagine

Această bibliotecă, Keyboard JS, nu este legată de vreo altă bibliotecă (ex: jQuery), deci …


Twitter Bootstrap: butoane, butoane, butoane

O să îmi permit să mai scriu despre Twitter Bootstrap dintr-un considerent cumva egoist: aşa îl descopăr şi eu mai bine :). Sper însă să fie o reclamă bună, care să prindă la webmasterii ce ar putea fi interesaţi de acest minunat proiect. Iar acum vă propun să vedem ce varietate de butoane arătoase, dar atât de simplu de implementat, ne oferă Bootstrap. Dacă vreţi să vedeţi exemplul live, deschideţi această pagină. Noi în cele ce urmează vom lua pe rând cele ilustrate în captură.

imagine

Şi pentru început să spunem că un buton poate fi implementat atât cu tagul button, cât şi cu tagul a folosit pentru linkuri. Totul e să punem class="btn" şi atunci vom avea …


Twitter Bootstrap: un dar pentru webmasteri

Despre Twitter sigur aţi auzit. Dar despre Twitter Bootstrap? Probabil mulţi – webmasterii în special – au auzit, dar poate nu toţi, aşa că haideţi să vedem despre ce este vorba. Cândva prin august 2011 doi angajaţi de la Twitter lansau prima versiune a acestei colecţii de instrumente pentru webmasteri, colecţie dezvoltată desigur mult înainte, ca instrument intern, căutându-se o uniformizare a elementelor de interfaţă. Cu alte cuvinte au luat ceva de la ei şi au dăruit lumii webmasterilor. Şi ce cadou minunat!

imagine

Ce permite pe scurt această colecţie de instrumente? Să porneşti mult mai rapid o webaplicaţie. Dacă veţi studia meniul din pagina proiectului veţi vedea tot felul de ingrediente pentru paginile web care sunt oferite de-a gata, …


Navigare cu j şi k între articolele din WordPress

Scriind articolul Navigare cu j şi k din heading în heading m-am gândit: oare cât de greu o fi să faci deplasarea cu j şi k între articolele unui sit WordPress? Ei bine, se poate rezuma la nici 20 de linii de cod. Dar să ne înţelegem clar: depinde puţin de tema WordPress ce o folosiţi şi de versiunea de WordPress. Presupunând că sunteţi la zi, atunci în header-ul paginii apar indicate legăturile spre articolul anterior şi respectiv următor. Le-am evidenţiat în captura următoare. Teoretic şi la Dvs ar trebui să existe.

imagine

Dacă nu există problema e puţin mai complicată, WordPress-ul neoferind permalinkul către articolul următor/anterior, doar “grupajul” HTML ce include permalinkul. A doua premisă: folosirea jQuery. Din nou, …


Navigare cu j şi k din heading în heading

Vorbim acum de o demonstraţie concretă la biblioteca MouseTrap tocmai prezentată şi la biblioteca jQuery. Dacă scriu pe această temă e pentru că tocmai am avut nevoie de aşa ceva ;). Mai exact am lucrat la un sit care afişează pagini cu mult text şi în care mi-ar place să se poată naviga secvenţial din taste. Dacă folosiţi Google Reader ştiţi deja cum merge cu j şi k. Dacă e să luăm un alt exemplu ar fi TheBigPicture, unde se sare din imagine în imagine: de dragul unui exemplu simplu eu vă propun să sărim din heading în heading.

imagine

Cum se face aşa ceva? Să presupunem că avem un text luuung cu multe heading-uri. Să zicem H1 …


Scurtături din taste cu JavaScript (II)

Dacă vă amintiţi, la începutul anului trecut am scris articolul Scurtături din taste cu JavaScript. Acolo am vorbit despre o bibliotecă jQuery, care atunci mergea şi nu prea mergea (nu ştiu între timp dacă s-a perfecţionat), şi de o soluţie strict JavaScript care era perfect funcţională. În fapt şi astăzi o folosesc în unele proiecte web ale mele. Dar recent am găsit ceva mai bun: MouseTrap. Cum se prezintă vedeţi în captura de mai jos. Nu, nu necesită jQuery, dar da, merge şi în combinaţie cu jQuery.

imagine

Utilizarea este absolut banală!

Mousetrap.bind('1', function() { alert("Ai apasat tasta 1"); });

Evident, putem folosi şi combinaţii, gen shift+5 sau ctrl+h sau alt+ctrl+shift+right. Mai mult, permite – şi aceasta îmi …


Enyo: alt framework pentru aplicaţii mobile

La început era un framework folosit în casă de HP, pentru sistemul lor webOS. Apoi din ianuarie anul curent au decis să îl facă nu doar public, dar şi adaptat pentru diversele sisteme de operare mobile, respectiv pentru diversele navigatoare existente.  Astfel Enyo – tocmai ajuns la versiunea 2.0 – este un instrument în special dedicat webaplicaţiilor mobile, dar evident poate fi folosit în cele din urmă pentru orice webaplicaţii (vedeţi ce spune şi în capturp).

imagine

Desigur, veţi dori să îl vedeţi în acţiune, caz în care puteţi merge direct la Showcase. Dacă în schimb vă interesează documentaţia: aici.