Compilation massive d'outils de conception
Les concepteurs Web disposent d’une multitude d’outils à leur disposition, allant de l’organisation de leurs réflexions sur une conception particulière au débogage de la conception finale.
Mais avec autant d'outils disponibles, comment déterminez-vous lesquels sont vraiment utiles et lesquels vont simplement vous faire perdre votre temps?
Nous avons compilé une liste massive de certains des outils les meilleurs et les plus utiles pour les concepteurs Web .
Il est délibérément laissé de côté la liste des outils communs que la plupart des concepteurs utilisent probablement déjà (comme Dreamweaver ou Panic, Coda, Photoshop ou GIMP, et des logiciels communs similaires que chaque concepteur possède déjà dans sa boîte à outils).
Ce sont des outils qui vous font gagner du temps, qui vous permettent de concevoir plus efficacement, de simplifier ou d’accélérer votre processus de conception ou de vous simplifier la vie.
Compilation des outils hors ligne
La plupart des analyses des outils de conception Web utiles se concentrent uniquement sur les outils en ligne.
Mais il existe quelques outils très utiles que vous pouvez utiliser pour ouvrir vos options en matière de conception. Ces choses peuvent faciliter certaines tâches, y compris travailler avec des clients indécis.
Tablettes graphiques
Les tablettes graphiques (également appelées parfois tablettes de dessin, tablettes graphiques ou tablettes de numérisation) constituent un outil extrêmement utile dans l'arsenal du concepteur de sites Web. Bien que la plupart des concepteurs puissent dessiner habilement avec une souris, une tablette le rend beaucoup plus facile et plus rapide.
La plupart des tablettes se composent de deux parties de base: la tablette elle-même et le stylet. Beaucoup viennent aussi avec une rondelle (qui fonctionne de la même manière qu'une souris, mais sur la tablette plutôt que sur un tapis de souris ou sur votre bureau). La principale considération pour la tablette est la taille, tandis que la principale considération du stylo est la sensibilité à la pression.
Les comprimés eux-mêmes sont disponibles dans des tailles allant d’environ 4 "x 5" à 19 "x 13". Bien sûr, plus la tablette est grande, plus elle sera chère. Dans la plupart des cas, les concepteurs Web peuvent se débrouiller avec des tablettes de moindre envergure, à moins qu'ils ne prévoient de faire beaucoup d'illustrations (et même alors, il est tout à fait possible d'obtenir des résultats de qualité avec une tablette de taille moyenne).
Et les tablettes plus petites sont plus portables, ce qui les rend pratiques pour les concepteurs qui ne veulent pas toujours être attachés à leur bureau.
Les stylos sont sensibles à la pression pour donner une expérience plus réaliste . Les sensibilités communes vont de 256 niveaux de pression à 2 048 niveaux. Plus le niveau de sensibilité est élevé, plus vous aurez l'impression d'utiliser un stylo et du papier.
Tablettes graphiques populaires
Wacom est probablement le fabricant de tablettes le plus populaire. Ils ont quatre gammes de produits différentes: Bamboo (qui comprend leurs produits Bamboo Craft et Bamboo Fun), destinés aux consommateurs et aux amateurs; Graphire, leur tablette Bluetooth; Intuos, leur ligne de milieu de gamme pour les professionnels de la création; et Cintiq, leur ligne haut de gamme qui intègre un moniteur dans la tablette pour une expérience «stylo à l'écran» (on dispose même d'un écran 21 pouces).
Aiptek fabrique une gamme de tablettes à faible coût qui ne coûtent que 50 dollars. Ils offrent une tablette USB de 12,1 pouces pour moins de 130 dollars (contre 469 dollars pour une tablette Wacom de taille comparable). L'offre la plus intéressante d'Aiptek, cependant, est leur My Note Premium (170 $ US) qui vous permet de dessiner sur un morceau de papier au-dessus de la tablette avec un véritable stylo et d'enregistrer tout ce que vous faites. Il y a suffisamment de mémoire pour un maximum de 100 pages écrites et un lecteur de carte SD pour étendre sa capacité. Et si vous souhaitez l'utiliser uniquement pour prendre des notes lors d'une réunion, vous pouvez utiliser 4 piles AAA, ce qui signifie que vous n'aurez pas à emporter votre ordinateur portable avec vous.
UC-Logic est l'autre grand fabricant de tablettes graphiques. Leurs produits se situent dans la fourchette des prix des tablettes, avec une tablette de 9 "x12" (la PF1209-Pro) se situant autour de 250 dollars US. Ils ont des tablettes disponibles à partir de seulement US $ 40.
Conseils d'humeur
Les cartes d'humeur (également appelées cartes d'inspiration) sont un excellent outil pour les concepteurs qui travaillent avec des clients qui n'ont peut-être pas une idée précise de ce qu'ils veulent.
Les tableaux d'humeur prennent souvent la forme d'un collage comprenant des éléments de conception pour le projet. Des exemples d’éléments inclus peuvent être des échantillons de typographie, des schémas de couleurs, des exemples graphiques spécifiques ou des éléments d’ambiance généraux qui reflètent la vision du concepteur quant à l’impression que le site doit donner aux visiteurs.
Les tableaux d'ambiance sont souvent utilisés dans le domaine du design d'intérieur pour montrer aux clients des idées pour redécorer une pièce ou une maison entière. Ils sont également utilisés dans l'industrie de la mode pour servir d'inspiration et de direction à une ligne ou à une saison. Mais ils sont tout aussi précieux pour les concepteurs graphiques et Web.
Selon le type de client avec lequel vous travaillez, vous pouvez créer un collage en vrac avec des échantillons se chevauchant de manière organique . Si votre client est dans un domaine créatif ou familiarisé avec le processus de création, ce type de tableau d’humeur peut très bien fonctionner.
Si votre client, par contre, est habitué à un environnement plus institutionnel ou formel, la création d'un tableau de bord plus organisé est probablement plus appropriée.
Utilisez des en-têtes pour différencier le jeu de couleurs, les éléments de conception spécifiques, la typographie et les autres parties de votre tableau d'humeur afin de structurer l'ensemble.
Si vous avez plusieurs idées de directions à suivre pour créer un projet, la création de différentes cartes d'humeur peut être un excellent moyen de recueillir les commentaires des clients et d'affiner vos propres idées.
Créer deux ou trois exemples différents pour montrer à un client qu'il peut être utile pour obtenir des directives supplémentaires de votre client sans passer des heures ou des jours sur une maquette de site pour se faire dire qu'il n'a rien à voir avec ce qu'il recherche.
Et c'est vraiment le principal avantage de l'utilisation de cartes d'humeur dans votre processus de conception. Un tableau d'humeur prend généralement beaucoup moins de temps à créer qu'une maquette de site .
L'utilisation de cartes d'humeur pour obtenir des commentaires supplémentaires d'un client indécis ou non sécurisé avant de consacrer des heures à une conception qui ne sera que rejetée rend tout le monde plus heureux.
Ressources pour créer vos propres Moodboards
Nous avons publié un article sur Pourquoi Mood Boards Matter à la fin de l'année dernière. L'article aborde les bases de la création de tableaux d'humeur et explique pourquoi vous souhaitez les utiliser. C'est un bon point de départ.
Du canapé a un tutoriel vidéo appelé Créer un conseil d'humeur efficace . Il dure environ sept minutes et couvre les bases de la création d'un tableau d'humeur numérique pour les projets.
Flickr a un Planches d'inspiration pool qui recueille des images de tableaux de bord et d'inspiration parmi plusieurs disciplines de design. C'est un bon endroit pour trouver de l'inspiration ou simplement pour voir des exemples de la façon dont les autres abordent leurs tableaux d'humeur.
Compilation des outils en ligne
Les outils de conception de sites Web en ligne sont à la pelle. Le fait de les parcourir pour trouver ceux qui se démarquent vraiment peut sembler prendre plus de temps que vous ne pourriez l’espérer en les utilisant.
Mais ci-dessous, nous avons trouvé les meilleurs outils pour la typographie, CSS, AJAX et Javascript, la sélection des couleurs et les outils pour faciliter la création d'éléments de page individuels.
Encore une fois, ce sont quelques-uns des meilleurs outils disponibles pour ce qu'ils font, vous n'aurez donc pas à perdre beaucoup de temps à tester des dizaines d'outils différents.
Outils de typographie
Il existe de nombreux outils en ligne pour expérimenter la typographie sur les conceptions de votre site Web. Certains vous permettent de comparer différentes polices de caractères côte à côte. Certains vous permettent seulement de goûter un style à la fois. Et d'autres encore vous montrent différentes piles de polices recommandées.
D'autres outils de typographie Web utiles incluent des applications pour convertir des tailles de pixel en unités em et une variété de Lorem Ipsum et d'autres générateurs de texte factices. En tout, il existe des outils de typographie pour tous les besoins d’un concepteur Web.
Typetester
Typetester vous permet de comparer jusqu'à trois polices côte à côte .
Vous pouvez sélectionner n'importe quelle police à partir de votre propre ordinateur ou utiliser des polices de leur menu contenant des polices système communes et des polices Web sécurisées. Il vous permet également de modifier la couleur, le début, le suivi, la taille et d’autres options de style.
C'est un excellent outil lorsque vous essayez de décider quelles polices utiliser pour différents éléments ou même pour compiler vos propres piles de polices (car il vous permet de comparer de nombreuses polices côte à côte).
Type de CSS défini
CSS Type Set vous permet de coller le texte que vous souhaitez modifier dans une boîte, d'ajuster les curseurs et de choisir d'autres options de mise en forme, puis de copier le CSS généré.
C'est un moyen simple et rapide de formater le texte dont vous avez besoin, des paragraphes aux balises de tête.
Les options incluent la couleur du texte, le début, le suivi, le décalage de la ligne de base, les décorations de texte, l'alignement, etc.
De meilleures piles de polices CSS
Bien que n'étant pas un outil traditionnel en soi, cet article offre un certain nombre d'alternatives aux piles de polices standard généralement utilisées en CSS.
En plus d'offrir des directives pour créer vos propres piles de polices, cet article fournit également une grande variété de piles d'échantillons que vous pouvez utiliser . Une excellente ressource lorsque vous vous sentez un peu déconcerté par vos options de typographie.
HTML-Ipsum
La plupart des générateurs standard Lorem Ipsum en ligne vous donnent un bloc de texte et rien de plus. Et c'est génial si vous essayez juste de remplir un peu de place.
Mais HTML-Ipsum vous donne du texte qui a déjà été marqué avec des balises HTML de base (paragraphe, tête, listes non ordonnées, etc.) pour que vous puissiez voir comment les différents éléments interagissent les uns avec les autres. C'est un énorme gain de temps.
PXtoEm.com
PXtoEM.com fait exactement ce qu’il dit: il convertit les polices de taille pixel en polices de taille em .
Les options qu'il offre sont ce qui en fait un outil vraiment impressionnant et flexible.
Vous pouvez choisir la taille de police du corps de base et obtenir des conversions en fonction de la taille de police par défaut de votre navigateur (par exemple, si vous définissez votre pourcentage de police de base à 62,5% pour une taille de 10 pixels égale à 1em) votre taille par défaut).
Typechart
Typechart vous permet de parcourir diverses polices Web et d’afficher leur apparence sur les systèmes Windows et Mac .
Vous pouvez trouver des polices en fonction de leur taille, qu'elles soient serif ou sans-serif ou accentuées. Il ne comprend que des polices Web, de sorte que les options proposées sont limitées. Mais pour la typographie de base, c'est un excellent outil qui peut fournir beaucoup d'inspiration.
Et vous pouvez copier et coller le CSS pour chaque style sans quitter la page.
Retournement typique
Flipping Typical vous permet de visualiser les polices courantes de votre ordinateur dans un format de grille pour faciliter le choix de la police adaptée à votre projet actuel.
C'est un excellent outil lorsque vous ne souhaitez pas utiliser uniquement les polices standard Web et que vous souhaitez voir plus d'options.
C'est particulièrement utile si vous ne voulez pas parcourir quelques centaines de polices installées sur votre ordinateur et que vous souhaitez simplement voir les plus populaires.
Outils CSS
CSS est presque aussi important dans la conception de sites Web que HTML. Et il existe des centaines d'outils pour rendre votre CSS plus propre, plus léger, plus efficace et généralement meilleur, ce qui vous permet d'économiser le temps et les efforts nécessaires pour perfectionner manuellement vos feuilles de style.
La compression de vos feuilles de style, qui peut accélérer le temps de chargement de vos sites, est simplifiée grâce à un outil en ligne automatique. Des outils sont également disponibles pour éliminer les déclarations en double.
Les feuilles de triche vous permettent de garder à portée de main les éléments de base du CSS lorsque le café n’a pas encore démarré le matin et que vous avez du mal à vous souvenir de l’ordre dans lequel votre balisage doit être écrit.
Alors que la plupart de ces outils font un excellent travail pour nettoyer votre CSS, assurez-vous de toujours conserver une sauvegarde de votre original et de tester le produit final généré. Parfois, un nettoyeur ou un compresseur enlèvera quelque chose qui était nécessaire après tout, brisant votre site.
CSS SuperScrub
CSS SuperScrub vise à réduire considérablement la complexité et la taille de vos feuilles de style .
Il supprime les appels redondants, supprime les contenus inutiles et regroupe les éléments restants pour faciliter la modification ultérieure.
Il y a quelques options, y compris une pour supprimer tout l'espace dans votre feuille de style ou pour insérer une nouvelle ligne avant d'ouvrir les accolades.
Code Embellisseur
Code Beautifier optimise et nettoie vos fichiers CSS .
Il offre un grand nombre d'options pour formater votre texte, notamment la compression des couleurs, le tri de vos propriétés, la conversion de tous vos sélecteurs en minuscules, la conversion de vos propriétés en majuscules ou minuscules et le niveau de compression à utiliser.
Vous pouvez soit copier et coller votre CSS dans l'application, soit fournir une URL pour votre fichier CSS.
CSS Drive
CSS Drive est un compresseur CSS de base .
Vous pouvez définir la compression que vous souhaitez que votre CSS soit (légère, normale ou super compacte) et comment vous souhaitez qu’elle gère les commentaires (qu’il s’agisse de les supprimer ou non).
Il existe également un mode avancé qui vous offre beaucoup plus d'options, notamment en supprimant des espaces autour de certains caractères, en supprimant des onglets, en supprimant de nouvelles lignes, etc.
Vérificateur de redondance CSS
Parfois, lors de la conception d'un site, vous pouvez configurer des sélecteurs CSS qui ne sont pas intégrés au balisage final.
Ces sélecteurs ne font que rendre vos feuilles de style plus volumineuses et plus difficiles à éditer plus tard.
Le vérificateur de redondance CSS parcourt votre feuille de style et chacune de vos pages HTML pour voir quels sélecteurs ne sont pas utilisés, puis les supprime .
C'est un excellent outil à utiliser si vous pensez avoir des sélecteurs inutiles dans vos feuilles de style.
Index de propriété CSS
L'index des propriétés CSS répertorie chaque propriété CSS par ordre alphabétique .
En cliquant sur l'une des propriétés incluses, vous accédez à une définition et à des informations sur la valeur par défaut, les valeurs autorisées et l'héritage d'une propriété parente.
Guide de raccourci CSS
L'utilisation de propriétés CSS abrégées réduit la taille de vos fichiers CSS par rapport aux propriétés longues .
Mais se souvenir de l'ordre dans lequel les différents éléments entrent dans toutes les différentes propriétés peut être un casse-tête, en particulier pour ceux que vous n'utilisez peut-être pas dans chaque dessin que vous faites.
Il inclut également des informations sur les valeurs de propriété par défaut. Par conséquent, si vous choisissez de supprimer une propriété, vous saurez quelle sera sa valeur.
Outils de couleur
Choisir les bonnes couleurs pour la conception de votre site Web peut être l'une des décisions les plus importantes que vous prenez dans le processus de conception.
Parfois, nous arrivons à un design avec un jeu de couleurs prédéfini (comme lorsqu'un client a déjà établi des couleurs de marque) ou nous savons immédiatement quelles couleurs nous voulons utiliser. D'autres fois, nous pourrions être libres de créer notre propre palette pour le design.
Si vous créez un jeu de couleurs à partir de zéro, les générateurs de palette de couleurs et les galeries peuvent vous aider énormément.
Si vous avez déjà un schéma de couleurs, vous devez prendre en compte d'autres considérations, telles que l'accessibilité et les couleurs à utiliser sur les différentes parties du site.
Mais il existe également des outils pour aider à prendre ces décisions. Vous trouverez ci-dessous certains des meilleurs outils disponibles pour gérer les schémas de couleurs.
Filtre de page Web Colorblind
Considérant que quelque 7 à 10% de la population masculine présente un certain degré de daltonisme (selon Wikipédia ), s’assurer que vos sites sont toujours accessibles à cette population n’est pas une mauvaise idée.
Cet outil vous montre comment vos conceptions apparaîtront aux personnes ayant un certain nombre de troubles de daltonisme. Vous pouvez afficher les résultats pour l'ensemble de votre site ou exclure des images du résultat.
Ils fournissent également un lien vers un outil de sélection de couleur sans couleur.
Trouvez des couleurs assorties pour votre site Web
Cet outil de palette de couleurs trouve les couleurs qui correspondent à toutes les couleurs que vous sélectionnez .
Vous pouvez choisir une couleur parmi leurs options prédéfinies ou entrer une valeur de couleur hexadécimale ou RVB pour obtenir des palettes de coordination basées sur des palettes de couleurs complémentaires, fractionnées, triées, tétrade, analogiques ou monotones complémentaires.
Les couleurs fournies sont toutes similaires en intensité, ce qui signifie que ce n'est vraiment qu'un point de départ pour créer des palettes de couleurs pour vos conceptions.
Générateur de palette de couleurs
Les photos sont d'excellents endroits pour chercher l'inspiration du design. Cet outil peut créer une palette de couleurs à partir de n'importe quelle image que vous choisissez (entrez simplement l'URL de l'image).
Il fournit des schémas de couleurs à la fois terne et dynamique basés sur l'image que vous fournissez.
Pouvoir utiliser n'importe quelle image en ligne rend cet outil précieux, car il évite d'avoir à télécharger une image puis à le télécharger sur un site comme celui-ci pour générer un jeu de couleurs (ou le télécharger puis l'ouvrir dans un programme graphique pour créer manuellement une palette de couleurs).
Kuler
La galerie de palette de couleurs d'Adobe Kuler est l' une des meilleures galeries de palette de couleurs .
Vous pouvez parcourir ou rechercher plus de 10 000 palettes de couleurs soumises par les utilisateurs de Kuler, puis télécharger ou enregistrer vos favoris pour une référence ultérieure.
Kuler comprend également un outil de création de palette très puissant qui vous permet de sélectionner des couleurs avec des curseurs ou basées sur les valeurs de couleur HSV, RGB, CMYK, LAB ou hex.
Si vous définissez une couleur quelconque comme couleur de base, les couleurs environnantes seront alors complétées.
COULEURS
COLOURlovers est une autre grande galerie de couleurs .
Vous pouvez rechercher plus de 800 000 schémas de couleurs (basés sur 20 schémas par page et plus de 43 200 pages de schémas). Outre les palettes, vous pouvez également rechercher des couleurs et des motifs individuels à partir de palettes.
L'une des fonctionnalités les plus utiles de COLOUR, c'est son outil de création de motifs, qui permet de créer vos propres motifs en fonction d'un schéma de couleurs prédéfini ou d'un modèle de couleurs créé à la volée.
Assurez-vous simplement de contacter le détenteur du droit d'auteur du motif si vous souhaitez l'utiliser pour un travail commercial.
100 couleurs aléatoires 2.0
Si vous ne savez vraiment pas par où commencer avec la palette de couleurs de l'un de vos modèles, 100 Random Colors 2.0 pourrait être l'outil idéal.
Il fait exactement ce que le nom dit: vous présente 100 couleurs aléatoires, y compris leurs valeurs hexadécimales .
Et si vous ne trouvez rien dans les 100 premiers, vous pouvez simplement cliquer sur Actualiser et recevoir un nouvel ensemble!
Outils d'élément individuels
De nombreux générateurs permettent de créer rapidement et facilement des boutons, des arrière-plans, des formulaires et d’autres éléments de conception pour vos sites.
Certains d'entre eux ne sont que des trucs, mais d'autres sont très utiles si vous voulez simplement créer rapidement quelque chose comme un bouton Web 2.0-ish ou un fond rayé de base.
Les outils de création de formulaires peuvent également être très utiles, en particulier si vous souhaitez que vos clients puissent effectuer certains de leurs travaux administratifs sur leurs formulaires.
Je connais au moins deux concepteurs qui utilisent ces outils afin de ne pas avoir à créer une interface personnalisée simplifiée pour accéder à la base de données de formulaires ou pour éditer des formulaires pour leurs clients. Ils permettent de gagner beaucoup de temps, en particulier pour la construction de formulaires plus complexes.
Wufoo
Wufoo est un générateur de formulaires HTML qui propose plus de 80 modèles de formulaires et jeux de couleurs, tout en vous permettant de contrôler entièrement la création de formulaires personnalisés pour vos clients.
Les modèles facilitent et accélèrent la création de formulaires Web standard (comme les pages d'inscription ou les formulaires de contact).
Les formulaires soumis sont automatiquement collectés dans une base de données qui permet aux clients d'imprimer, d'envoyer par courrier électronique des entrées individuelles, de filtrer, de rechercher et d'effectuer d'autres fonctions avancées sans avoir à créer une interface personnalisée.
Vous pouvez même utiliser Wufoo pour créer des formulaires de commande en ligne et les intégrer à Authorize.net, PayPal ou Google Checkout.
BgPatterns
BgPatterns vous permet de créer des motifs en mosaïque en utilisant une grande variété d'éléments répétitifs différents.
Vous pouvez sélectionner la couleur d'arrière-plan, la texture du canevas et l'angle du motif. Vous pouvez appliquer les arrière-plans que vous avez créés au site BgPatterns pour prévisualiser, puis télécharger l'image une fois que vous l'avez finalisée.
Vous pouvez également parcourir les modèles créés par d'autres. C'est le moyen le plus rapide et le plus simple de créer des arrière-plans simples et carrelés.
Stripe Generator 2.0
Créer des bandes répétées pour un site Web prend du temps.
Bien sûr, vous pouvez créer des modèles pour des bandes communes que vous pourriez utiliser, mais que se passe-t-il si vous souhaitez une bande de broches pour un projet, une bande large pour un autre et un angle impair pour un autre? Bientôt, ces modèles ne semblent tout simplement plus le couper.
Le Stripe Generator 2.0 offre des bandes à divers angles , dans la largeur de votre choix, avec ou sans ombres et dégradés , et en utilisant toutes les couleurs hexadécimales souhaitées.
Ils comprennent également une galerie de bandes où vous pouvez voir ce que les autres ont construit.
Tartan Maker
Si la création d'arrière-plans rayés prend du temps, la création d' arrière-plans à carreaux est un énorme casse-tête.
C'est là qu'intervient Tartan Maker. Sélectionnez la taille du fil, les couleurs de votre motif et l'angle et le crée automatiquement.
Vous pouvez prévisualiser vos conceptions en plein écran, puis télécharger le fichier.
Contexte de Pixelknete
Ce générateur d'arrière-plan crée un arrière-plan pointillé moderne avec des points progressivement plus petits au fur et à mesure qu'ils avancent dans la page.
Vous pouvez sélectionner jusqu'à deux couleurs de point et deux couleurs pour un arrière-plan dégradé (ou une seule couleur pour un arrière-plan uni).
Vous pouvez également spécifier la hauteur du motif (la valeur par défaut est 700 pixels). L'arrière-plan créé se répète sur un axe horizontal.
Comme générateur de bouton
Si vous ignorez le texte mal traduit sur cette page, vous verrez que c'est l'un des générateurs de boutons les plus fluides disponibles . Ajoutez du texte, des dégradés différents, des rayures, des images et plus encore à vos boutons.
Vous pouvez sélectionner les couleurs du bouton et de la bordure, la taille globale (à l'aide des curseurs ou des champs de texte) et l'épaisseur des bordures, ainsi que la forme arrondie du bouton.
Si vous incluez des rayures, vous disposez de nombreuses options, notamment la couleur, la transparence, l’épaisseur, l’espace entre les rayures et l’angle.
C'est certainement le générateur de boutons le plus complet du marché.
Button Maker
Ce générateur de bouton vous permet de créer facilement des boutons bicolores de 80 × 15 pixels .
Sélectionnez les couleurs des boutons, les couleurs des bordures, la division entre les cases et entrez le texte de chaque côté, et c'est tout!
Il s’agit de l’un de ces outils qui ne contient pas de fonctionnalités, mais qui fait ce qu’il a été conçu pour fonctionner parfaitement et de manière transparente.
Outils AJAX et JavaScript
Nous savons tous qu'Ajax peut ajouter une tonne de fonctionnalités à votre site. Que vous souhaitiez ajouter une simple galerie d'images, un formulaire de contact interactif ou créer une application Web complète , Ajax est là pour vous aider.
Mais partir de zéro peut être intimidant, surtout si vous êtes relativement nouveau à Ajax. Et même si vous vous considérez comme un professionnel, commencer par une liste vierge pour chacun de vos projets peut prendre du temps.
Il existe de nombreux outils pour accélérer votre développement Ajax. Des collections de scripts aux frameworks, en passant par les générateurs d'éléments spécifiques, les outils ci-dessous sont susceptibles de vous aider à devenir un développeur plus efficace.
Ajaxload
Ajaxload est un générateur pour créer des icônes de chargeur Ajax . Il y a une tonne d'icônes différentes à choisir.
Il suffit de définir les couleurs de premier plan et d’arrière-plan (ou de choisir un arrière-plan transparent), puis de télécharger le script généré.
Rapide et facile mais cela vous permet d'économiser quelques minutes (ou plus) de codage!
Mini AJAX
Mini Ajax est une galerie de scripts téléchargeables Ajax et DHTML .
Il comprend tout, des fenêtres modales aux diaporamas en passant par les scripts plus avancés (comme les calendriers et les outils de gestion de projet entiers).
C'est un excellent point de départ pour trouver des éléments Ajax individuels ou même simplement pour avoir de l'inspiration.
Il y a des démos disponibles pour beaucoup de scripts et toutes sont téléchargeables à partir de leurs sources originales.
MooTools
MooTools est un framework JavaScript orienté objet . Ce n'est certainement pas conçu pour les débutants, mais peut vous permettre d'écrire des applications Ajax flexibles et puissantes compatibles avec tous les navigateurs.
Il est également conforme aux normes et incroyablement bien documenté.
En plus du constructeur principal, il y a aussi une tonne de plugins disponibles. MooTools peut être utilisé pour créer tout, des galeries d'images simples aux interfaces utilisateur complètes.
jQuery
jQuery est une bibliothèque JavaScript qui simplifie une variété de fonctions JavaScript .
Une des meilleures parties de cet outil particulier est le nombre de plug-ins déjà disponibles pour jQuery.
Il existe des plugins prêts à l'emploi pour tout, des animations simples aux formulaires, en passant par les widgets et les éléments d'interface utilisateur avancés.
Il existe probablement déjà un plugin conçu pour pratiquement tout ce que vous pouvez faire avec JavaScript ou Ajax, ou au moins un élément à utiliser comme base pour créer le vôtre.
Script.aculo.us
Script.aculo.us est une bibliothèque d'interface utilisateur JavaScript qui inclut un framework d'animation, des contrôles Ajax, des utilitaires DOM, etc.
Il est utilisé par Apple, CNN, Basecamp et Ruby on Rails. Il est construit sur le cadre prototype.
Il existe une documentation complète dans le wiki Script.aculo.us, ce qui facilite son démarrage.
Outil de compression JavaScript en ligne
La compression de vos fichiers JavaScript leur permet de charger plus rapidement, de consommer moins de bande passante et de prendre moins de place sur votre serveur. Cet outil facilite la compression.
Copiez et collez simplement vos fichiers JS (ou téléchargez-les) dans cet outil, puis sélectionnez si vous souhaitez compresser à l'aide de Minify ou de Packer.
Il crache automatiquement du code plus propre et plus efficace. Assurez-vous de bien tester les résultats et conservez toujours une sauvegarde de votre fichier original.
JavaScript Embellisseur
Si votre JavaScript est un peu plus compliqué que vous ne le voudriez (ou presque impossible à déchiffrer parce qu'il est trop mal formaté), lancez-le pour obtenir des scripts propres, nets et cohérents , plus faciles à lire et à éditer ultérieurement .
Les paramètres utilisés sont minimes, mais vous pouvez choisir le nombre d'espaces à utiliser pour les retraits, pour détecter les compresseurs et pour préserver les sauts de ligne.
Encore une fois, assurez-vous de tester le code final et gardez une sauvegarde à portée de main en cas de problème dans votre code nouvellement embelli.
BrowserShots
Malheureusement, les différents navigateurs affichent des sites légèrement différents. Cela peut être un casse-tête énorme, surtout si vos clients utilisent un navigateur et que vous en utilisez un complètement différent.
S'ils voient des choses qui n'apparaissent pas de votre côté (ou vice versa), cela peut créer des problèmes des deux côtés.
Vous pouvez toujours installer plusieurs navigateurs sur votre ordinateur, mais a) un espace disque insuffisant et b) qu'en est-il des navigateurs qui ne sont pas disponibles pour votre système d'exploitation? C'est là que BrowserShots entre.
Vous pouvez choisir parmi pratiquement tous les principaux navigateurs existants, y compris les navigateurs obscurs comme Minefield et Epiphany.
BrowserShots affiche des captures d'écran des navigateurs que vous avez choisis , de sorte que vous pouvez choisir autant que vous le souhaitez.
Rappelez-vous simplement que plus vous choisissez de tester les navigateurs, plus cela prendra de temps. La façon dont BrowserShots est configuré, cependant, vous pouvez simplement mettre la page en signet et revenir plus tard pour voir vos résultats.
Pyromane
Aucune liste d'outils de conception Web ne serait complète sans mentionner le plugin Firefox Firebug .
Souvent considéré comme l'outil le plus précieux de l'arsenal d'un concepteur , Firebug facilite le débogage et l'édition de votre code (que ce soit JavaScript, CSS ou HTML).
Vous pouvez modifier votre CSS directement dans votre navigateur. Visualisez la façon dont vos boîtes CSS sont alignées. Modifier n'importe quel élément de votre page directement dans votre navigateur.
Déboguer votre JavaScript et trouver les erreurs plus rapidement. Et cela ne fait que gratter la surface de ce que Firebug peut faire.
C'est vraiment un outil indispensable pour tous les designers. Une fois que vous l'utiliserez, vous vous demanderez comment vous avez pu vous en passer.
Compilé exclusivement pour WDD par Cameron Chapman.
Quels outils utilisez-vous le plus? Quels autres outils utilisez-vous que nous avons pu manquer?