Share
La semaine dernière, nous avons examiné comment créer un kit d'interface utilisateur simple dans Photoshop afin d'accélérer le travail dans certains de vos projets de conception Web. Nous avons reçu beaucoup de demandes sur la manière de rendre les éléments fonctionnels, alors sans plus attendre, voici le tutoriel de suivi que vous avez demandé!
Ce tutoriel est basé sur la session de conception que nous avons décrite dans ce post précédent (qui inclut un fichier PSD gratuit). Si vous ne l'avez pas extrait, continuez et faites-le maintenant. Si vous voulez passer directement à la partie fonctionnelle, c'est bien aussi!
Il va sans dire que quasiment tout sur le Web peut être fait de différentes manières. Nous allons donc essayer quelque chose d'un peu nouveau aujourd'hui en vous montrant deux manières différentes d'obtenir des fonctionnalités avec ce design. Le premier va être avec Tom Green
Dans cette méthode, Tom Green va vous montrer comment utiliser les éléments que nous avons conçus dans Photoshop et en faire des éléments entièrement fonctionnels dans Fireworks et Catalyst. Je laisserai Tom le prendre d'ici:
Dans cette méthode, je vais vous montrer comment créer rapidement notre style à l'aide de jQuery Themeroller. Tout d'abord, discutons pourquoi:
Je suis un grand fan du recyclage de mon propre code? mais je suis encore plus fan de la recherche d’outils de codage qui ont déjà été créés pour moi par d’autres (généralement plus expérimenté) codeurs! En fait, avec autant d'outils pré-codés, il est presque ridicule de démarrer un tel projet à partir de zéro, à moins que vous n'ayez vraiment une bonne raison de perdre du temps..
Maintenant, on peut se demander s’il est utile ou non pour un concepteur web d’apprendre à coder à partir de rien (et je répondrais qu'il est en effet très important de savoir comment tout ça fonctionne), mais c’est un cas où nous venons de créer un simple kit d’interface utilisateur? Je vais donc supposer que vous avez des connaissances de base en HTML / CSS et que vous saurez comment ouvrir ces types de fichiers et les éditer dans un éditeur de texte..
En tant que tel, je vais baser cette partie du didacticiel sur ThemeRoller, l’outil officiel de création d’interface utilisateur jQuery. Si vous n'avez jamais utilisé l'interface utilisateur jQuery auparavant, c'est très bien, mais laissez-moi vous expliquer pourquoi nous voulons utiliser ceci au lieu du code HTML / CSS brut:
Cela va sans dire, mais nous utiliserons uniquement ThemeRoller comme base? nous ajouterons nos propres modifications de style une fois que nous aurons un bon point de départ.
Alors, par où commençons-nous? Nous allons frapper fort dans le code dans une minute, mais commençons sur le site ThemeRoller en créant un skin proche de notre propre style. Les choses sur lesquelles nous voudrons faire attention sont:
ThemeRoller ne nous donne qu'un nombre limité de valeurs que nous pouvons modifier au préalable (couleur d'arrière-plan, couleur de bordure, couleur de texte, etc.), de sorte que ce que nous voulons faire dans cette étape initiale est simplement d'entrer les valeurs de couleur de base de notre conception..
Vous voudrez peut-être utiliser vos propres couleurs, mais voici ce que j'ai obtenu (cliquez sur le lien pour voir mes valeurs en action):
À partir de là, il suffit de télécharger le thème que nous venons de créer. Le "thème" est fondamentalement juste un fichier CSS personnalisé (avec une poignée d'images) qui sera utilisé, avec les scripts jQuery de base, pour créer nos éléments d'interface utilisateur de style personnalisé.
Vous pouvez évidemment utiliser vos propres valeurs de couleur, mais n'hésitez pas à télécharger le téléchargement à l'aide de la démonstration ci-dessous..
Qu'est-ce que vous obtenez essentiellement ceci: voir la démo brute. C'est une page HTML générique qui a été générée pour afficher les widgets que nous venons de créer? à partir de là, vous pouvez l'intégrer assez facilement à vos propres conceptions.
Dans cette dernière étape, nous allons prendre la démonstration personnalisée fournie par Themeroller et la transférer dans notre propre page HTML. Si vous connaissez le langage HTML, c’est assez simple. Nous allons commencer par saisir le code HTML brut dont vous avez besoin pour votre widget et le déposer dans une nouvelle page HTML contenant les références de fichier appropriées (ci-dessous) pour les utiliser. widgets à votre guise. Les fichiers que vous devez référencer dans la section HEAD de votre document HTML sont ici:
N'oubliez pas que si vous placez tous les fichiers de Themeroller dans un autre dossier séparé, vous pourrez ajuster les références de dossier de manière appropriée. Dans notre démo, la section de référence ressemble à ceci:
Chaque widget d'interface utilisateur (c'est-à-dire: un accordéon ou un curseur) comporte deux composants dont vous devez vous rappeler:
La partie HTML est assez simple - il suffit de la récupérer dans le fichier HTML de démonstration que vous avez téléchargé. Vous devrez cependant inclure les scripts "d'activation" pour chacun des widgets que vous souhaitez utiliser. Dans notre cas, cela ressemble à ceci:
Remarquez comment chaque "widget" est activé avec seulement quelques lignes de code? nous n'écrivons rien de cela nous-mêmes (bien que les codeurs avancés de jQuery le soient bien), nous prenons simplement les scripts fournis par la démo.
La liste ci-dessus ne représente que les widgets affichés dans la démo. L'interface utilisateur de jQuery en inclut quelques-unes qui ne sont pas présentées ici. Si nous voulions ajouter un autre widget, nous le trouverions simplement dans le dossier "development-bundle / demos" (à partir du téléchargement du thème) et récupèrerions le script et le code HTML correspondants..
Par exemple, le code HTML d'une barre de progression ressemble à ceci:
Et le script d'activation que nous ajouterions à nos autres scripts ressemble à ceci:
Accentsconagua
// Progressbar $ ("# progressbar"). Progressbar (valeur: 20); Enfin, prenons ceci pour un tour dans une conception personnalisée rapide que je fouettais ensemble:
Whallah! Il n’ya probablement rien d’édifiant en termes de conception (il ne s’agit que d’une simple démo), mais nous avons maintenant démontré avec succès que nous pouvons rapidement créer un ensemble d’interfaces personnalisées à l’aide de Themeroller et les transférer dans un environnement personnalisé. Page HTML en quelques étapes rapides.
Ceci est juste le point de départ de l'endroit où vous pourriez aller avec cela? Bien entendu, pour que ces éléments d'interface utilisateur stockent des données ou envoient un formulaire Web, vous devez intégrer un codage supplémentaire (que vous pouvez lire dans de nombreux tutoriels sur notre site soeur, Nettuts). Mais pour les besoins de ce didacticiel, nous avons créé un skin rapide que nous pouvons utiliser dans différents projets..
Il convient également de noter que si vous n'êtes pas satisfait à 100% de la peau telle qu'elle est actuellement, vous pouvez aller encore plus loin en modifiant le thème .CSS du fichier personnalisé que nous avons référencé..
