Arhiva pentru categoria “WebDevelopment”

Teste pentru cunoştinţe de programe

Ideea la Test4Geeks este simplă: fie eşti un programator şi doreşti să îţi măsori puterile (a se citi cunoştinţele), fie eşti un angajator şi doreşti să filtrezi din candidaţi, preferând un test online din care să afli cam de ce nivel este respectivul candidat. Important: serviciul nu este gratuit. Totuşi, ai parte gratuit de două teste. Dacă eşti angajator atunci trebuie să faci bine calculele dacă merită abonamentul anual pentru a-ţi testa candidaţii. Dar să rămânem la ideea că eşti un programator şi vrei să vezi cum te descurci. Primul test: să îţi deschizi contul. Glumesc. Oricum, îţi trebuie cont.

imagine

Interesant: după ce mi-am făcut cont sunt prevenit să rezolv testul exclusiv cu mouse-ul, alegând răspunsurile corecte. Deduc că …


O soluţie simplă pentru a detecta timpii morţi ai unei pagini

Scenariul este simplu: ai o pagină web, sau poate chiar o webaplicaţie, în care vrei să fructifici timpii morţi. Poate cât timp pagina nu este folosită vrei să preîncarci nişte informaţii… sau să provoci periodic o reîncărcare… sau, ceea ce m-a interesat pe mine de fapt, să de-loghezi (de-autentifici) utilizatorul din webaplicaţie. Codul de mai jos nu îmi aparţine ci l-am găsit aici – eu doar îl semnalez. Şi am să vă spun după cod limitele lui.

