Janko şi aspectul formularelor web


Sunt bucuros de fiecare dată când găsesc bloguri interesante de limbă engleză, scrise de ne-americani. Poate vă amintiţi despre Prelovac.com, blogul unui sârb cu multe materiale (pluginuri şi teme) legate de WordPress. Vă invit astăzi să poposim pe blogul unui alt sârb, scris tot în engleză, dar dedicat mai mult designului. JankoAtWarpSpeed îi aparţine lui Janko Jovanovic şi are ca subtitlu "vă ajută să construiţi webaplicaţii aspectuoase şi funcţionale". Pe lângă ocupaţiile lui artistice (pictează bine!), Janko scrie rar dar lucruri utile, de exemplu despre formulare web.

img122

Aşa am ajuns de fapt eu să îi găsesc situl, documentându-mă puţin asupra modului în care se pot aranja mai estetic formularele web. Într-un articol din 6 iunie Janko face o analiză predominant teoretică intitulată Building a better web forms: Labels in form layouts. Articolul e interesant şi la final conţine propunerea autorului de folosire a underlined labels. După câteva zile a scris un articol mai practic: Context highlighting using jQuery (o demonstraţie găsiţi aici). Pe scurt ideea este de semnalare a grupurilor de câmpuri dintr-un formular. Să zicem că e un formular în care se cer multe informaţii, dar ele sunt grupate pe teme (ex: stradă, număr, bloc, apartament, etaj… reunite în grupul Adresă). Cu un mic cod jQuery se poate face o evidenţiere vizuală a acestor blocuri.

Acum o lună seria a continuat cu Justify elements using jQuery and CSS. Aici Janko oferă o idee interesantă: etichetele câmpurilor formularului să nu primească o dimensiune fixă din CSS (poate nu estimezi bine şi 100px nu e de ajuns), ci dinamic, în baza lăţimii etichetei celei mai lungi. Cum ne-am aştepta, cu jQuery lucrurile se rezolvă foarte elegant:

$(document).ready(function() {
var max = 0;
$("label").each(function(){
if ($(this).width() > max)
max = $(this).width();
});
$("label").width(max);
});

img123

În fine, mai recent a apărut articolul Enhance your input fields with simple CSS tricks, în care sunt explicate nişte elemente simple dar care pot să îmbunătăţească mult aspectul unui formular. Am dat doar câteva exemple dintre articolele lui, privind formularele web. Dar sunt şi alte articole interesante, precum Add grunge effect to text using simple CSS sau Create apple.com-like breadcrumb using simple CSS. Dacă vă place ce/cum scrie, vă puteţi desigur abona la blogul lui. Blog care – surprinzător? – nu este realizat cu WordPress ci cu BlogEngine.NET, un CMS despre care recunosc că nu am mai auzit până acum.

PS: Tot despre formulare web (şi apare şi Janko citat) este şi următorul articol, chiar de astăzi, cu multe resurse utile – Form Elements: 40+ CSS/JS Styling and Functionality Techniques. Se miră cineva că jQuery apare cu insistenţă între tehnicile de acolo?


Apreciază articolul:

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

1 comentariu

  1. Janko spune:

    Thanks for all the good words!! :)


Lasă un răspuns

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