Prototypage pour le Web III : conception avec HTML et CSS

1. Bande-annonce: Je suis Erika Heins. Je suis concepteur web, développeur web. Je travaille depuis plus de 10 ans sur le terrain et aux États-Unis. Cette classe concerne le développement web simple. Donc vraiment chaque CSS connu pour les concepteurs. Vous prendrez les maquettes d'un site Web que vous avez déjà conçu et vous les convertirez en site réactif. Je pense que cette classe peut servir les concepteurs web débutants qui veulent apprendre à prendre leurs conceptions en code ou peut-être à devoir prendre du recul et les planifier un peu plus clairement avant de sauter directement dans leur processus visuel. Ce cours est bon pour les étudiants débutants qui veulent comprendre le design réactif et l'ensemble du processus de planification au développement ou les concepteurs expérimentés qui veulent adapter leur processus. Être capable de créer des sites Web et de maintenir des sites Web pour comprendre comment ils fonctionnent, comment les rendre plus puissants ou le fait que ce n'est qu'une des compétences les plus précieuses. 2. Prototypes RWD, CSS et HTML: Bienvenue sur Simple Web Development. Dans cette classe, nous prendrons les maquettes de notre site web responsive et les transformerons en HTML et CSS réels. Les méthodes que nous utiliserons sont appropriées pour le prototypage ou pour démarrer un nouveau site Web. Cette classe optimise le processus de développement frontal pour les concepteurs. Que votre concepteur apprenne à coder en voulant des explications visuelles ou une version hybride actuelle et souhaite améliorer votre flux de travail ou l'adapter au web réactif, cette classe vous donnera un bon processus et un ensemble complet de ressources. Parce que les chantiers font de nous de meilleurs designers. Comme l'a dit Steve Jobs, « Le design n'est pas seulement ce qu'il ressemble et ressemble. Le design est la façon dont il fonctionne. » Lorsque vous construisez des éléments, vous voyez des conceptions dans leur support réel de HTML et CSS. Vous révélez des besoins système supplémentaires, vous pouvez visualiser et tester l'interactivité, et surtout, vous pouvez ajouter des gifs. Vous pouvez considérer ce projet comme un prototype ou un site. Le premier est généralement jeté. C' est juste une maquette cliquable faite aussi vite que possible pour voir à quoi ressemblent les choses. Vous vous concentrerez davantage sur la vitesse et la présentation. Un site approprié a toutes les balises alt, repli et l'optimisation pour le serveur de production. Vous vous concentrerez sur des systèmes solides, évolutifs et maintenables. Nous allons passer par un processus qui est utile pour les deux. Parce que la conception web réactive a changé tout notre travail, nous avons souvent besoin de rendre les choses plus rapides et en petits morceaux. Nous parlerons des philosophies actuelles dans l'industrie et des avantages et des inconvénients des différentes techniques. Mon processus consiste à évaluer la situation, puis à organiser mes matériaux, à les personnaliser au besoin, à tout tester à fond, puis à documenter autant que possible. Le kit que j'utilise pour le prototypage ou la production est Coda pour écrire du code, Sass pour l'extension CSS, Hammer pour les modèles et la compilation, Bourbon pour les mixins et les grilles, et SourceTree pour les commits git. Alors, allez chercher la configuration de votre outil. Téléchargez les versions d'essai gratuites de Coda ou tout autre éditeur de texte que vous souhaitez utiliser. Hammer ou un autre compilateur Sass, et SourceTree ou un autre client GitHub si vous souhaitez en utiliser un. Aussi, téléchargez les ressources pour cette classe. Il existe des fichiers source et des références. Vous devriez déjà avoir des sitemaps et des maquettes. Si ce n'est pas le cas, vous voulez prendre les deux premières classes de cette série. 3. Évaluez la situation: La première étape consiste à évaluer la situation. L' état du terrain et l'état de notre projet. Nous devons toujours apprendre, ce domaine est en constante évolution. Donc, si vous n'avez pas fait quelque chose en six mois, vous devez faire des recherches parce qu'il y a probablement une meilleure façon de le faire maintenant. C' est un domaine pour les gens qui aiment apprendre et qui aiment de nouvelles choses. Mais protégez votre propre processus. Les outils vont et viennent, alors ne perturbez pas ce qui fonctionne bien pour vous l'êtes déjà. nouveaux outils sont perturbateurs. Espérons, d'une bonne façon où vous nettoyez votre processus, mais ça pourrait être mal si ça vous distrait et vous espère. Donc, confirmez les exigences du projet. Quel est le véritable but de ce site ? Quelle est sa durée de vie ? Combien de temps avez-vous besoin pour être debout ? Avez-vous du temps ou des budgets financiers que vous devez atteindre ? Quels appareils voulez-vous qu'il s'affiche lorsqu'il est activé ? Quels navigateurs vous devez prendre en charge ? Et quel type d'écrans voulez-vous prendre en charge ? Écrans rétiniens haute définition. Passez en revue et demandez quelles ressources avez-vous besoin. De quel niveau de vernis avez-vous besoin sur le code. Vous pouvez utiliser une application de codage basée sur l'interface graphique si vous voulez juste quelque chose rapidement et pas pour de vrai. Le code généré est généralement assez verbeux. Si vous n'avez pas besoin de toutes les fonctionnalités de HTML et CSS juste les populaires que l'application fournit, il pourrait être amusant de simplement glisser et déposer des éléments autour de la page. Aussi si vous n'avez pas l'intention de continuer à coder et que vous construisez simplement ou que vous faites un site à court terme. Dreamweaver est l'ancien standard, Adobe a également un nouveau projet appelé Edge et il y a des upstarts comme Web Flow et Macaw. Les avantages de cette belle interface, que vous pouvez rapidement obtenir des mises en page de base et que vous pouvez réviser les pages visuellement. Mais encore une fois, vous êtes limité à l'ensemble de fonctionnalités particulier de l'application, le code a généralement encore besoin de modifications et vous ne l'utilisez pas vraiment en production et beaucoup d'entre eux sont toujours buggy. Alors, pourquoi voulons-nous faire un codage HTML et CSS droit ? Parce que nous avons accès à toutes les fonctionnalités du HTML, nous ne nous limitons pas aux fonctionnalités de l'application de prototypage que nous choisissons. Nous pouvons voir les éléments réels, la topographie et la vitesse de la page. Nous pouvons déterminer les points d'arrêt sur les appareils réels et tous nos fichiers sources ne sont pas propriétaires, ce qui signifie que nous pouvons transférer ce code à n'importe quelle autre application que nous voulons utiliser. Vous pouvez polir votre prototype en production, ce qui vous fait gagner temps et vous pouvez construire un site en quelques heures ou quelques jours si vous êtes rapide. Mais il est difficile d'aller au clavier comme outil de conception principal si vous venez d'un arrière-plan de conception. Donc, l'application que vous utilisez fait une grande différence. Sublime Text est vraiment populaire, il est vraiment personnalisable et il a une vue de navigateur cool sur le côté droit pour votre code. J' utilise coda qui vous permet d'avoir des clips de code que vous pouvez faire glisser et déposer dans vos pages. Il a également appelé le code pliage et la coloration et un aperçu de fenêtre split ou vous pouvez utiliser l'application diète coda iPad pour générer en direct un aperçu à chaque fois que vous enregistrez. Vous pouvez ouvrir une fenêtre de terminal directement dans la même application et il y a aussi beaucoup de manuels de référence pour vous aider à rechercher les choses pendant que vous codez. Mais nous ne allons pas coder parfaitement HTML et CSS, il y a quelques outils et méthodes clés pour gagner beaucoup de temps. Les plug-ins et les extensions peuvent nous donner des fonctionnalités supplémentaires que nous voulons et dont nous avons besoin. Par exemple, Emmnet est un raccourci CSS, vous pouvez taper quelques caractères et les faire évoluer en HTML ou CSS complet. Puis Sass ai un processeur CSS qui nous donne des variables, des mix-ins, bibliothèques, si alors des déclarations et toutes sortes de choses qu'un langage de programmation intelligent aurait. J' adore Hammer. Je trouve que c'est le moyen le plus rapide de faire des sites statiques. Vous avez besoin d'un compilateur si vous allez utiliser Sass et Hammer fait cela pour nous et il inclut également la bibliothèque Bourbon de mix-ins par défaut et le meilleur de tous, vous permet d'inclure certaines variables qui ont compilé un HTML régulier. Donc, encore une fois, les avantages des choses de codage manuel sont que vous pouvez utiliser HTML et CSS à peu près n'importe où, il rend les conceptions et le support réel, vous obtenez toutes les capacités du navigateur et c'est open-source ou non-propriétaire. La seule chose est que, oui il y a une courbe d'apprentissage, oui vous devez investir un peu de temps dans le codage toutes ces choses et vous devez le tester par navigateur. Ainsi, les frameworks peuvent être un médium heureux. Si vous êtes un développeur expert, vous pensez peut-être à Node.js parce que vous créez des applications , mais si vous êtes à ce niveau, vous n'avez probablement pas besoin de cette classe. Framer Node.js est un autre qui se concentre sur le prototypage et l'animation. Le niveau suivant, on pourrait dire, c'est Bootstrap. Il est très populaire pour les applications en production, il vous donne toutes sortes d'éléments en interactivité. Pour moi, il y avait des briseurs d'accord parce que c'est intégré Lass et Sass. Bien qu'il y ait un port si vous voulez utiliser Sass et il y a beaucoup de style par défaut, donc pour moi c'était trop de choses à remplacer. Il vous donne des boutons, il vous donne des formes, il vous donne des en-têtes et des textiles par défaut, donc vous devez entrer et écrire tous les CSS pour écraser ces styles si vous voulez que votre site soit unique, ce qui prend un peu de temps c'est pourquoi vous voyez beaucoup de sites utilisant Bootstrap qui ont tous la même apparence. Foundation est un autre cadre qui est similaire à Bootstrap. Je préfère sa structure un peu mieux. Il vous donne beaucoup de modèles par défaut. Donc, vous n'auriez pas à coder ce genre de mises en page à partir de zéro et c'est donc bon, mais c'est volumineux, il y a beaucoup de balisage supplémentaire lorsque vous faites ce genre de mises en page de colonnes et que vous obtenez des noms de classe partout dans vos balises. Donc, je trouve que vous pouvez obtenir les mêmes choses avec moins de travail. Compass est un autre populaire, c'est une énorme bibliothèque de mix-ins CSS. C' est assez grand et il peut ajouter du poids à vos pages, donc je m'appuie sur Bourbon qui est beaucoup plus simple que Compass c'est le même genre d'idée d'une bibliothèque de mix-ins CSS, donc vous n'avez pas à les écrire et à les maintenir tous vous-même et je trouve que c'est la documentation pour être beaucoup plus facile à lire. Vous pouvez également utiliser Bourbon Neat pour aller avec Bourbon et c'est une simple grille réactive sémantique et nous en parlerons plus tard. Donc, tous ces frameworks signifient que vous avez moins dérivé de zéro que vous obtenez des fonctionnalités supplémentaires que vous pourriez ne pas être en mesure de faire vous-même et espérons qu'ils sont bien testés. Les inconvénients sont que vous pouvez avoir un manque de contrôle, vous devez suivre les normes des frameworks que vous utilisez. Il y a une courbe d'apprentissage d'apprendre la syntaxe et les capacités particulières de chaque framework et ses connaissances spécialisées, ce n'est pas aussi applicable à d'autres outils si vous décidez de changer de framework plus tard. Donc, si vous essayez de suivre des choses comme celles-ci, demandez comment vous entendez parler de ces nouveaux outils, décidez lesquels sont les meilleurs. News.layerVault.com est assez bon et bien sûr Twitter. J' ai fait une liste de personnes recommandées dans le domaine de la conception et de la technologie, de sorte que vous pouvez obtenir beaucoup d'informations de gens qui sont vraiment à la pointe de leur jeu sur ce genre de choses. Alors, décidez combien vous voulez apprendre pour ce projet. Épluchez certaines de ces applications, lissez la documentation, regardez quelques tutoriels, puis obtenez la configuration. Je vais utiliser Hammer et Sass, Bourbon et Bourbon Neat, donc je suggère ceux si vous voulez suivre, mais bien sûr si vous voulez apprendre Bootstrap ou Foundation ou quoi que ce soit d'autre que vous avez entendu parler vous pouvez aussi configurer cela pour votre projet. 4. Sauvegardez: Notre prochaine leçon est sur le contrôle de version. C' est une compétence précieuse et essentielle. Donc, même si vous pensez que vous n'en avez pas besoin dans ce projet, allons de l'avant et apprenons une façon simple de le faire. Si vous travaillez dans le monde numérique, il est super important de sauvegarder votre travail à plusieurs endroits. contrôle de version sauvegarde vos fichiers, ainsi que toutes leurs versions précédentes. Nous connaissons tous le concept. Au niveau un, vous n'utilisez que des noms de fichiers, -v1, -v2, -FINAL-FINAL-FINALL. Niveau 2, vous passez à un système de contrôle de version. Il existe des applications comme LayerVault pour Photoshop, et GitHub est la grande pour le code. Mon père est programmeur et il dit toujours que jusqu'à ce que vous utilisiez un système de contrôle de version, vous êtes un développeur amateur et non un professionnel. Mais quand même, GitHub est un peu effrayant. Parcourez donc l'onglet Explorer pour avoir une idée de toutes les choses que vous pourriez faire. Vous pouvez sauvegarder vos fichiers, sorte que vous avez toujours deux copies. Vous pouvez facilement annuler les tâches car il enregistre chaque version mineure. Vous pouvez tester des idées alternatives car il permet des fourchettes et des branches. Vous pouvez collaborer avec d'autres personnes sur les mêmes pages car GitHub gère les conflits de fusion. Vous pouvez partager votre travail parce que l'open-source nous fait avancer tous. Vous pouvez également utiliser un dépôt privé si vous le souhaitez. Alors, lisez tous les tutoriels. C' est toujours la meilleure façon d'apprendre un nouvel outil. Mais j'ai fait tout cela, et je suis toujours confus et effrayé par GitHub jusqu'à ce que je trouve des outils visuels. Donc, il y a un GitHub pour Mac, mais je préfère un appelé SourceTree. C' est aussi gratuit et il a toutes les commandes juste devant vous. Donc, j'utilise juste les principaux, comme commit, pull, et push. Vous pouvez voir qu'il y a ce bouton. Donc, je n'ai pas besoin de me souvenir de la syntaxe particulière. Terminal est juste qu'il n'y a pas d'annulation, il n'y a pas de code de couleur à afficher lorsque vous avez tapé par erreur. Donc, ça a toujours été un peu trop stressant pour moi. Mais une fois que j'ai commencé à utiliser SourceTree, j'étais totalement confiant dans l'utilisation de Git. Alors, comment commencez-vous ? D'abord, tu dois avoir son compte. Alors, allez sur github.com et créez un compte. Ensuite, sur votre profil ou à partir de la page d'accueil, vous voulez créer un nouveau dépôt. Donc, je vais appeler ma démo. Je vais le rendre public pour que vous puissiez tous le voir, et je vais aussi cocher la case qui dit initialiser ce dépôt avec un README. Donc, cela va vous permettre d'aller de l'avant et d'utiliser le référentiel parce que c'est une chose nécessaire d'avoir un fichier README dedans. Donc, vous êtes obligé d'écrire une introduction expliquant à d'autres personnes ce qu'est cet ensemble de fichiers. Donc, maintenant vous voyez mon dépôt. C' est sous mon nom d'utilisateur. Energy7/Demo est l'endroit où vous pouvez le trouver. Vous pouvez voir que ce fichier README a juste le titre et je n'ai pas ajouté de contenu. Je le ferai à la fin du projet. Donc, si vous allez sur le côté droit de l'écran, vous voulez copier cette URL de clone où il est dit SSH. Ensuite, vous voulez aller dans SourceTree. Alors, accédez à votre panneau Signets. Vous appuyez sur Apple B si vous ne le voyez pas, et vous cliquez sur le bouton Plus pour ajouter un référentiel. Vous allez cloner un dépôt. Parce que vous l'avez déjà créé sur GitHub, vous n'avez pas besoin de le recréer, mais vous allez simplement cloner une copie sur votre ordinateur. Donc, le chemin source est que vous avez copié à partir de GitHub, puis choisissez un dossier. Je garde tous mes repos dans mon dossier utilisateur dans un sous-dossier appelé Sites. Je vais appeler mon dossier de repo la même chose que sur GitHub, qui est une démo, et puis cela ressemblera à ceci. Vous verrez qu'il s'agit de la fenêtre SourceTree. Donc, il n'y a pas encore de fichiers que nous avons ajoutés localement. Donc, tout est vide, mais vous pouvez voir tous les boutons en haut. Ensuite, sur la gauche, vous pouvez voir que nous sommes juste connectés à la branche principale, qui est comme notre repo principal. Il y a toutes sortes d'autres choses dans lesquelles vous pouvez plonger si vous travaillez dans un environnement professionnel. Alors maintenant, je vais aller à Hammer, et j'ai fourni des fichiers sources. J' ai fourni un modèle Hammer pour cette classe. Donc, ça s'appelle Demo Template. Donc, dans mon même dossier de dépôt, je vais créer un site de démonstration en utilisant ce modèle de démonstration. Lorsque je clique sur Enregistrer, Hammer va compiler tous ces fichiers. Ils sont tous à peu près vides jusqu'à présent, mais Hammer est assis là et montre, et chaque fois que vous enregistrez, il se compile à nouveau. Ensuite, si je retourne à SourceTree, je vois que tous ces fichiers créés par Hammer, qui font partie du modèle sont maintenant dans mon arbre de travail, ce qui signifie comme dans mon disque dur local. Donc, je vais les traîner et les déposer. Je vais tous les sélectionner et les glisser et les déposer moitié supérieure de l'écran pour les mettre en scène, ce qui signifie que ce sont ceux que je suis prêt à partager. Ensuite, je vais cliquer sur le bouton Commit, le premier bouton à gauche, et je vais écrire un message décrivant ce que j'ai fait ici. Donc, ici, je viens de créer les fichiers du site à partir de mon modèle Demo Hammer. Je vais cocher la case en bas, qui dit pousser les commits immédiatement à l'origine. Donc, s'engager est juste comme une sauvegarde, mais c'est juste localement. Il ne fait rien au repo sur GitHub. Donc, vous devez pousser les fichiers si vous voulez qu'ils sortent sur GitHub. Donc, une fois que je fais ça, maintenant vous voyez que j'ai mon dossier de site de démonstration dans le dépôt public aussi. Donc, tu l'as fait. Tu as poussé le GitHub. Donc, si vous êtes un jour dans un entretien d'embauche, et qu'ils vous demandent, pouvez-vous utiliser Git, vous pouvez dire oui maintenant. SourceTree est aussi agréable parce que vous pouvez voir au milieu de l'écran, au-dessus du bouton Pull, il y a un petit badge qui vous indique qu'il y avait un peu de cinq rouges. Donc, cela vous indique que si quelqu'un d'autre travaille sur le projet avec vous, il a apporté quelques modifications au repo, et que vous voulez les extraire, vous voulez télécharger les modifications que vous travaillez avec les fichiers les plus récents. Donc, toujours chercher cela et tirer avant de commencer à travailler dans tous les cas. Donc, la syntaxe de base pour Git est que pull est comme téléchargement, que vous fusionnez les modifications dans vos fichiers. Commit est comme sauver. C' est comme un kilomètre que vous pourrez revenir plus tard. Push est comme télécharger où vous fusionnez vos commits dans le repo. Revert est comme annuler, où vous devez revenir à un commit précédent, ce qui vous rend très heureux quand vous avez beaucoup de commits à choisir. Fork est si vous trouvez un repo que vous voulez utiliser comme base, si vous voulez maintenir un lien, donc si comme, disons, ils mettent à jour leur en-tête, vous pouvez fusionner la branche amont et vous pouvez également utiliser cet en-tête mis à jour. Donc, ça ressemble à ça. Voici une bonne illustration de Jessica Lord. Il y a un projet original qui est une girafe, et vous pourriez le fourcher, puis vous pouvez le changer comme vous le souhaitez, et peut-être vous ajoutez une tête de tigre, puis vous le téléchargez si vous avez des droits d'accès jusqu'au repo original. Donc, maintenant ça fait partie du repo principal, cette girafe à tête de tigre. Ensuite, quelqu'un d'autre peut fourcher ce nouveau code et ajouter des plumes, puis il peut le repousser au repo et fusionner ces changements aussi. Donc, vous pourriez même collaborer les uns avec les autres sur ce projet dans cette classe. Vous pouvez utiliser le même référentiel et partager des fichiers. Alors, allez-y et créez votre référentiel. Téléchargez SourceTree si vous ne l'avez pas, et Hammer aussi. Créez un compte GitHub. Créez un référentiel, puis obtenez la configuration de votre référentiel dans SourceTree. 5. Les os: Maintenant, nous sommes prêts à commencer à construire des pages. Notre lecture de fond est de nouveau par A Book Apart. Si vous êtes un web designer, allez-y et achetez tous leurs livres. Les meilleurs aperçus de chaque sujet, et ils sont assez courts pour être lus en avion. Alors, comment allons-nous passer de ces maquettes plates au code ? Heureusement, notre gentil designer s'est moqué de toutes sortes de points d'arrêt, donc nous ne prenons pas nous-mêmes de décisions de mise en page, et nous avons un sitemap pour nous montrer quelles pages sont multiples et à peu près combien il y en a au total. Donc, tout est maintenant sur la reconnaissance des motifs, et Hammer nous aide avec ça. Les modèles par défaut sont livrés avec un dossier includes. Vous verrez l'en-tête, le pied de page et le nav ici. Vous utilisez des inclusions sur tous les grands sites, sorte que vous n'avez pas à coller l'en-tête cinq fois sur cinq pages, mais ils nécessitent un langage côté serveur dynamique comme PHP ou Ruby. Hammer compile ces inclusions en HTML normal, que vous verrez dans le dossier Build. Ensuite, le dossier Assets, vous verrez le sous-dossier CSS a un style.scss. Il s'agit d'un fichier SaaS, qui est également compilé en CSS standard dans le dossier Build. Pendant que nous sommes ici, regardez le modèle que j'ai fourni. Dans les actifs CSS, il y a plusieurs sous-dossiers. On en parlera plus tard. Il s'agit de concevoir des modules, pas des pages. Encore une fois, nous ne voudrions pas coder un en-tête cinq fois pour cinq pages, et vous voulez donc penser aux légendes et autres fonctionnalités de la même manière. Donc, faites une liste de vos modèles, pas nécessairement vos pages. Vous pouvez simplement le faire dans un fichier texte, et vous voulez les décrire au plus grand point d'arrêt car les mises en page mobiles sont généralement une seule colonne. Donc, si vous décrivez vos modèles mobiles, ils seraient presque tous les mêmes, mais pensez à l' endroit où vous avez des mises en page complexes à trois colonnes ou deux colonnes. Maintenant, c'est une question de sémantique. sémantique signifie simplement attribuer des éléments en fonction de ce qu'ils sont, pas de leur apparence. Ce texte est-il un paragraphe ou une liste ? Donc, HTML est l'alphabet de la conception web. Vous voulez apprendre toutes ces lettres, que vous puissiez épeler plus de mots. Vous n'utiliserez pas nécessairement tous ces éléments. Mais encore une fois, plus vous en savez, plus vous pouvez, faire et c'est une autre chose que j'aime chez Coda, est qu'il est livré avec des livres sur plusieurs langues. Donc, dans la même application, vous pouvez simplement rechercher les choses. Donc, si je voulais utiliser une balise de site, je peux aller dans le livre et rechercher les attributs appropriés et à quoi il sert. Ainsi, vous pouvez également commencer à utiliser le raccourci pour travailler un peu plus rapidement. Markdown, un raccourci pour HTML. Il vous aide à vous concentrer sur la sémantique de votre contenu plutôt que sur l'apparence. Donc, vous devez dire que c'est un H1 c'est un H2, et cetera. Vous pouvez écrire Markdown dans une application comme Stackedit pour voir l'aperçu HTML rendu côte à côte, puis vous pouvez télécharger HTML pour avoir votre contenu sur tout marqué et prêt à coller dans vos modèles. Emmet est un autre type de raccourci pour HTML et CSS. Il est livré comme un plug-in pour votre éditeur de code. Vous écrivez du code en utilisant la syntaxe Emmet, qui ressemble à cette ligne en haut, puis vous appuyez sur « Control E » pour l'étendre, et vous obtenez le plein HTML ou CSS comme en bas. Encore une fois, c'est une chose à apprendre, mais quand je vais dans une phase où je vais coder pendant plusieurs jours, je reviens et je l'apprends à nouveau. C' est vraiment magique. L' autre chose qui est super utile est de faire des clips. Lorsque vous avez codé une liste non ordonnée pour la 100e fois, vous commencez à vous demander si c'est vraiment nécessaire ? Non, ce n'est pas le cas. Vous pouvez construire votre propre bibliothèque de code personnelle. Ici, encodeur, il y a un onglet à droite pour tous vos clips. Vous pouvez voir mes clips HTML5, mes clips Hammer, etc. Vous pouvez créer des dossiers de clips pour n'importe quel framework que vous utilisez, puis il vous suffit de les faire glisser et de les déposer dans votre fichier pour réutiliser votre code. Il existe un site Eclipse de code qui a beaucoup d'échantillons, fois simples et complexes pour de nombreux systèmes et frameworks, et Pears. C' est P-E-A-R-S. C' est un site qui a beaucoup de modèles HTML et CSS simples. Recherchez également les modèles réactifs sur le site Brad Frost appelé This Is Responsive. Il a été super généreux et a créé des tonnes de modèles utiles comme la navigation réactive et les images. Son dernier effort s'appelle Pattern Lab, et il a la même approche modulaire dont j'ai parlé. Au lieu de l'alphabet, il parle d'atomes. Donc, cela peut être, vous avez une couleur ou une police. C' est un atome de votre site web. Vous les combineriez en une molécule. Ils pourraient faire un titre, et vous combineriez plusieurs molécules dans un organisme, qui pourrait être un en-tête ou une barre latérale. Ensuite, ces organismes se combinent pour le modèle de formulaire, qui peut être votre modèle de colonne unique, votre modèle de grille, puis vous utiliseriez ces modèles pour créer pages individuelles comme votre page d'accueil ou votre page de profil. Alors, consultez ce système, et vous pouvez l'explorer si vous souhaitez poursuivre le développement web, mais assurez-vous de sauvegarder vos clips. La chose la plus triste qui ait jamais eu lieu était, j'ai eu un accident d'ordinateur, et tous mes clips ont été perdus, et c'était tant d'années de travail, tout compilé, et il n'a pas été sauvegardé nulle part, donc des leçons apprises. Donc, lorsque vous écrivez votre HTML, vous allez commencer à ajouter des noms de classe, qui est à l'endroit où vous allez attacher votre CSS. Donc, il y a toutes sortes d'approches pour la façon dont vous nommez vos classes, mais voici mon approche de base. Votre conteneur veut avoir une classe courte, simple nom de conteneur court est génial. Ainsi, vous pouvez avoir des classes enfants après tiret. Donc, cette section que j'ai appelée intro, et ensuite mes sous-sections sont intro-héros et intro-blurb, qui sont encore sémantiques, et qu'ils se réfèrent comme ce qu'il est, pas à quoi il ressemble. Donc, ce n'est pas la rangée supérieure. Parce que dans une mise en page réactive, cette ligne supérieure peut se déplacer vers la gauche, mais c'est la ligne d'introduction, ou tout autre que vous voulez l'appeler. Les méthodologies populaires, ce sont des gens qui passent beaucoup de temps à essayer de penser pour les grands systèmes, comment vous devez nommer vos classes. L' un était OOCSS, qui est orienté objet CSS par Nicole Sullivan, et c'était un peu l'un des premiers styles abstraits en modules. Donc, vous écririez une sorte de styles de visualisation de logos que vous combinez sur différents éléments en mettant tout un tas de noms de classe dans le balisage, mais Sass le fait maintenant. Encore une fois, ce n'est pas si agréable d'avoir toutes les classes dans le balisage. Un autre populaire est BEM, qui est Block Element Modificateur, ce qui signifie simplement que vous utilisez a.class pour la chose principale. Ensuite, pour un enfant, vous utilisez deux traits de soulignement, puis pour une sous-classe, vous utilisez deux traits d'union. Donc, c'est assez reconnaissable quand vous voyez quelqu'un qui utilise BEM. Ensuite, SMACSS est un autre que j'aime, qui signifie Scalable Modular Architecture, et qui dit que vous voulez diviser votre CSS en cinq sections de base. L' un est comme vos éléments de base. Deux sont tous les styles qui font votre mise en page. Trois sont tous les modules. Donc, des appels ou des pièces réutilisables dont nous avons parlé. Quatre sont les États. Donc, il est sélectionné ou c'est une erreur, et cinq sont les thèmes, ce qui signifie que si pour les grands sites, vous avez souvent des sections de thème utilisant le même code que les autres sections. Donc, nous allons utiliser un similaire. J' utilise une ventilation similaire pour organiser mes dossiers de partiels, mais je ne suis pas strict à propos de suivre Sass à ce dernier. Les principales leçons que j'ai apprises lorsque je choisissais mes noms de classe, un, est de ne pas utiliser d'ID car ils sont très spécifiques, et ils écraseront la plupart des autres CSS. Donc, si vous avez besoin de modifier certains CSS existants, vous devez utiliser une tonne de spécificité ou une déclaration importante, ce qui est un problème. Donc, vous voulez faire une classe égale profil utilisateur, et pas un ID égal profil utilisateur. Ensuite, lorsque vous écrivez votre balisage, vous voulez réduire les dépendances. Donc, cela signifie juste que vous ne voulez pas un changement dans votre CSS pour casser votre JavaScript et vice versa. Donc, il est génial d'utiliser des noms de classe qui sont assignés à chacun. Donc, pour les hooks JavaScript, j'utilise des ID, ou des attributs de données, ou des noms de classe qui commencent par .js-, puis toutes les autres classes sont juste pour le style. Donc, de cette façon, je sais que je peux faire autant de changements à mon CSS que je le veux, et je ne vais pas casser le JavaScript. Donc, c'est une leçon avancée, mais je vais aller de l'avant et vous le dire. D' accord. Donc, vous allez commencer à coder vos pages de démonstration, et il va être vraiment tentant d'entrer et de commencer à les coiffer, mais concentrez-vous sur l'insertion de tous les éléments dans la page. Donc, écrire votre balisage, comprendre comment le contenu doit être codé, et quel ordre il devrait entrer sur la page. Donc, il est utile de regarder vos filaires mobiles pour déterminer quel ordre les éléments HTML doivent entrer, puis nous allons passer dans le style réactif sous peu, et comprendre comment les obtenir côte à côte sur les plus grandes mises en page. Donc, démarrez vos pages HTML en marquant vos conteneurs qui peuvent être des sections, articles, des divs, ou autre chose. Vous allez ajouter vos textes, vos en-têtes, vos paragraphes, vos listes, et vous marquez vos médias. Donc, images, vidéos, audio, tout ce qui est dans vos mises en page, et continuez à vous engager et à pousser vers Github pendant que vous allez juste pour la pratique, ou si vous travaillez avec d'autres personnes. 6. Flexibilité: Ma prochaine étape consiste à rendre ces modèles réactifs, afin que tout le monde puisse voir comment le contenu va recirculer sur différents appareils. Pour ce faire, nous allons avoir besoin de Sass pour pouvoir utiliser la grille Bourbon Neat. Encore une fois, A Book Apart nous donnera un excellent aperçu. Nous voyons des fonctionnalités comme l'imbrication ; pour garder votre code organisé, les classes dépendantes peuvent être stockées dans leurs classes parents. Variables pour éviter de trouver et de remplacer, vous pouvez écrire un fichier de configuration pour chaque site qui agit comme un thème, sorte que vous pouvez avoir les couleurs et les tailles uniques pour ce site tout en un seul endroit, puis simplement utiliser cette variable qui commence par le signe dollar partout ailleurs dans votre page dans votre CSS. Aussi Mixins pour gérer une logique complexe, ou pour éviter d'écrire de longues chutes CSS comme les préfixes du fournisseur. Par exemple, nous pouvons simplement passer une valeur de 10 pixels afin que ce rayon de bordure d'une ligne mixin, et il va générer les quatre lignes de CSS et notre fichier final. Nous n'avons pas besoin d'écrire tous nos propres mixins, nous pouvons utiliser des bibliothèques pour les choses courantes, donc il est mis à jour lorsque les navigateurs le font. Les fichiers Sass peuvent être divisés en partiels, sorte que vous n'avez pas à faire défiler vers le haut et vers le bas un fichier CSS de 3000 lignes à la recherche de quelque chose. Ensuite, vous les compilez, langage d'extension CSS de Sass, donc nous avons besoin d'un compilateur pour le transformer en CSS réel. C' est une autre victoire pour Hammer. Vous pouvez compiler Sass avec JavaScript sur le serveur, mais c'est un peu plus lent pour vos visiteurs. Vous pouvez utiliser une application appelée Codekit qui est vraiment génial, mais Hammer à nouveau nous aide juste utiliser moins d'outils possible, il compilera notre Sass pour nous. Donc, voici un exemple de fichier de configuration qui est fondamentalement, un thème pour notre site. Voici un exemple de palette de couleurs, et nous pouvons définir nos variables pour notre grille comme le nombre de colonnes et toutes sortes de choses. Donc, regardez dans l'exemple du modèle de démonstration et voyez à quoi ressemble un fichier de configuration. Vous voulez garder vos fichiers organisés. Donc, les gens le font de différentes manières, mais, mes dossiers pour le prototypage sont un fichier de base, excusez-moi, un dossier de base où vous verrez votre fichier de normalisation et aussi ce fichier de configuration que j'ai mentionné avec toutes vos variables de thème. Ensuite, j'ai un dossier de tous mes mixins qui sont, peut-être les bibliothèques, la grille et l'un de mes mixins personnalisés que j'écris moi-même. Ensuite, j'ai un dossier de tous mes partiels c'est de loin le plus grand dossier, et parfois il est divisé en plusieurs, ça peut être votre en-tête, votre pied de page, j'inclus aussi mes états ici donc c'est cassé, excusez-moi, c'est une erreur, c' est sur ce genre de choses, et puis il y a le dossier plugins donc des choses comme fitbits ou jquery plugins, qui pourraient être supprimés plus tard, c'est agréable d'avoir ce CSS divisé, donc vous n'avez pas à router à travers la longueur de votre fichier CSS pour chaque style particulier, mais tout est en un seul endroit.Donc, alors vous venez d'importer tous ces partiels différents, en utilisant votre style.scss donc c'est comment on a tendance à regarder. Donc, d'abord j'importe ma base, configuration donc c'est cette réinitialisation normalisée et ensuite ma configuration sur mes variables, puis j'importe toutes ces bibliothèques et mixins que je vais utiliser un tout mes partiels différents. Ensuite, j'importe mes différents partiels, et l'ordre dans lequel vous les importez est important. Par conséquent, les éléments que vous importez ultérieurement ne sont pas disponibles pour les partiels qui sont importés auparavant. Donc, vous voulez faire tous vos éléments de base comme votre typographie doit venir en premier, et ensuite vous pouvez utiliser ces styles typographiques par exemple vos boutons, ou vos menus qui sont appelés plus tard. Ensuite, mon dernier est tous ces plugins à nouveau, ces add-ons qui pourraient être supprimés plus tard. Pour les mises à jour sur Sass et CSS et toutes ces choses suivre Chris Coyier CSS-Tricks est son site, et il est vraiment à la fine pointe sur tous ces trucs. Sur Responsive Web design et les exigences là-bas. Notre lecture de fond ici est faite par M. Ethan Marcotte qui est un grand ami à suivre également sur Twitter. Il vient de cette exigence de ou de ce fait que nous ne pouvons pas concevoir pour les tailles définies sont des proportions plus. Nous ne pouvons plus concevoir uniquement pour les utilisateurs d'Apple. Quand les smartphones sortaient pendant un moment, nous sommes comme oh ! Donc, maintenant nous avons juste besoin, les styles d'iPhone, puis les styles d'iPad, puis de bureau et maintenant il y a toutes sortes de gens avec toutes sortes de tablettes et de smartphones, donc nous devons être un peu plus créatifs. Donc, une chose qui aide, c'est certaines personnes mettent en place ce qu'on appelle l'approche Goldilocks. Ce qui est juste la façon indépendante de l'appareil de regarder la conception Web Responsive. Donc, vous pensez à des mises en page petites, moyennes et grandes ou à une seule colonne, deux colonnes, plusieurs colonnes, c'est un bon début. Ensuite, si vous voulez obtenir plus de précision, considérez-le comme une mise en page de contenu. Où, vous essayez de créer ces points d'arrêt, vous essayez de créer ces mises en page en fonction des détails de votre contenu. Donc, un site avec beaucoup d'articles de texte est vraiment différent d'un site avec beaucoup de vidéos, donc vous voulez séparer les points d'arrêt, non basé sur l'iPad mais basé sur le moment où votre vidéo n'a plus de résolution, ou peu importe. Donc, vous venez avec ces points d'arrêt en commençant petit. Vous commencez avec vos mises en page mobiles, votre code mobile, puis vous agrandissez la fenêtre jusqu'à ce que vous commencez à voir son mauvais aspect, puis vous ajoutez un point d'arrêt, puis vous répétez. Qu' est-ce que tu veux dire par « mal « ? Donc, cet article sur la mise en page de contenu, c'est une très bonne référence par les gars qui ont fait Gridset. Parle de vous obtenez ces modèles comme sept où la légende associée est suspendue hors de l'image et ce n'est pas vraiment, regardant bien à côté de lui plus. Dérive avec les choses d'espace blanc, vous voyez que les images dans la colonne de gauche font un bloc vertical fort, mais, en fait, ils devraient être plus associés au contenu à droite d'eux. Puis pince là où vos marges ou vos gouttières commencent à se dégrader, sorte que vous voyez que beaucoup des titres et images ne sont pas clairement ce qui est associé à quoi. Donc, c'est là que vous commencez à dire, « Oh, il doit y avoir un point de rupture » ou « Oh, cette mise en page ne montre pas vraiment mon contenu. » L' autre chose à regarder, c'est la longueur de la ligne. Si votre texte s'étire tout le long de la page, 45 à 75 caractères est considéré comme optimal, 90 caractères sont toujours corrects, pour une lecture rapide mais, quand il devient vraiment long, un point d'arrêt améliorerait la lisibilité. Ensuite, aussi si vous avez une disposition de colonne unique et que vous continuez à étirer ce plus large et plus large, évidemment que les espaces sous-utilisés, et vous pourriez une fois que vous avez assez d'espace, flotter ces éléments de navigation les uns à côté des autres et obtenez plus de contenu à l'écran pour le visiteur. Donc, c'est quand vous ajoutez des points d'arrêt. Donc, vous voyez la mise en page quelque chose comme ça, avec des grilles. Vous n'avez pas toujours besoin d'utiliser des grilles dans la conception web mais, quand il s'agit de développement et surtout de développement réactif, ils facilitent les choses, en faisant simplement ces conteneurs et ces modèles responsive au lieu de vous faire connaître 100 différents éléments individuels sur la page responsive. Ainsi, la façon dont vous ajoutez des points d'arrêt est par le biais de requêtes de médias CSS. Ils ressemblent à ceci, c'est juste généralement là tout en bas d'un fichier CSS et, commencez simplement par @media et puis vous définissez votre paramètre, il pourrait être min-width ou max-width, je vais parler de la différence, et alors vous dites juste quand il arrive à 768 et plus vous savez que je veux changer ce bloc pour être plus étroit. Donc, par défaut, un bloc aurait 100 pour cent de largeur, alors vous diriez à ce stade que je veux descendre à 75, à ce stade je veux obtenir moins de 50 ou, cependant, sinon, vous planifiez vos mises en page. Mais nous pouvons aussi faire des requêtes média comme, ou points d'arrêt comme Sass mixin. Nous pouvons aussi faire des points d'arrêt comme un mixin Sass. Donc, cela ressemble à ceci, c'est un peu accablant en haut, mais vraiment pratique lorsque vous l'implémentez dans tout le fichier. Donc, nous définissons une fonction appelée point d'arrêt et nous passons une variable appelée point, puis vous pouvez voir plus tard il y a un autre espace réservé qui est le contenu. Donc, tout au long de notre CSS dans notre exemple de classe de héros intro tiret ici, nous dirions inclure ce mixin de point d'arrêt et nous passerions la variable de medium, puis notre contenu est que la largeur est égale à 75. Donc, en configurant ce mixin multi-lignes au début, nous pouvons juste avoir des mixins très clairs et simples plus tard. Donc, l'un est qu'il y a une discussion sur, s'il est correct de mettre des requêtes multimédias dans des classes comme celle-ci. Cela rend le CSS compilé beaucoup plus long mais dans mon expérience, c'est beaucoup plus facile à maintenir et c'est mieux parce que le style des réponses ne soit pas oublié. Surtout pour les sites avec des plugins, c'est quand vous supprimez ce plugin plus tard plusieurs fois, il y a de l'héritage CSS saupoudré tout le fichier et si vous avez tout dans la même classe, vous êtes sûr que vous gardez les choses propres. Alors, suivez Ethan Macrcotte à nouveau sur Twitter, il a écrit à ce sujet et nous verrons ce que les dernières pratiques se révèlent être. D' accord. Donc, maintenant que nous avons tout mis en place, nous pouvons utiliser notre grille qui est Bourbon Neat. Sur le site Bourbon Neat, vous pouvez voir quelques exemples, donc voici un exemple de mise en page. Donc, vous voyez que notre div conteneur a juste besoin ce mixin d'une ligne de conteneur externe inclus. Ensuite, si nous voulions faire deux colonnes en dessous de cela, nous ajouterions simplement cette ligne d'inclusion span-colonnes et six colonnes sur 12, est une grille de 12 colonnes. Sur chacune de ces deux classes et ils flottaient juste l'un à côté de l'autre, et vous pouvez mettre n'importe quel nombre, donc de un à 12 dedans. Ensuite, vous avez juste besoin de mettre sur la dernière colonne de droite que vous voudriez mettre inclure oméga juste pour effacer la marge sur ce dernier div. Donc, cela ressemble à ceci, dans votre CSS. Encore une fois le conteneur doit inclure du conteneur extérieur et pour moi, je vais supprimer toutes les gouttières dans ma grille donc je vais utiliser cette table d'inclusion égale ligne. Puis mon image de héros sur la gauche, je vais dire qu'il va être pleine largeur sur mobile, et il va être pleine largeur sur tablette. Mais une fois que j'aime le point d'arrêt du bureau que j'appelle grand, je vais dire que nous allons juste utiliser huit de ces 12 colonnes, faisons deux tiers de la largeur de la page. De cette façon, je vais adapter mon blurb sur la droite, sorte que cela obtient l'inclusion des colonnes d'espacement de quatre, donc c'est un tiers de la ligne. Ensuite, je donne aussi l'intro-blurb cette inclusion d'oméga donc, puisque c'est la dernière section de cette rangée. Alors, allez sur les documents Bourbon Neat pour voir les détails. Encore une fois, c'est une chose à apprendre mais dans mon expérience c'est super, c'est le moyen le plus simple de faire des grilles, c'est sémantique, il garde toutes vos classes de grille dans votre CSS, au lieu de les disperser dans votre balisage, comme certains frameworks et il rend réactif facile à remanier les mises en page. Vous avez peut-être remarqué plus tôt que j'ai fait min-width au lieu de max-width sur mes requêtes multimédias, et cela provient d'une approche Mobile-first. Luke Wroblewski a beaucoup contribué à cette idée, et c'est vraiment pratique parce qu'une approche Mobile-first, crée moins de CSS en eux parce que, vous utilisez la mise en page la plus simple comme base. Donc, vous n'avez pas besoin de flottants dans une mise en page mobile si vous êtes autour d'une mise en page unique et que vous ne les ajoutez que si vous en avez besoin dans des mises en page plus grandes, donc à la fin, cela crée moins de CSS. Cela force les discussions d'optimisation parce que vous avez affaire à des téléphones, et que vous pensez à la charge de la page et à la taille des ressources. Vous utilisez cette approche d'amélioration progressive, que nous commençons avec l'environnement le plus simple possible, puis nous ajoutons des choses pour de plus en plus d'appareils capables, par rapport à cette ancienne école, ancienne méthodologie de dégradation gracieuse. Il reconnaît également la réalité que de plus en plus de gens sont au téléphone. Les utilisateurs mondiaux ont tendance à au-delà des téléphones, donc si nous continuons à penser à nos sites comme des sites de bureau où nous étions un peu malavisés. Encore une fois, la mise en page d'une colonne mobile vous oblige d'abord à résoudre votre hiérarchie d'informations, plaçant les choses dans un ordre linéaire. Donc, avec tout cela, faisons notre style Responsive. Alors, accédez à vos modèles, rendez-les réactifs en ajoutant ces requêtes multimédias. Ne vous inquiétez pas encore de la typographie ou des couleurs, il est vraiment tentant d'aller de l'avant et de faire le truc facile de remplir des arrière-plans, et de remplir des types de polices, mais essayez de faire ce truc délicat pour que votre prototype recircule. Encore une fois, je vous ai donné un exemple de modèle pour les fichiers Sass, donc il devrait aller un peu plus facilement. Donc, obtenez votre configuration de style Réponses. 7. Les boyaux: D' accord. Maintenant, nous allons intégrer tous les éléments de contenu dans nos mises en page. Les outils dont vous aurez besoin dépendront grandement de votre conception, mais je vais donner un aperçu des principaux acteurs. La première chose est la typographie. Avant, vous deviez découper tous les titres fantaisistes comme une image, mais un tas d'entreprises ont maintenant compris les complexités techniques et de licence des polices sur le web. Donc, espérons que vos maquettes ont été conçues avec polices qui ont des versions de polices Web disponibles. Typekit a été l'un des premiers et meilleurs. Le kit est facile à configurer et il vous indique combien chaque police ajoutera à la taille du fichier. Ils vous donnent tous les exemples de CSS, et vous pouvez changer d'avis et changer de polices plus tard si vous le souhaitez. Google est également super simple, et il vous donne une bonne idée du poids de la page avec son petit cadran rapide. Comme Typekit, vous avez juste une ligne de JavaScript que vous collez dans votre en-tête, puis vous avez l'exemple CSS que vous utilisez dans vos fichiers Sass ou CSS. Font Squirrel est un autre site vraiment utile. Vous pouvez générer tout le code dont vous avez besoin pour héberger des fichiers de polices vous-même, et c'est bon pour trouver ou télécharger et convertir des polices open source. Les icônes ont également été beaucoup plus faciles. Si vous utilisez un jeu d'icônes que vous avez acheté ou téléchargé en ligne, vous devez généralement le découper sous forme d'images, ou maintenant vous pouvez le transformer en polices d'icônes. Vous pouvez modifier la taille, la couleur et d'autres propriétés CSS quand vous le souhaitez. J' ai conçu avec Symbolset, qui a beaucoup de grandes familles d'icônes, et fait cette chose magique où vous tapez le mot, comme l'amour, et il le transforme en l'icône, un cœur. Cela est vrai pour les maquettes et le code, donc c'est rapide et sémantique. Lorsque vous achetez la police, elle sera fournie avec l'exemple de CSS dont vous avez besoin. Un iComoon est vraiment amusant si vous voulez créer votre propre police d'icônes. J' ai travaillé sur un site appelé Riffle, où j'ai fait une police personnalisée pour nos 20 icônes. Vous pouvez également trouver et utiliser des icônes open-source, et vous pouvez les télécharger, les modifier, puis les recréer si vous voulez, encore une fois, mettre en place votre propre police d'icônes. Il y a aussi un format vectoriel qui fonctionne sur le web, SVG. Ainsi, vous pouvez faire des graphiques vectoriels et esquisse illustrateur et les utiliser sur le web. C' est idéal pour les écrans HD et pour la taille du fichier. Donc, il suffit de suivre le tutoriel et les astuces CSS si vous voulez le faire. En ce qui concerne les vidéos, les vidéos réactives sont en fait assez simples. Habituellement, vous n'hébergez pas le fichier vidéo sur votre propre serveur en utilisant Vimeo ou YouTube, sorte que vous ne traitez pas tous les problèmes de bande passante, mais vous devez quand même trouver comment le rendre réactif. Mais, encore une fois, c'est assez simple parce qu'il n'y a qu'une seule option principale. C' est ce plugin génial appelé Fitvids. Donc, vous venez de télécharger le fichier, vous ajoutez le fichier JavaScript à votre dossier assets, puis vous l'appelez à partir de vos pages HTML et l'appliquez à votre maquette vidéo. Les images sont probablement la partie la plus longue de l'exportation d'actifs. Peut-être que le concepteur fournit des tranches ou peut-être que le développeur veut que les fichiers sources prennent simplement ces décisions par eux-mêmes. Mais, qui que ce soit, bien sûr, vous voulez que les images soient aussi petites que possible, tout en conservant la meilleure qualité possible. Par conséquent, la palette Enregistrer pour le Web dans Photoshop est l'emplacement par défaut pour ce faire. Vous pouvez voir ici les quatre vues vers le haut, où vous voyez l'original en haut à gauche et vous pouvez juger si vous pouvez vous en sortir avec ce JPEG en bas à gauche, qui est moins d'un dixième de la taille, ou avons-nous besoin de la pleine couleur qualité du PNG en haut à droite, ce qui est seulement la moitié de la taille. Donc, vous prenez ces décisions ici et vous pouvez les modifier comme vous le souhaitez. Je ne m'inquiète pas des images de la rétine pour le prototypage, mais si vous faites un site pour de vrai, vous voudrez regarder. Vous feriez aussi ça ici. Vous exporteriez le JPEG à deux fois la taille de l'écran HD, et vous pouvez vous en sortir avec une qualité de 40 pour cent sur cela. Mais, encore une fois, regardez-y. En général, je fais des prototypes pour des sites plus petits et non pour des sites prêts pour la rétine. Si vous optimisez pour le chargement de la page, vous devez également considérer CSS Sprites. Voici un exemple du fichier de résultats de recherche Google. Chaque graphique de la page fait partie de cette image unique. Donc, le navigateur de l'utilisateur doit juste faire un appel téléphonique au serveur et pas 30, ce qui est une grosse économie de temps de chargement de la page. Il y a des outils pour vous aider à créer et à entretenir ces sprites parce que c'est une sorte de douleur. Si vous travaillez dans Sketch, vous pouvez exporter les PNG en faisant simplement glisser n'importe quel fichier, n'importe quel calque dans le Finder, et il exporte ce calque en tant que tranche PNG. Ou, vous pouvez cliquer sur la couche, et si vous voyez en bas à droite, il y avait un bouton qui indique Rendre Exportable et puis il arrive avec ces options que vous pouvez définir des paramètres d'exportation particuliers. Donc, Sketch est vraiment génial une fois que vous êtes en transition vers la construction du site. Donc, encore une fois, dans Photoshop, vous feriez Enregistrer pour le Web ou vous pourriez également essayer cette application appelée Slicy, qui générera automatiquement des tranches à partir de tous vos calques. Sketch est génial en raison du « glisser-déposer » et aussi les paramètres particuliers, et utiliser et enregistrer toutes ces images dans votre dossier d'images barre oblique. Si vous faites des images réactives, vous devez penser à deux parties : elles mettent à l'échelle l'image et ensuite elles la servent. mise à l'échelle consiste simplement à définir la largeur et les pourcentages de l'image. Donc, c'est assez simple. Mais si vous êtes gentil avec vos utilisateurs mobiles, qui n'ont pas besoin de cette image de héros haute résolution, vous leur servirez également une version plus petite de chaque image. C' est comme Fitvids, il y a une vraie façon de le faire à ce stade, bien que la technologie change au fur et à mesure que nous parlons. Donc, cela s'appelle Picturefill, et c'est un autre combo HTML, CSS , JavaScript, où vous suivez simplement les instructions et collez le code approprié dans vos pages. Mais celui-ci deviendra effectivement une partie du langage HTML à l'avenir, donc vous apprendrez à l'avance. Sinon, vous allez simplement exporter vos images pour les tailles de bureau et utiliser des pourcentages pour les réduire et rendre tous vos utilisateurs mobiles très tristes lorsqu'ils reçoivent leurs factures de bande passante. Alors, allez-y et faites ça. Préparez vos ressources, sélectionnez votre service webfont et ajoutez ce script à la tête de votre page afin que vous puissiez commencer à utiliser le CSS dans la leçon suivante. Vous ferez de même pour toutes les polices d'icônes que vous souhaitez utiliser, puis exportez toutes les autres images à la taille du bureau. Utilisez SVG où vous le pouvez et essayez d'optimiser tout reste comme JPEG ou PNG si vous en avez besoin. 8. La peau: Ok, maintenant, nous allons enfin nous laisser vraiment entrer dans le style de nos pages. Donc, notre lecture de fond pour cela serait le livre CSS3 de A Book Apart. Encore une fois, nous voulons penser aux modules et comment cela pourrait s'appliquer au style. Donc, nous voulons nous rappeler que les sites Web sont fabriqués à partir de systèmes. Donc vous n'avez pas seulement un million de textes différents. Vous avez un H1, un H2, ou un H3. Donc, vous voulez d'abord les coder, puis faire le moins de variations possible. Donc, pas tous ces millions de styles individuels, mais des systèmes modulaires de styles. Donc, dans chacun de vos partiels, donc par exemple, votre menu partiel, vous voulez passer de général à spécifique. Donc, d'abord vous faites vos styles de base pour tous cet élément ou la classe par défaut pour cet élément, puis vous faites vos styles modulaires. Donc, ce sont les pièces réutilisables que vous aurez sur différentes pages et modèles, puis, vous allez entrer dans les modèles spécifiques à la page si vous avez quelque chose qui est une mise en page personnalisée. Donc, pensez toujours à la façon dont vous pouvez faire quelque chose un style modulaire au lieu d'un style unique. Donc, pour commencer. Vous avez un site Web qui pourrait ressembler à ça. Il est réactif mais peut-être que les grilles ne sont pas encore tout à fait parfaites et que vous n'avez aucune configuration de style. Mais le code semble mieux. Si vous l'avez organisé, mis retrait, vous pouvez voir que nous avons nos noms de classes sémantiques là-bas. Tout est prêt à être coiffé. Donc, cette partie ira très vite si nous configurons correctement notre balisage et notre réactivité. Donc, vous allez juste sélectionner chacun de ces éléments afin que la ligne promo ou la div de retraite promo, puis passer par et appliquer toutes les propriétés dont il a besoin. Tout comme html, c'est un gros vocabulaire que vous pouvez construire. Ce sont toutes les lettres que vous pouvez utiliser, et vous utiliserez simplement les lettres principales pour commencer, arrière-plan, bordure, couleur. Mais il y en a des nouveaux comme flexbox qui vont vous rendre la vie beaucoup plus facile, donc c'est pourquoi il est amusant de continuer à les apprendre. Encore une fois, Coda a des livres intégrés. Donc, si vous n'êtes pas sûr du fonctionnement du bloc d'affichage ou de l'affichage en ligne, ou de l'affichage du bloc en ligne, vous pouvez simplement le rechercher ici, ou bien sûr, vous devriez toujours être googling. Vous pouvez utiliser des sites comme puis-je utiliser pour savoir ce que le navigateur tombe en arrière et à quel point cette propriété est nouvelle. Ensuite, vous pouvez également utiliser différents types de sélecteurs pour être plus spécifique. Donc, vous avez probablement vu un focus deux-points ou un survol deux-points pour indiquer un lien qui est sélectionné ou un lien qui est en cours de survol. Mais il existe toutes sortes d'autres pseudo-sélecteurs où vous pouvez faire nième enfant pour saisir chaque troisième élément dans une liste, ou dernier enfant si vous voulez cacher la bordure inférieure sur quelque chose, sur une liste d'éléments. Donc, encore une fois, continuez à apprendre ça. Ils peuvent vous rendre la vie beaucoup plus facile. Il existe également de nouveaux outils pour vous aider à convertir vos fichiers source en code. Si vous utilisez Photoshop, il y a Project Parfait, une nouveauté d'Adobe, où vous téléchargez le PSD et il vous donnera le CSS pour chaque élément. Ensuite, dans Sketch, vous pouvez sélectionner des éléments et copier le CSS, clic droit dessus et vous obtiendrez un panneau Copier CSS, puis cela vous donnera quelque chose comme ça. Vous voyez à droite, il m'a dit la famille de polices, la taille de la police, la couleur, et ils l'ont fait dans RGBA parce que c'est semi-transparent, puis la hauteur de la ligne. Donc, il vous donne les bases et ensuite vous pouvez construire à partir de là. Une chose à savoir sur CSS est que, il y a encore des divergences dans beaucoup de navigateurs. Donc, typiquement, vous devriez mettre différents préfixes sur des propriétés comme border-rayon comme pour Mozilla, ou pour Opera, ou pour tous les autres principaux navigateurs. Ça ressemble à ça. Pour WebKit, voici la version de la propriété animation de la propriété background. Donc, cela semble assez fastidieux. Alors, est-ce qu'on doit vraiment faire tout ça ? Heureusement, non et c'est un autre avantage de Bourbon. Donc, lorsque vous utilisez ces mixins, encore une fois, vous pouvez simplement utiliser un mixin d'une ligne et passer la variable pour votre rayon de bordure, puis la bibliothèque générera tous les préfixes du fournisseur dans votre CSS au besoin, et la meilleure partie est que, lorsque les navigateurs modifient leur code ou lorsque vous n'avez plus besoin de faire des préfixes fournisseur, le mixin est mis à jour, sorte que vous n'avez pas à garder une trace des préfixes fournisseur qui sont toujours nécessaires ou non. Vous pouvez compter sur la bibliothèque pour s'en occuper. Encore une fois, CSS-astuces vous donnera d'autres options. J' utilise le Bourbon. J'utilise une bibliothèque. Mais il existe certains outils comme Grunt ou Autoprefixer si vous créez des applications plus complexes que vous pouvez utiliser. Alors ouais, continuez à apprendre le CSS. Il y a beaucoup de ressources en ligne. Il y a toutes ces requêtes multimédias font partie de ces règles d'application, face de police lorsque vous faites des polices Web, cela fait partie de ces règles d'application, alors pourquoi ne pas en apprendre le reste, et alors les pseudo-éléments sont où vous pouvez faire un beaucoup de choses cool où vous pouvez réellement dans votre CSS mettre du contenu dans votre html. Donc, si jamais vous voulez ajouter une icône devant un lien, vous pouvez faire un pseudo avant élément, puis le styliser avec votre police Web et ajouter une icône. Encore une fois, c'est CSS, il peut être coloré et dimensionné, tout sans changer votre balisage. Donc, le réseau de développeurs Mozilla a un excellent manuel de référence CSS, sorte que vous pouvez vérifier cela. Après cela, nous pouvons penser à plus d'effets. Lorsque vous allez dans l'animation, les transitions et d'autres types d'effets au fil du temps, vous voulez vous souvenir de vos directives de marque. Donc, si les choses apparaissent ou glissent, cela devrait être cohérent avec la personnalité initiale que vous avez définie pour votre marque et idéalement, votre concepteur serait un guide de style aussi. Bien qu'il soit souvent oublié. Donc, j'utilise jQuery principalement. C' est la bibliothèque d'animation la plus populaire. Cela a été autour pour toujours et donc s'il y a à peu près tout ce que je veux, je peux généralement trouver dans jQuery juste fondu dans et dehors pour les couches de vol stationnaire. Parfois certains glissent vers le bas ou glissent vers le haut. Si vous voyez un site d'une seule page et qu'il fait un défilement pour appliquer où il y a un nav supérieur et que vous cliquez et qu'il fait défiler à mi-chemin vers le bas de la page, c'est généralement fait avec jQuery. Donc, c'est là que vous pouvez simplement aller chercher dans le champ ici pour trouver l'effet particulier dont vous avez besoin. Il y a aussi, pour certains faits courants, il y a des tutoriels ou des bibliothèques qui ont été mis en place. Donc, la tendance Parallax qui se passait avec ces sites d'une seule page, où le calque avant et le calque arrière défilaient à rythmes différents et créaient cet effet de jeu vidéo, qui s'appelle Parallax. Il y a des démonstrations basées sur l'original Nike Better World, le premier site qui a fait ça. Ainsi, vous pouvez examiner les bibliothèques et les systèmes de fichiers pour vous aider à faire ce genre de choses, ou des choses comme cette mise en page maillée utilisée sur Pinterest et d'autres sites. Cela a été développé par David DeSandro. C' était à l'origine le plug-in Maçonnerie et il a maintenant un couple, il y a Isotope et Packery. Ainsi, vous pouvez regarder ces bibliothèques JavaScript et cela vous donnera la possibilité de faire des mises en page complexes. C' est celui où tout comme Bourbon besoin, il fait une grille facile, mais avec maçonnerie, isotope ou Packery. Packery vous permet de faire glisser et déposer ces éléments dans d'autres sections. Isotope vous permet de les filtrer afin que vous puissiez cliquer et regarder le ré-flux de la grille en fonction de vos critères de tri. Donc, cela vous donne juste une interactivité plus complexe. Donc, ça pourrait être une autre classe entière en soi. Alors, commencez à examiner une partie de ça si vous êtes intéressé. Donc, à partir d'ici, il suffit d'entrer et de commencer à coiffer vos pages. Commencez par les propriétés CSS pour vos conteneurs, votre texte et vos ressources principales, et ajoutez quelques réponses style pour chaque point d'arrêt comme indiqué dans vos maquettes. N' oubliez pas de passer du général au spécifique. Donc, essayez de faire des classes universelles autant que vous le pouvez, puis des classes modulaires, puis le dernier recours est des classes individuelles. Alors, amuse-toi bien. 9. Essais: Ok, on est dans le tretch sur ce sujet et maintenant à la partie préférée de tout le monde qui est le test. Il est vraiment important de revenir sur les exigences de votre projet et se rappeler ce que vous avez convenu sur les appareils à prendre en charge, quels navigateurs doivent être pris en charge, car il est vraiment différent d'une plate-forme à l'autre et d'un appareil à l'autre. Tout comme la construction, les tests nous font meilleurs designers parce que nous comprenons que tout le monde n'est pas sur un iPhone et nous comprenons à quel point toutes les différentes proportions et interfaces sont différentes et cela fait de nous de meilleurs designers. Donc, Jacob Nielsen parle de la facilité d'utilisation et comment, comme vous continuez à itérer chaque fois que vous testez, vous allez probablement corriger quelque chose ou changer un peu l'interface et c'est une itération. Donc, comme vous le faites, vous allez trouver toutes sortes de bugs et de choses où les gens ne voient pas les choses ou ils ne fonctionnent pas comme prévu ou cela ne fonctionne pas sur cet appareil particulier et donc vous allez vous débarrasser de tant d'interactions bugs qui existe juste parce que les sites Web sont un support complexe et finalement vous arriverez même à un endroit où vous commencez reconceptualiser l'interface que vous réalisez que le modèle mental de l'utilisateur est peut-être totalement différent et vous peut le reconstruire d'une manière différente et rationaliser les choses. Donc, c'est quelque chose que ce sera un processus continu de construction et de test, de construction et de test. Donc, si vous essayez de tester différents appareils, idéalement vous testez sur de vrais appareils, mais nous n'avons pas tous un million de téléphones. Vous pourriez avoir un ou deux vieux téléphones ou vous serez en mesure d'en emprunter à des amis mais les grandes entreprises garderont tout un laboratoire d'appareils en interne. Parce qu'il y a beaucoup d' émulateurs mais ils ne rendent pas le code exactement de la même manière. Donc, si vous faites vraiment un codage approprié, vous voudrez avoir accès à un laboratoire de périphériques. Donc, la première chose est juste que vous pouvez commencer à penser aux différentes largeurs. Donc, nous pourrions nous arrêter à 320 parce que c'est là sont les iPhones mais certains appareils sont encore plus étroits, donc nous pouvons les regarder et voici une chose simple que Matt Kersley a construit à ce sujet juste les a tous dans la même fenêtre, donc vous n'avez pas besoin d'aller sur différents appareils, mais vous pouvez au moins voir quelques points de rupture pour votre mise en page tout côte à côte et commencer à faire des plans là-bas. Vous pouvez également utiliser Edge Inspect si vous voulez être un niveau plus sérieux. Cela vous permet de configurer un profil qui fonctionne sur n'importe quel type d'appareil auquel vous associez. Donc, vous pouvez ensuite utiliser vos outils de débogage sur l'une de ces plates-formes et c'est un peu de configuration, mais c'est un outil vraiment utile si vous essayez de gérer l'univers des appareils qui sont là. Ensuite, bien sûr, les navigateurs. La pile de navigateur est mon outil principal où vous pouvez vous connecter à une machine virtuelle. Ainsi, vous pouvez vous connecter à Internet Explorer, les anciennes versions et même Firefox semble différent d'une plate-forme à l'autre. Donc, vous avez vraiment besoin de faire beaucoup de tests et encore une fois cela dépend vraiment si vous êtes prototypage et à quel point vous êtes prototyper ou si vous obtenez un site prêt pour un lancement, c'est très différent combien de travail vous avez à faire ici. Donc, cet outil vous permet de naviguer dans une machine virtuelle qui est pratique si vous n'avez pas accès aux systèmes réels. Mais pour moi, le test principal que je fais est aussi avec les utilisateurs. Encore une fois, nous avons tous ce biais de Malkovich où c'est vraiment difficile, nous imaginons tous que les gens utilisent Internet exactement de la même manière que nous le faisons. J' ai beaucoup parlé des tests utilisateur dans la première classe de cette série. Mais pour l'instant, nous allons juste dire qu'à ce stade du processus usertesting.com est l'outil le plus utile que vous pouvez envoyer, vous publiez une série de tâches, puis vous pouvez choisir parmi leur pool de testeurs et vous pouvez spécifier l'âge, compétences, une plate-forme sur laquelle ils sont sur, c'est comme 40$ par test, ça vaut bien la peine et ensuite vous pouvez lire la vidéo du test à environ 150 pour cent, comme 1,5 vitesses afin que vous puissiez les regarder plus vite, cela prend un certain temps si vous êtes faire une tonne de tests généralement vous voulez tester comme trois, cinq personnes sur chaque itération, mais vous pouvez accélérer la lecture. Il ressemble à quelque chose comme ça que vous passez par et en haut à droite de la page vous voyez cet utilisateur la première moitié que nous leur avons donnée et nous pouvons écrire des commentaires, nous pouvons horodater les notes sur la droite pour nous de revenir comme nous sommes examiner les tests. Donc, c'est absolument un outil inestimable lorsque vous faites quand vous êtes dans l'épaisse du développement et quand je travaillais dans le développement Agile, nous faisions tester chaque sprint par utilisateur. Donc, nous construisions quelque chose, puis envoyons quelques personnes à travers lui, qui nous laissons tester sur plusieurs plates-formes et voir à quoi il ressemblait vraiment et comment les utilisateurs comprenaient vraiment les choses. Nous ferions ça à chaque sprint. Donc, la façon dont vous préparez les tests utilisateur est avec le scénario. Donc, encore une fois je suis passé par cela en détail dans la classe de planification de cette série , mais vous identifiez essentiellement les histoires d'utilisateurs les plus importantes comme un utilisateur de retour essaie de contacter support et ensuite vous les exprimez comme scénarios pour le test. Donc, cela aide la personne qui fait le test à se mettre dans cet état d'esprit. Donc, vous diriez, vous avez trouvé une erreur dans votre compte et vous devez contacter le service à la clientèle et puis à partir de là, vous pouvez faire particulier, il ya toutes sortes de tests sur ce que vous voyez d'abord sur cette page ou où iriez-vous pour voir comment ils interprètent vos mises en page et votre site. Le dernier type de test sur lequel se concentrer est le chargement de page. Si vous êtes dans ce domaine et optimisez la vitesse et encore pour les prototypes, ce n'est pas toujours une variable, mais pour les sites de production, c'est une variable énorme. Donc, regardez Paul Irish a fait un excellent discours expliquant le chargement de la page et comment cela fonctionne et cela vous fait vraiment comprendre comment Internet fonctionne réellement. Que les choses affectant la vitesse de chargement de votre page par ordre d'importance sont numéro un cette chose appelée indice de vitesse qui est à quelle vitesse les choses au-dessus du pli se chargent. Vous voulez vraiment optimiser, vous pouvez faire comme des techniques folles pour aligner votre CSS pour juste les choses au-dessus du pli comme techniques vraiment avancées si vous êtes vraiment sérieux à propos de ce truc. La deuxième chose est que vous voulez réduire le nombre total de demandes, comme nous avons parlé avec des images, chaque fichier que vous liez est comme un appel téléphonique au serveur. Donc, c'est pourquoi vous feriez un sprite CSS parce que c'est un appel téléphonique au lieu de 50. Donc, réduire le nombre de demandes que vous effectuez , puis il s'agit de la taille de votre transfert d'image. Donc, bien sûr, l'optimisation de l'image est énorme, vous voulez couper vos jpegs, couper vos photos autant que vous le pouvez tout en maintenant la qualité et c'est à peu près la taille totale du transfert. Donc, toutes les autres choses que votre JavaScript, votre CSS, ils s' additionnent, ils sont beaucoup plus petits que les images mais ils ne s'additionnent, puis le nombre de demandes d'image. Donc encore une fois, CSS sprite ce genre de chose. Donc, c'est encore une fois, pour vraiment si vous allez pro sur votre site, pour le prototypage c'est juste qu'il est amusant de savoir parce que cela vous aide à comprendre Internet, mais vous pourriez ne pas passer trop de temps dessus pour un processus rapide. Donc, les principaux outils pour cela sont que vous allez YSlow, est le meilleur et c'est juste que vous pouvez faire comme une extension Chrome ou un signet sur elle et il suffit de cliquer sur le bouton et il va analyser votre site, puis bien sûr les outils Chrome Dev, plonger dans cela et vous pouvez voir les calendriers de chargement de chaque élément de la page, puis il y a aussi un site appelé test de page Web qui passera et fera une analyse pour vous. Donc, YSlow ressemble juste à ceci et c'est amusant faire juste parce que encore une fois cela vous donne une idée de comment l'Internet fonctionne que cela me donne une erreur c'est une analyse de twitter.com et ça dit même Twitter obtient un F. Supposément, ils n'utilisent pas un réseau de diffusion de contenu ou ils n'utilisent pas l'en-tête Expires. Donc, cela vous donne à nouveau un sens, un vocabulaire pour le langage technique de l'Internet, ce qui est assez intéressant. Alors, passez en revue et décrivez vos tests, revenez aux exigences de votre projet et faites un plan pour quels appareils vous devez tester et comment vous allez obtenir une mise à appareils vous devez tester et comment vous allez obtenir une mise àdisposition de ces appareils ou appareils virtuels, quels navigateurs vous allez tester et encore une fois, comment vous allez le faire, quels tests utilisateur vous voulez faire. C' est à propos d'un certain flux que vous voulez faire ? Est-ce qu'il s'agit de voir comment ces écrans fonctionnent sur différentes plateformes ? Encore une fois, exécutez quelques tests de vitesse juste pour le plaisir et si vous travaillez sur l'optimisation de votre site, retournez en arrière et travaillez à rendre vos ressources plus petites et plus concis. 10. Documentation: D' accord. Nous sommes à la dernière étape de notre processus de développement Web qui est la documentation, et oui pour les autres, mais certainement pour vous-même. C' est essentiel. La chose numéro un, ce sont les commentaires. Vous vous en remercierez beaucoup lorsque vous allez modifier votre site dans un mois et votre code est bien commenté et il est facile de comprendre quelles classes appliquées à quelles sections et quelles pages. Le gros test cependant est que quelqu'un d'autre peut lire et utiliser votre code. Il est très rare qu'un site soit simplement travaillé par une seule personne. Donc, il y a presque toujours quelqu'un qui vient plus tard. Surtout s'il s'agit d'un site client et qu'ils doivent être en mesure de comprendre le fonctionnement du site. Commenter votre code est une autre chose qui sépare les développeurs professionnels des amateurs. Vous n'avez pas à vous soucier d'ajouter trop de volume à vos fichiers et dans Sass en particulier, vous pouvez faire les commentaires de ligne unique qui ne sont que des lignes qui commencent deux barres obliques et ceux-ci seront supprimés du CSS compilé. Donc, lorsque vous ouvrez le fichier Sass, ils seront là pour vous aider, mais le CSS n'augmentera pas du tout en taille. Et puis il y a aussi des réguliers qui sont entre les barres obliques avec l'AsteraX et ce sont des commentaires multi-lignes. Ceux-ci seront conservés, donc si vous voulez avoir quelque chose d'important sur vos sources, ou sur vos sections, pour toujours apparaître dans le CSS, c'est bien, mais encore une fois les utilisateurs vraiment aussi. Il n'ajoute vraiment pas beaucoup et la taille du fichier, et vous pouvez même définir votre minificateur pour enlever tout l'espace blanc et enlever tous les commentaires aussi. Donc, vous n'avez pas à vous soucier d'ajouter trop de commentaires juste écrire toutes vos notes là-dedans comme fou. Ensuite, vous voulez absolument entrer et remplir votre fichier ReadMe. Donc, vous pouvez voir ici je suis retourné et vous ai dit quels dossiers sont dans cette démo, référentiel et dans mon compte GitHub, il y a un modèle, il y a un défaut et puis je travaille sur ce site de démonstration. Alors, retournez en arrière et remplissez ça. Donc, il est facile de comprendre à nouveau pour vous-même et pour les autres, et le niveau suivant est de faire un guide de style. Donc, cela vous servira bien à mesure que le site se développe. Si vous prévoyez que cela devienne plus grand, vous pouvez envisager un guide de style, et c'est nécessaire parce que nous ne concevons pas un élément statique. Poster, c'est comme si tout était enfermé que vous envoyez un dépresseur, c'est fait, et un livre que vous devez être un peu plus systématique, vous voulez vous assurer que les titres de chaque chapitre ont la même taille et la même position et peu importe, mais la taille est infiniment plus complexe. Donc, nous ne pouvons pas prescrire, nous ne pouvons pas faire de spécifications pour chaque page. Ils changent, ils sont réactifs, ils sont flexibles. Donc, un guide de style est vraiment le meilleur moyen de préserver l'apparence de votre site car il permet aux développeurs et aux concepteurs de poursuivre le travail déjà fait. Alisst Apart comme toujours a de grands articles à ce sujet. Ils en ont eu un sur la création de guides de style par Susan Robertson, qui est une grande développeur front-end. Elle a rassemblé toute une liste d'exemples de guides de style. Vous pouvez voir comment ceux-ci ont tendance à fonctionner et comment ils ont tendance à être utiles pour les développeurs Web et les concepteurs Web. [ inaudible] comme toujours, est une excellente référence pour l'image de marque et ce genre de choses et voici donc un exemple de ce que ressemble un bon guide de style pour un site Web. Donc, à gauche, vous voyez toute notre navigation. Nous avons abordé tous nos principaux éléments. La grille, la typographie, si nous avons des forums, des tables de navigation, où ils ont même des choses personnalisées qu'ils appellent des lattes ou des icônes spéciales de Freddy, Freddie et voici un exemple de leurs messages de rétroaction. Donc, en tant que concepteur, si vous concevez un nouveau site payant et que vous avez besoin d'afficher un message d'erreur, vous ne devriez pas en concevoir un tout nouveau. Tu devrais utiliser les trucs qui sont déjà là. Donc, quand nous avons un guide de style, je peux juste parcourir cela, je peux voir à quoi ça va ressembler, donc je peux le marquer dans mes compositions de conception, et puis il y a même du code et c'est une description de la façon d'utiliser leur classes particulières. Tous sur la même page. Donc, c'est génial et très utile. Yelp a un autre énorme où ils ont passé du temps à vous montrer tous les en-têtes, la typographie principale, tous les différents boutons et les classes que vous utiliseriez pour générer ce bouton. Donc encore une fois, quelqu'un ne va pas coder un autre petit bouton orange à partir de zéro, mais ils savent qu'il y en a déjà un. voici une que j'ai faite pour riffle où c'était à peu près, voici nos principales variables de couleur que nous utilisons et puis j'ai parcouru tous les, même les modèles JavaScript et certains des modèles d'assurance qualité que nous utilisions, était vraiment utile pour que tout cela soit codifié. Ils deviennent assez énormes comme vous pouvez le voir sur la gauche, c'est combien de temps ce guide de style a fini. Si vous faites juste un petit prototype, vous n'avez pas besoin de le faire, mais si vous faites n'importe quelle sorte de site, si votre site doit avoir une certaine longévité alors aller de l'avant et faire cela vous rendra la vie plus facile à long terme. L' essentiel est que vous couvrez tous les éléments de base du HTML, puis tous les appels spéciaux et tous les modules spéciaux qui peuvent être répliqués pour les mises en page futures et pour vos marques, la personnalité en ligne. Encore une fois, le laboratoire de modèles de Brad Frosters est un bon exemple. Une ressource cool que vous pourriez utiliser comme exemple pour créer votre propre guide de style. Donc, passez par et nettoyez, commentez votre code, puis vous pouvez télécharger. J' ai inclus une page de style me du modèle martelé de Simon Cox, qui est vraiment pratique, a tous ces éléments HTML. Donc, vous pouvez simplement passer par et vous assurer que cela ressemble comme vous l'attendez aussi et assurez-vous que tous ces éléments de base sont stylés, puis ajouter autres éléments et créer d'autres guides de style si vous le souhaitez, puis assurez-vous de remplir sur le readme.markDown pour votre repo et vous pouvez éditer markdown dans la pile edit ou des fichiers comme iA Writer sur votre bureau, puis simplement le recharger en utilisant l'arborescence source. Alors, c'est tout. On l'a fait. Vous avez construit un site Web entier, vous connaissez un bon processus et, espérons-le, vous continuerez à le faire vôtre et trouver les pièces qui fonctionnent le mieux pour vous et continuerez à apprendre. Donc, si vous avez quelque chose d'autre que vous aimeriez apprendre ou des questions sur tout ça, c'est beaucoup de choses. N' hésitez pas à me tweeter et à me faire savoir ce que vous pensez ou ce que vous souhaitez en savoir plus. Oui j'ai adoré, j'adore parler plus loin. Merci beaucoup. 11. Quoi ensuite ?: façon.