var idleTime = 0;
$(document).ready(function () {
//Creste numaratorul la fiecare minut
var idleInterval = setInterval(timerIncrement, 60000); // 1 minut

//Pune pe zero numaratorul la miscarea mouse-ului.
$(this).mousemove(function (e) {
idleTime = 0;
});

//Pune pe zero numaratorul la apasarea vreunei taste.
$(this).keypress(function (e) {


Ceva în plus despre redirectări

A trecut vremea când legăturile se terminau în .html, sau .php sau erau ceva de genul www.situlmeu.ro/produs.php?id=14&catelog=fructe&raion=detergent. Astăzi de la URL-uri ne aşteptăm să fie prietenoase, „citibile”, uşor de comunicat şi la nevoie de memorat. Toate CMS-urile care se respectă oferă linkuri frumoase. Dar dacă ne facem noi aplicaţia? Atunci trebuie să rezolvăm noi problemele. O cale este să pasăm totul lui index.php (cum face WordPress de exemplu), dar de dragul exemplelor didactice nu vom face aşa. Să vedem deci nişte cazuri. Avem situl cu index.php făcând mai totul, dar să zicem că avem un login.php pentru identificare şi logout.php pentru ieşire.

Options +FollowSymlinks
RewriteEngine On
RewriteRule ^identificare/$ /login.php [NC,L]

Primele linii nu le vom mai repeta, şi luaţi-le ca fiind de musai în deschidere :). Linia a 3-a face ca cine scrie www.situlmeu.ro/identificare/ să apeleze de fapt www.situlmeu.ro/login.php dar fără să se vadă aceasta (nu este deci redirectare, ci un fel de …


Chartist.js: Grafice din două mişcări

Graficele au puterea de a comunica informaţiile mai bine decât cifrele brute şi de aceea sunt folosite nu doar în rapoarte tipărite ci şi online. Chartist.js este o soluţie modernă ce merită atenţia. După cum vedeţi mai jos… de fapt trebuie să vă uitaţi în sursa paginii… este uşor să trasezi un grafic simplu din câteva mişcări. Poate că nu sunt două, dar oricum rapid: de includ un fişier CSS, unul JS, iar apoi datele se definesc intuitiv şi graficul e gata!

Pe moment sunt suportate patru tipuri de grafice: linie, bară, pie-chart şi… tip inel (poate are altă denumire consacrată). Ce sigur o să vă placă este că la pagina de exemple puteţi interacţiona cu codul ca să vedeţi cum funcţionează, cum se modifică graficul după datele diferite ce le daţi. Desigur, nu lipseşte documentaţia care deschide noi orizonturi (inclusiv pentru grafice mai complexe, …


DataTables: plugin jQuery (III)

Ei bine, după vreo 5 ani îmi permit să revin la pluginul DataTables, bucuros să văd că proiectul este încă activ şi… îmi foloseşte intens într-un nou proiect la care lucrez. Nu ştiu voi, dar pe mine tabelele mă cam exasperează: în special integrarea lor în design şi capacitatea de adaptare după rezoluţie, dar şi problema funcţionalităţii. Din fericire pluginul îşi face cu brio datoria. Am mai scris de vreo două ori despre acest plugin în trecut, dar la atâţia ani o iau ca de la zero: pluginul cere includerea unui fişier CSS pentru partea de aspect, a unuia JS pentru funcţionalitate (atenţie: depinde de jQuery deci mai vine fişierul JS pentru jQuery) şi o linie gen $(‘#tabelul-meu’).DataTable(); ca să aveţi un start nemaipomenit.

Am luat de pe Wikipedia tabelul de mai jos ca să am ce să demonstrez şi dacă veţi privi în sursă veţi vedea că …


Redirectări permanente prin diverse metode

Recent am avut nevoie la un anumit sit să schimb URL-urile legate de luni de la forma lungă la forma scurtă. Totuşi, am vrut ca indexările existente şi cine cumva scrie manual URL-ul să nu aibă parte de o eroare, ci să fie dus la noua locaţie, mai scurtă. Drept urmare – evident! – aveam nevoie de redirectări permanente. În paranteză fie spus, problema era sub WordPress, dar nu apelez la WordPress când nu e de musai. Aşa că m-am uitat puţin cum pot via .htaccess. E simplu! Dar mai simplu este dacă ne face altul treaba, nu?

imagine

De aceea vă recomand 301 Redirect Code Generator, un mic instrument ce îşi face treaba cu brio! Practic dai URL-ul vechi şi …


Preloader-e… plate

Preloader-ele sunt acele imagini folosite de regulă când în pagini web se face o încărcare AJAX, pentru ca utilizatorul să ştie că se lucrează, să nu creadă că s-a blocat pagina/calculatorul. Acum, când Google, Microsoft, iOS merg tot pe designul plat (flat), iată că şi preloader-ele se aliniază. Mai noul sit PixelBuddha oferă, în articolul Flat Preloaders,  un set de 10 astfel de imagini, dintre care patru vedeţi mai jos. Deja am folosit una dintre aceste imagini într-un proiect de-al meu.

Preloader_1 Preloader_4 …


Identificarea clickurilor cu jQuery

În proiectele Dvs web s-ar putea să vă întâlniţi cu situaţii în care doriţi să „prindeţi” click-ul mouse-ului, fie el click stânga, mijloc sau dreapta. Desigur, jQuery oferă instrumentele necesare şi vom încerca să vedem mai jos cum putem face şi ceea ce jQuery nu oferă nativ. Dacă vrem click normal pe un element (link, div, imagine…) atunci desigur putem folosim $(„#element”).click(), dar ca să trecem toate cele trei scenarii în revistă ne vom folosi de mousedown.

imagine

Astfel, următorul cod ne permite să aflăm ce fel de click am dat. Simplu… normal că este simplu.

$(document).mousedown(function(e) {
    if(e.which == 1) $("#foo").html("Click stânga!");
    if(e.which == 2) $("#foo").html("Click mijloc!");
    if(e.which == 3) $("#foo").html("Click dreapta!");
});

Dacă dorim …


Din nou iconiţe pentru webmasteri (X)

Spre ruşinea mea se pare că din iunie 2012 nu am mai prezentat, cel puţin în această serie, iconiţe utile webmasterilor. Evident, nu voi merge până atunci în spate în timp, dar am nişte semne de carte de „descărcat”. Şi o să începem cu nişte articole foarte recente: 80+ Free Niche Specific Icon Sets for Designers oferă iconiţe pentru tot felul de scenarii (situri despre vreme, despre biciclete, despre filme, despre…). Tot recent a mai apărut o semnalare a unui unic pachet, dar de 140 iconiţe: Free Business & Finance Vector Icon Set (EPS).

imagine

Alte articole care colectează iconiţe:

  • 20 More Sets of Free Icon Fonts
  • Collection Of Free High-Quality Line Icon Sets


Pluginuri jQuery de reţinut (I)

Un articol recent de pe WebResourceDepot, 10 Useful jQuery plugins from Github, mi-a atras atenţia asupra unor pluginuri. Unele le ştiam deja, ba chiar le folosesc, altele nu. Lista celor zece o veţi găsi în articol, eu mă limitez la patru dintre ele. Şi am să încep cu jQuery Cookie, un plugin simplu de folosit pentru un management mai uşor al cookie-urilor. Merge sub navigatoarele tradiţionale, dar şi sub Android şi iOS. Acum vreo lună am scris despre Amplify.js: un plugin jQuery pentru salvarea datelor. Îl prefer în continuare, dar de reţinut şi jQuery Cookie.

imagine

Notabil şi jQuery Waypoints, care permite să facem ceva (să apelăm o funcţie adică) atunci când un anumit element …