L'article d'aujourd'hui vous encourage à prendre l'habitude de consacrer du temps à de petites expériences. Tester des idées et résoudre des problèmes dans un environnement à basse pression et peut-être même amusant peut considérablement améliorer votre formation et déboucher sur une innovation impressionnante.
Nous allons commencer par quelques avantages et astuces pour expérimenter des projets de développement Web, pour finir par un survol de quelques outils que j’utilise personnellement pour composer mes propres expériences. Commençons!
Les avantages de l'expérimentation
L'expérimentation est une chose puissante. En fait, j’appellerais cela un élément absolument crucial de la formation continue de tout développeur web, que vous y soyez depuis dix jours ou dix ans. Toutes les connaissances en conception de sites Web dans le monde ne signifieront pas que vous êtes accroupi si vous ne sautez pas dedans et ne vous salissez pas les mains.
"Le meilleur moyen pour moi d'apprendre quelque chose dans ce domaine est de lancer un éditeur de texte et de tenter ma chance."Je lis régulièrement des livres de conception de sites Web et au moins, je parcoure, sinon consomme complètement plusieurs tutoriels de conception de sites Web quotidiennement. Ce sont d'excellentes ressources, cependant, le meilleur moyen pour moi d'apprendre quelque chose dans ce domaine est de lancer un éditeur de texte et de le tester moi-même.
La théorie et l'enseignement semblent occuper une place assez temporaire dans mon cerveau, mais un projet concret se creuse profondément dans ma mémoire à long terme. La raison est généralement assez simple: la frustration. La vérité est que j'échoue régulièrement lorsque j'essaie d'accomplir une idée ou une expérience spécifique. Le plus souvent, les choses ne fonctionnent pas aussi bien que je le pense et le résultat est que je reste assis et bricole avec un problème pendant des heures.
La frustration me défie. Une fois confronté à un problème que je ne peux pas résoudre immédiatement, je décide de le vaincre à tout prix. Le projet lui-même a peu ou pas d'importance, c'est le fait de régler des problèmes qui me force à élargir ma base de connaissances, ce qui est utile pour tous les projets futurs.
Conseils d'expérimentation
Avant de jeter un coup d'œil sur certains des outils que j'utilise personnellement pour casser rapidement mes idées, examinons quelques éléments fondamentaux à garder à l'esprit lorsque vous lancez vos propres expériences de développement Web.
Vous n'avez pas nécessairement besoin d'un objectif
Il est absolument utile d’avoir un objectif ou une destination à l’esprit lorsque vous manipulez du code, mais en réalité, vous ne devriez pas éviter cette pratique simplement parce que vous n’avez pas une idée géniale ou un dilemme.
Les écrivains s’engagent souvent dans cet exercice où ils se contentent de s’asseoir et d’écrire leurs pensées au fur et à mesure, c’est une bonne habitude à prendre et peut réellement générer de solides idées d’écriture. En tant que développeur, vous devriez essayer la même chose. Si vous vous ennuyez un après-midi et que vous avez trente minutes à perdre, commencez à coder pour voir où cela vous mènera. Cela peut sembler terriblement ennuyeux aux yeux des étrangers, mais croyez-moi, si vous êtes dans le bon métier, vous allez adorer chaque minute.
Creusez dans le code des autres
Vous n'avez pas à partir de zéro lorsque vous testez, l'un des meilleurs moyens absolus de découvrir de nouvelles techniques est de déchiffrer le code de quelqu'un d'autre pour voir ce qui le motive. Une fois que vous y êtes, ne vous contentez pas de naviguer, commencez à changer les choses et à commenter les sections pour voir comment la page répond. Rappelez-vous toujours de demander "pourquoi" quand tu vois quelque chose que tu ne comprends pas!
Parmi les meilleurs endroits pour commencer, citons les frameworks prédéfinis et les plateaux chauffants tels que le Boilerplate HTML5. Ces types d’outils sont conçus pour faciliter la navigation. En plus d’être assez avancés, ils ont également tendance à être extrêmement bien documentés et organisés.
Oublier les règles
Lorsque vous codez un site Web professionnel, veillez à respecter votre comportement, avec un code sémantique valide et une compatibilité entre navigateurs. Cependant, lorsque vous expérimentez, n’hésitez pas à faire preuve de prudence et essayez tout ce qui vous passe par la tête.
Lors de la résolution d'un problème, il est important de savoir ce qui fonctionne et pourquoi, même si votre solution s'avère inacceptable dans un environnement Web en direct, elle peut vous aider à en atteindre un.
En outre, entre HTML5 et CSS3, il existe une multitude de nouvelles techniques qui n'attendent que vous pour que vous puissiez avoir une idée de la conception de sites Web à l'avenir. Beaucoup d'entre eux ne fonctionnent que sur deux navigateurs ou moins, mais cela ne veut pas dire que cela ne vaut pas la peine de creuser pour voir comment ils fonctionnent!
Une fois que vous avez terminé de créer votre monstre Web Frankenstein, exécutez-le à l'aide d'un outil de validation ou d'un outil de lintage pour obtenir des explications sur la raison pour laquelle il n'est pas correct et des suggestions pour le corriger.
Battre le tutoriel
Un didacticiel de création de sites Web semblable à ceux que vous voyez sur ce site et sur d’autres est un autre excellent catalyseur d’expérimentation. Lorsque vous en voyez une, parcourez-la et demandez-vous si la solution présentée est la meilleure.
Ne vous contentez pas de suivre les instructions sans réfléchir, réfléchissez à la manière dont vous pouvez améliorer le processus en réduisant les inefficacités. Les concurrents trouveront que, face à un adversaire que vous essayez de battre, vous serez entraîné beaucoup plus loin que vous ne le feriez normalement.
Outils d'expérimentation
Plutôt que de vous donner une liste énorme de ressources que vous devez trier pour trouver les véritables joyaux, j'ai décidé de réduire l'offre cette fois-ci et de ne présenter que les outils que j'utilise personnellement à des fins d'expérimentation.
Les outils ci-dessous ont un concept assez similaire, mais diffèrent suffisamment pour que je puisse les utiliser à des fins différentes. En les essayant et en ayant une idée de chacun d’entre eux, vous comprendrez ce que je veux dire.
Espresso pour Mac
Commençons par la seule ressource non libre de la liste. Espresso n'est pas simplement un outil d'expérimentation, c'est un IDE professionnel complet qui vous coûtera environ 80 $. Si vous êtes un concepteur web professionnel, cela vaut la peine.
Il existe un million de raisons pour lesquelles il est formidable de devenir votre environnement de codage principal, mais la principale raison pour laquelle il est bon pour expérimenter est la fenêtre de prévisualisation en direct. Au fur et à mesure que vous codez, l'aperçu HTML est mis à jour en temps réel sans actualisation manuelle.
Utilisez Divvy ou un outil similaire pour diviser votre écran en espace entre votre code et vos fenêtres d’aperçu. Vous disposez ainsi d’un flux de travail d’expérimentation imbattable. Un autre avantage impressionnant que vous ne trouverez souvent pas dans les outils en ligne gratuits est l'auto-complétion, ce qui vous fait vraiment gagner beaucoup de temps de frappe et vous permet de mener à bien ces expériences dans un tiers du temps.
Si vous êtes déjà un fan d’Espresso, consultez la version Espresso 2 de Kaboom!
CSSDesk
Vous voulez un environnement de codage qui met à jour en direct, mais ne vous coûtera pas un centime? Découvrez CSSDesk. Ce petit outil génial est composé de trois zones principales: CSS, HTML et preview. Lorsque vous codez dans le petit tiroir extensible sur le côté gauche de l'écran, l'aperçu de la droite est mis à jour en temps réel, ce qui en fait un moyen fantastique d'essayer rapidement toutes vos idées de conception Web.
CSSDesk est extrêmement utile et dispose de fonctionnalités vraiment géniales, notamment la possibilité de partager ou de télécharger vos créations. Une chose unique que je n'ai jamais vue ailleurs est la possibilité de personnaliser l'arrière-plan de vos expériences. C'est vraiment génial lorsque vous ne codez pas une page entière mais que vous voulez vous concentrer sur un seul élément.
Vous apprécierez également les avantages de la numérotation des lignes, de la mise en surbrillance du code et de la possibilité de masquer complètement le tiroir de code pour afficher votre expérience dans toute la taille de la fenêtre.
jsFiddle
jsFiddle ressemble beaucoup à CSSDesk, mais avec une amélioration substantielle de ses fonctionnalités (ce qui peut être un avantage ou un inconvénient pour une expérience simple). Pour commencer, comme son nom l'indique, JavaScript est ici particulièrement mis en avant. Cependant, vous n'avez pas à écrire une seule ligne de JavaScript pour que cela soit utile.
Dans jsFiddle, vous avez quatre zones redimensionnables, une pour HTML, CSS, JavaScript et un aperçu. Contrairement aux deux choix précédents, l'aperçu doit être mis à jour manuellement chaque fois que vous souhaitez l'afficher.
Une fonctionnalité géniale de jsFiddle est la possibilité de charger rapidement dans des bibliothèques JavaScript populaires telles que MooTools et jQuery. Vous pouvez également enregistrer, partager et modifier votre travail. Des boutons vous permettent de nettoyer votre code et de laisser des commentaires sur les expériences des autres.
J'aime beaucoup l'environnement CSSDesk, simple et efficace, mais jsFiddle est mon site de prédilection pour les expériences rapides. J'aime tout simplement cet outil et je ne saurais trop vous recommander de prendre l'habitude chaque semaine de prendre le temps de venir ici et de bricoler avec les idées ou les problèmes que vous avez rencontrés.
Conclusion
En résumé, des expériences fréquentes sont essentielles à votre croissance en tant que concepteur et développeur Web. Il est beaucoup trop facile de tomber dans le piège de recourir aux mêmes méthodes anciennes pour chaque projet que vous prenez, ce qui peut facilement entraîner une stagnation des talents. Il n’ya rien de plus dangereux pour la carrière d’un web designer que de prendre du retard et de devenir obsolète!
Les astuces pour expérimenter ci-dessus s’adressent principalement aux codeurs, mais peuvent également s’appliquer également aux pixel pushers. Ici, votre terrain de jeu serait simplement Photoshop, Illustrator et / ou Fireworks, mais les suggestions générales d’expérimentation de forme libre, de recherche du travail des autres pour trouver l’inspiration et de la rupture de vos habitudes typiques s’appliquent.
Laissez un commentaire ci-dessous et dites-nous combien de temps vous consacrez simplement à jouer et à essayer de nouvelles choses. Combien de temps recevez-vous et quels outils utilisez-vous?