Share
Javascript poate adăuga o mulțime de efecte speciale care pot îmbunătăți cu adevărat experiența utilizatorului. Iată 10 tehnici simple și inteligente de Javascript care adaugă o doză suplimentară de utilizare la orice pagină web.
Javascript este folosit de obicei ca limbaj estetic în dezvoltarea web. Aceasta înseamnă că dezvoltatorii web ar trebui să utilizeze aproape întotdeauna Javascript pentru un singur lucru: Îmbunătățirea experienței vizitatorului. Există multe modalități inteligente și utile de a îmbunătăți un site din perspectiva interfeței cu utilizatorul. Un dezvoltator poate găsi aproape orice fragment de Javascript pentru a realiza ceea ce el sau ea dorește să realizeze.
Previzualizare imagine de miusam-ck.
Javascript este cu adevărat un limbaj puternic și ușor de învățat. Acesta poate fi utilizat pentru a efectua funcții simple, estetice, cum ar fi schimbarea unui element. Acesta poate fi folosit pentru alimentarea unui client de e-mail dinamic și trimite chiar și date instantaneu. Javascript poate fi la fel de simplu sau de avansat cum doriți să fie.
Un loc minunat pentru a găsi tehnici de Javascript care pot îmbunătăți funcționalitatea site-ului dvs. este prin navigarea cadrelor Javascript și a pluginurilor și documentației acestora. Iată câteva cadre care au în spatele lor o mulțime de resurse, pluginuri și comunități:
Cadrele sunt o binecuvântare pentru orice dezvoltator sau designer care dorește să adauge rapid efectele Javascript la aspectul lor, fără a trebui să facă cod brut. Multe dintre tehnicile pe care le folosim mai jos se vor executa pe cadre Javascript cum ar fi JQuery sau MooTools.
Este important să rețineți că multe dintre aceste caracteristici nu sunt mari și nepotrivite, ci mai degrabă mici și subtile. Prea adesea dezvoltatorii devin indemniți atunci când vine vorba de adăugarea de Javascript. Acestea sunt mici, dar foarte util tehnici care pot fi folosite de aproape orice dezvoltator. Veți observa, de asemenea, că majoritatea acestor caracteristici se ocupă cu ascunderea inteligentă și afișarea unor informații importante în moduri netradiționale.
JQuery hover sub tag cloud este un excelent exemplu de o bucată simplă de Javascript care adaugă într-adevăr o atingere frumos, subtil pentru a eticheta nori. Pe măsură ce utilizatorul se bazează pe o anumită etichetă și are sub-etichete asociate cu ea, apare o casetă pop-up și afișează sub-etichetele. Simplu, dar eficient.
Schimbarea opacității este un mic tutorial cu privire la modul de utilizare a Scriptaculous pentru a face o schimbare de opacitate pentru un element.
Modificările de opacitate sunt excelente din mai multe motive: afișarea conținutului mobil, afișarea conținutului la care a fost făcut clic și multe alte funcții utile.
Capacitatea de a decupa fotografii după ce le încărcați este o funcție pe care o pot utiliza mai multe aplicații web. De aceea, încărcarea și decuparea imaginilor jQuery reprezintă o tehnică Javascript sub-utilizată. Decuparea imaginilor este o funcție mult mai necesară atunci când vine vorba de încărcarea imaginilor, iar multe aplicații web ar putea beneficia de adăugarea acestei caracteristici utile.
Sincer, cred că aproape toate încărcările de imagini ar putea utiliza o funcție de bază a culturii. Cu toate acestea, decuparea imaginilor nu este cea mai ușoară funcție Javascript pentru a adăuga la un formular. Este un proces oarecum implicat, folosind bibliotecile de imagini și Javascript. Folosirea acestui script construit pe cadrul jQuery poate adăuga o mulțime experienței utilizatorului fără o grămadă de cod suplimentar.
Pe măsură ce hackerii devin din ce în ce mai inteligenți și mai numeroși, devine tot mai important pentru utilizatorii site-ului să aleagă parole puternice, care nu pot fi ghicite, care conțin o combinație de litere (litere mici și mici), numere și caractere speciale. Cu toate acestea, această sarcină este mai ușor de zis decât de făcut. În general, utilizatorii nu citesc indicațiile dacă o pot ajuta.
Afișarea vizuală a puterii parolei în formularele de înregistrare este o modalitate excelentă de a încuraja utilizatorii să facă parolele mai dificile. În timp ce acest lucru devine din ce în ce mai obișnuit, această tehnică simplă nu este folosită în aproape nici cât ar trebui.
Parametrul> Password Strength Meter funcționează în afara prototipului / scriptaculului și este un script mic care arată puterea parolei cu un contor colorat în timp real. Mai multe site-uri trebuie să implementeze acest tip de script "de siguranță" pentru a ajuta utilizatorii să vadă pericolele introducerii de parole slabe.
Magic Zoom este un script extrem de util pentru site-urile de eCommerce, precum și alte site-uri care au imagini detaliate. În loc de a face ca utilizatorul să facă un clic suplimentar la o imagine mult mai mare și să utilizeze lățimea de bandă, Magic Zoom vă permite să vizualizați în mod esențial printr-o lupă la fiecare imagine.
Magic Zoom este un script plătit, dar merită prețul de 47 dolari dacă aveți un magazin de eCommerce sau orice alt site care are fotografii foarte detaliate. Puteți descărca versiunea de încercare de mai jos.
Fiecare formă de pe Internet ar trebui să aibă această caracteristică. S-ar putea să fie doar perfecționistul în mine, dar având mai multe forme de intrare pe care autotabul la următoarea intrare se pare că ar trebui să fie obișnuit. Este o astfel de ușurare atunci când completați articole precum numerele de securitate socială atunci când intrarea se indice automat la următoarea intrare.
Scriptul jQuery Autotab este auto-explicativ și face ceea ce implică numele: adaugă autotab-uri la formulare cu jQuery.
Uneori lucrurile mici în dezvoltare pot face într-adevăr o diferență.
În timp ce, de obicei, nu ne place să ne distrugem propriul corn la NETTUTS, cum putem vorbi despre Javascript-uri inteligente și utile, fără a aduce la îndemână un minunat tutorial al lui Connor Zwick despre cum să construiască un formular util de autentificare?
Formularul de autentificare Javascript este o combinație elegantă de jQuery și un aspect frumos Photoshop pentru a obține efectul de a putea să arătați un formular de autentificare fără a avea o cutie de preluare a unei părți mai mari a paginii. Digg este un alt exemplu excelent al unui site care utilizează Javascript pentru a afișa și a ascunde formularul de autentificare.
Formularele sunt unele dintre cele mai grele părți ale designului web. Efectuați un formular prea lung și s-ar putea să speriați un potențial utilizator sau client. Dacă designul unui formular este neatractiv, acest lucru ar putea sparge și un potențial utilizator. Orice modalitate prin care putem face ca formularele noastre web să fie mai atrăgătoare pentru ochi va genera o rată de conversie mai mare decât cea înregistrată.
Contextul de evidențiere a formularului de fișiere web este un atribut excelent de adăugat la un formular de înscriere. Este surprinzător faptul că mai multe formulare nu oferă această funcție. Capacitatea rapidă de a vedea progresul pe un formular poate îmbunătăți considerabil experiența utilizatorului.
Scrisoarea de sus a panoului culisant este foarte asemănătoare cu Formularul de conectare incredibil Javascript. Ascunderea / afișarea informațiilor importante reprezintă o cheie a modelelor frumoase și ușor de utilizat. Ori de câte ori putem folosi Javascript pentru a păstra informațiile nefolosite îngrădite, ar trebui să ne străduim să facem asta.
Butoanele și link-urile de promovare a site-ului pot repede dezordinează un aspect al site-ului sau al blogului. Se pare că dacă doriți să vă promovați postările pe blog și alte tipuri de conținut de pe site-uri precum Digg și Delicious, trebuie să adăugați o listă lungă de butoane în șablonul dvs., astfel încât să nu excludeți site-ul social bookmarking sau știri preferat de nimeni.
Istoria socială vine la îndemână deoarece rulează un test pentru a vedea unde a fost recent utilizatorul și încarcă imagini către acele site-uri și numai acele site-uri. În esență, este vorba numai de afișarea vizitatorului butoanele pe care ar dori să le vadă.
Cum știe SocialHistory.js? Folosind o scurgere scurtă de informații introdusă de CSS. Culorile browserului au vizitat link-uri diferit decât link-urile ne-vizitate. Tot ce trebuie să faceți este să încărcați o grămadă de adrese URL pentru cele mai populare site-uri de marcare socială într-un iframe și să vedeți care dintre aceste link-uri sunt violete și care sunt albastre.
Glen Stansberry este un dezvoltator web și un blogger care sa luptat de mai multe ori decât ar dori să recunoască cu CSS. Puteți citi mai multe sfaturi despre dezvoltarea web la blogul său Web Jackalope.
Accentsconagua