Share
Săptămâna trecută, am aruncat o privire asupra modului de a crea o simplă set de interfață pentru utilizatori în Photoshop, ca o modalitate de a accelera munca în cadrul unora dintre proiectele dvs. de web design. Avem o mulțime de solicitări de a face funcționalitatea elementelor, deci fără întârziere, iată tutorialul de urmărire pe care l-ați solicitat!
Acest tutorial se bazează pe sesiunea de proiectare pe care am parcurs-o în această postare anterioară (care include un fișier PSD gratuit), deci dacă nu l-ați verificat, continuați și faceți-o acum. Dacă doriți să treceți direct la partea funcțională, este bine și asta!
Este de la sine înțeles că ceva de pe web poate fi făcut în mai multe feluri? așa că vom încerca ceva nou astăzi, arătându-vă două moduri diferite de a obține funcționalitate cu acest design. Primul va fi cu Tom Green
În această metodă, Tom Green vă va arăta cum să luăm elementele pe care le-am proiectat în Photoshop și să le facem elemente pe deplin funcționale în Fireworks și Catalyst. O să-l las pe Tom să o ia de aici:
În această metodă viitoare, vă voi arăta cum să creați rapid stilul nostru folosind jQuery Themeroller. În primul rând, să discutăm de ce:
Sunt un mare fan al reciclării propriului cod? dar eu sunt un fan și mai mare de a găsi instrumente de codificare care au fost deja create pentru mine de către alte (de obicei mai experimentat) coderi! De fapt, cu atât de multe instrumente pre-codate acolo, este aproape prostește să înceapă orice proiect de genul acesta de la zero, dacă nu ai un motiv foarte bun să pierzi ceva timp.
Acum, putem argumenta dacă este sau nu valoroasă pentru un designer web să învețe cum să codul de la zero (și aș răspunde că este într-adevăr foarte important să știți cum funcționează toate aceste lucruri), dar acesta este un caz în care doar creăm un kit UI simplu? așa că am să presupun că aveți câteva cunoștințe de bază HTML / CSS sub centură și că veți ști cum să deschideți astfel de fișiere și să le editați într-un editor de text.
Ca atare, voi baza aceasta parte a tutorialului pe ThemeRoller - instrumentul oficial de creare a interfetei utilizator jQuery. Dacă nu ați folosit jQuery UI înainte, este foarte bine, dar permiteți-mi să vă explic de ce vrem să folosim acest lucru în loc de doar HTML / CSS brut:
Este de la sine înțeles, dar vom folosi doar ThemeRoller ca fundație? vom adăuga propriile personalizări personalizate ale stilului după ce vom obține un bun început.
Deci, de unde începem? Vom trage codul într-un minut, dar să începem pe site-ul ThemeRoller creând o piele apropiată de stilul nostru propriu. Lucrurile pe care vom dori să le acordăm atenție sunt:
ThemeRoller ne oferă doar un număr limitat de valori pe care le putem edita în față (culoarea de fundal, culoarea frontală, culoarea textului etc.), deci ceea ce dorim să facem în acest pas inițial este doar introducerea valorilor de bază ale culorii din designul nostru.
S-ar putea să doriți să utilizați propriile dvs. culori, dar ceea ce am încheiat este acesta (faceți clic pe link pentru a vedea valorile mele în acțiune):
De aici, trebuie doar să descărcați tema pe care tocmai am creat-o. "Tema" este în esență doar un fișier CSS personalizat (împreună cu o mână de imagini) care va fi folosit împreună cu scripturile jQuery de bază pentru a crea elementele personalizate ale UI.
Puteți folosi în mod evident propriile valori de culoare, dar nu ezitați să accesați descărcarea utilizând demo-ul de aici.
Ce veți obține în mod esențial aceasta: vizualizați demo-ul brut. Este o pagină HTML generică care a fost generată pentru a afișa widget-urile pe care tocmai le-am creat? de aici, îl puteți încorpora în propriile desene sau modele destul de ușor.
În ultimul pas, vom lua demo-ul personalizat pe care l-am furnizat Themeroller și îl vom muta în propria noastră pagină HTML. Aceasta este o chestiune destul de simplă dacă aveți vreo experiență cu HTML - vom începe prin apucarea codului HTML brut de care aveți nevoie pentru widget-ul dvs. și îl veți arunca într-o pagină nouă HTML care include referințele corecte ale fișierelor (de mai jos) pentru a le utiliza widget-uri, după cum doriți. Fișierele pe care trebuie să le menționați în secțiunea HEAD a documentului dvs. HTML sunt aici:
Rețineți că dacă introduceți toate fișierele Themeroller într-un alt dosar separat pentru a ajusta în mod corespunzător referințele folderului. În demo-ul nostru, secțiunea de referință arată astfel:
Fiecare widget UI (adică: un acordeon sau un cursor) are două componente pe care trebuie să-ți amintești:
Partea HTML este destul de ușoară - luați-o din fișierul demo HTML pe care l-ați descărcat. Va trebui să includeți și scripturile de "activare" pentru fiecare widget pe care doriți să îl utilizați, de asemenea. În cazul nostru, aceasta arată astfel:
Observați cum este activat fiecare "widget" cu doar câteva linii de cod? noi nu scriem niciunul din noi înșine (deși codec-urile jQuery avansate sunt binevenite), mai degrabă, noi luăm doar scripturile pe care le-a oferit demo-ul.
Lista de mai sus reprezintă doar widget-urile care au fost afișate în demo, deși? jQuery UI include multe altele care nu sunt prezentate aici. Dacă vrem să adăugăm un alt widget, îl găsim pur și simplu în directorul "development-bundle / demos" (din descărcarea temei) și apucam de acolo scriptul corespunzător și HTML.
De exemplu, codul HTML al barei de progres arată astfel:
Și scriptul de activare pe care l-am adăuga la celelalte script-uri arată astfel:
// bara progresivă (value: 20);
În cele din urmă, să luăm acest lucru pentru o rotire într-un design personalizat rapid pe care l-am bătut împreună:
Whallah! Probabil că nu se întâmplă nimic în ceea ce privește designul (intenționează să fie doar o demonstrație simplă), dar acum am demonstrat cu succes că putem crea rapid un set de elemente UI cu jupuit folosind Themeroller și le putem muta într-un obicei Pagină HTML în doar câteva etape rapide.
Acesta este doar punctul de plecare în care ați putea merge cu asta? în mod evident, pentru a face aceste elemente ale UI să facă ceva cum ar fi stocarea datelor sau trimiterea unui formular web, va trebui să integrați codificarea suplimentară (pe care puteți citi multe tutoriale despre site-ul nostru surs Nettuts). Dar, în scopul acestui tutorial, am creat o piele rapidă pe care o putem folosi într-o varietate de proiecte diferite.
Este, de asemenea, demn de remarcat faptul că, dacă nu sunteți 100% fericit cu pielea așa cum se află acum, puteți merge mai departe prin ajustarea temei personalizate .CSS fișier pe care am referit.
Accentsconagua