Share
Vorige week hebben we bekeken hoe je een eenvoudige gebruikersinterfacekit in Photoshop kunt maken om werk in sommige van je webontwerpprojecten te versnellen. We hebben veel verzoeken ontvangen om de elementen functioneel te maken, dus zonder verdere vertraging, hier is de vervolg-zelfstudie die jullie hebben aangevraagd!
Deze tutorial is gebaseerd op de ontwerpsessie waar we in deze vorige post doorheen liepen (inclusief een gratis PSD-bestand), dus als je het nog niet hebt gecontroleerd, doe dat dan nu. Als je meteen naar het functionele gedeelte wilt gaan, is dat ook goed!
Het spreekt voor zich dat vrijwel alles op het web op verschillende manieren kan worden gedaan? dus we gaan vandaag iets nieuws proberen, door je twee verschillende manieren te tonen om functionaliteit te bereiken met dit ontwerp. De eerste zal bij Tom Green zijn
In deze methode laat Tom Green zien hoe je de elementen die we in Photoshop hebben ontworpen, kunt gebruiken en ze volledig functionele elementen in Fireworks en Catalyst kunt maken. Ik zal het Tom van hier laten volgen:
In deze volgende methode laat ik je zien hoe je snel onze styling kunt maken met jQuery Themeroller. Laten we eerst bespreken waarom:
Ik ben een grote fan van het recyclen van mijn eigen code? maar ik ben een nog grotere fan van het vinden van codeergereedschappen die al door anderen voor mij zijn gemaakt (meestal meer ervaren) coders! Met zoveel voorgecodeerde tools die er zijn, is het bijna idioot om elk project als dit van nul te beginnen, tenzij je echt een goede reden hebt om wat tijd te verspillen.
Nu kunnen we erover twisten of het voor een webontwerper waardevol is om te leren hoe je vanaf nul kunt coderen (en ik zou antwoorden dat het inderdaad heel belangrijk is om te weten hoe dit allemaal werkt), maar dit is een geval waarin we slechts een eenvoudige gebruikersinterface-kit maken? dus ik ga ervan uit dat je wat basiskennis van HTML / CSS onder de riem hebt en dat je weet hoe je dit soort bestanden kunt openen en in een teksteditor kunt bewerken.
Als zodanig ga ik dit deel van de tutorial baseren op ThemeRoller - de officiële tool voor het maken van gebruikersinterfaces voor jQuery. Als je de gebruikersinterface van jQuery nog niet eerder hebt gebruikt, is dat helemaal goed, maar laat me uitleggen waarom we dit willen gebruiken in plaats van alleen de onbewerkte HTML / CSS:
Het spreekt voor zich, maar we gebruiken ThemeRoller alleen als een basis? we voegen onze eigen aangepaste tweaks toe zodra we een goed beginpunt hebben.
Waar beginnen we dan? We gaan de code meteen hard raken, maar laten we beginnen met de ThemeRoller-site door een skin te maken die dicht bij onze eigen stijl staat. De dingen waar we op letten, zijn:
ThemeRoller geeft ons slechts een beperkt aantal waarden die we vooraan kunnen bewerken (achtergrondkleur, randkleur, tekstkleur, enz.), Dus wat we in deze eerste stap willen doen is gewoon de basiskleurwaarden ingeven van ons ontwerp.
Misschien wil je je eigen kleuren gebruiken, maar wat ik uiteindelijk heb is dit (klik op de link om mijn waarden in actie te zien):
Vanaf hier hoeven we alleen het thema te downloaden dat we zojuist hebben gemaakt. Het "thema" is in feite gewoon een aangepast CSS-bestand (samen met een handvol afbeeldingen) dat, samen met de standaard jQuery-scripts, zal worden gebruikt om onze gebruikersinterfaces op maat te maken..
U kunt natuurlijk uw eigen kleurwaarden gebruiken, maar u kunt de download downloaden met de demo van hier.
Wat je er in essentie van krijgt: bekijk de ruwe demo. Het is een generieke HTML-pagina die is gegenereerd om de widgets weer te geven die we zojuist hebben gemaakt? vanaf hier kun je het vrij gemakkelijk in je eigen ontwerpen opnemen.
In deze laatste stap gaan we de aangepaste demo gebruiken die Themeroller ons heeft gegeven en deze naar onze eigen HTML-pagina verplaatsen. Dit is vrij eenvoudig, als je enige ervaring hebt met HTML - we beginnen om te beginnen met het verzamelen van de onbewerkte HTML die je nodig hebt voor je widget en deze in een nieuwe HTML-pagina te plaatsen die de juiste bestandsreferenties bevat (hieronder) om deze te gebruiken widgets zoals je wilt. De bestanden waarnaar u moet verwijzen in de HEAD-sectie van uw HTML-document zijn hier:
Onthoud dat als u alle Themeroller-bestanden in een andere aparte map plaatst om uw mapverwijzingen naar behoren aan te passen. In onze demo ziet het verwijzingsgedeelte er als volgt uit:
Elke UI-widget (dat wil zeggen: een accordeon of een schuifregelaar) heeft twee componenten die u moet onthouden:
Het HTML-deel is vrij eenvoudig - haal het gewoon uit het demo-HTML-bestand dat je hebt gedownload. U moet ook de "activerings" -scripts opnemen voor elk van de widgets die u ook wilt gebruiken. In ons geval ziet dit er zo uit:
Merk op hoe elke "widget" wordt geactiveerd met slechts een paar regels code? we schrijven er zelf niets van (hoewel geavanceerde jQuery-coders wel welkom zijn), maar we grijpen gewoon de scripts aan die de demo voor ons heeft opgeleverd.
De bovenstaande lijst geeft alleen de widgets weer die in de demo werden getoond? jQuery UI bevat nogal wat meer die hier niet worden getoond. Als we een andere widget zouden willen toevoegen, vinden we deze gewoon in de map "development-bundle / demoos" (van de themadownload) en halen we het bijbehorende script en de HTML daar vandaan.
De HTML voor een voortgangsbalk ziet er bijvoorbeeld als volgt uit:
En het activeringsscript dat we zouden toevoegen aan onze andere scripts ziet er als volgt uit:
Accentsconagua
// Voortgangsbar $ ("# voortgangsbalk"). Voortgangsbalk (waarde: 20); Laten we als laatste een draai geven aan een snel aangepast ontwerp dat ik samen heb gesmeed:
Whallah! Er is waarschijnlijk niets ergs aan de hand in termen van het ontwerp (het is bedoeld om gewoon een eenvoudige demo te zijn), maar we hebben nu met succes aangetoond dat we snel een reeks UI-elementen kunnen maken met Themeroller en ze naar een aangepast formaat kunnen verplaatsen HTML-pagina in slechts een paar snelle stappen.
Dit is slechts het startpunt van waar je zou kunnen gaan met dit? uiteraard, om ervoor te zorgen dat deze UI-elementen daadwerkelijk iets doen zoals het opslaan van gegevens of het verzenden van een webformulier, moet je extra codering integreren (die je veel tutorials over kunt lezen op onze zustersite Nettuts). Maar voor deze tutorial hebben we een snelle skin gecreëerd die we in verschillende projecten kunnen gebruiken.
Het is ook de moeite waard om op te merken dat als je niet 100% tevreden bent met de huid zoals het er nu uitziet, dat je nog verder kunt gaan door het aanpassen van het aangepaste thema .CSS-bestand waarnaar we verwezen hebben.
