Share
Au cours de cet article, nous allons faire un grand pas en avant dans le développement frontal et voir comment cela s’intègre dans notre vision plus large. Voici ce que nous allons couvrir:
Rendre des sites Web peut être une tâche ardue. Avec une multitude d'appareils, de navigateurs, de points d'accès, de bandes passantes, de langages de programmation et d'environnements, il peut être difficile de créer des expériences Web cohérentes. Grâce aux navigateurs et à un organisme de normalisation (le W3C), nous avons mis en place des piliers pour permettre un contrôle dans la mesure du possible. ces piliers sont HTML, CSS et JavaScript.
Ensemble, nous appelons ces piliers le pile frontale. Chaque langage a son propre objectif et les développeurs passent beaucoup de temps à s’assurer qu’ils ne brouillent pas les lignes de chacun d’entre eux, car ils peuvent se fondre les uns dans les autres. Donc, passons à la base ici. Les navigateurs modernes, disponibles dans le commerce: Safari, Edge, Chrome et Firefox, par exemple, ne comprennent que HTML, CSS et JavaScript. Ça y est, trois langues. À l'exception de Javascript, HTML et CSS sont déclaratifs statique langues. J'entends par là que vous ne programmez pas nécessairement dans l'un ou l'autre car il n'y a pas de vraie logique à écrire (à quelques petites exceptions près). JavaScript, qui a explosé au cours des dernières années sur Internet, est cependant un langage de programmation.
Lorsque j’ai essayé d’expliquer l’empilement frontal aux étudiants, j’ai toujours trouvé utile de faire référence au corps humain. Considérant que nous parlons dans le contexte de la conception atomique, cela porte par hasard ma métaphore sur!
Un corps, hierHTML est votre squelette. Cela détermine votre structure et votre posture. Un certain niveau de signification peut être dérivé d'une telle structure. Votre tête vient toujours en premier, cou, cage thoracique, hanches, jambes, pieds, jusqu’à vos phalanges.
HTML, ewL'ordre de éléments Je viens de décrire est votre homme typique. Cela peut être différent pour une baleine ou un tigre. Ainsi, HTML peut être différent pour les blogs, les magasins de commerce ou les plates-formes. Le HTML est tout au sujet de signification, et décrivant de manière significative à un navigateur Web ce qu'est une page. C’est devenu une science depuis quelque temps, car l’algorithme de Google lit essentiellement cette structure et en dérive le contenu de la page..
Plats à emporter: n'oubliez pas que le HTML fournit une structure pour votre expérience Web.
Le CSS est votre apparence. La couleur des cheveux, la couleur des yeux, la couleur de peau, les poils longs, les bras longs, les muscles, la longueur des ongles des orteils, etc. C'est même la façon dont vous coiffez vos cheveux ou le maquillage que vous mettez pour vous ressembler.
Son seul but est de styler ce qui serait autrement du HTML très simple et ennuyeux. Si nous nous promenions tous dans nos squelettes, l’attraction serait un problème. La même chose s'applique aux expériences Web.
JavaScript est vos manières et interactions. Que ce soit en claquant des doigts, en clignant des yeux, en souriant, en toussant, en marchant, si vous décidez de sauter ou non, tout est une question d'interactivité. La chose importante à retenir à propos de JavaScript est que lorsque vous fermez votre navigateur, tout est oublié (en général). Nous pouvons donc penser que JavaScript est l’interactivité d’un site Web en cours de session ou en interaction active. le site Web. Pensez à cliquer sur des popups ou des menus déroulants de navigation.
C'est quelqu'un qui marcheÀ ce stade, certains d'entre vous demandent peut-être où le cerveau ou la «logique» intervient, mais nous y arriverons. La chose la plus importante à tirer de cette section est que HTML, CSS et JavaScript sont actifs dans le navigateur. Ils travaillent tous ensemble pour créer une expérience Web «statique» que nous pourrons ensuite revenir à Atomic Design pour affiner..
DOM signifie Modèle d'objet de document. Le DOM est le résultat vivant de HTML, CSS et JavaScript coexistant dans une session activée par l'utilisateur..
Parce que le DOM est une représentation vivante et respirante du code source, il est important de comprendre qu'il a des limites. Le code que vous écrivez sous forme de fichiers HTML, CSS et JavaScript sur votre ordinateur est appelé code source. Cette source imite de très près ce que vous voyez dans le DOM, mais ce n'est pas la même chose. Le DOM est le produit dérivé de la manipulation et de la compilation de ces fichiers contenant le code source. Lorsque ces fichiers sont demandés à un navigateur, les langues sont «interprétées» et un site Web ou une page Web est créé. Si vous modifiez le code source, la représentation de ces fichiers source doit être actualisée afin d'afficher la version mise à jour dans votre navigateur..
Chaque langue a ses propres limites. CSS, par exemple, ne dispose pas d'un moteur de mise en page particulièrement puissant. Cela signifie qu’il peut s’avérer tout à fait un processus de générer des mises en page complexes dans le navigateur. HTML n'a pas de capacité de mise en page et est uniquement capable de fournir une structure et une hiérarchie pour que le site Web soit compris. JavaScript, étant un langage de programmation, a la capacité de manipuler HTML et CSS. Du fait que nous utilisons une pile à trois couches pour créer le front-end de tout site Web, ils doivent tous bien jouer les uns avec les autres, ainsi que se conformer à certains paramètres supplémentaires. Dans notre cas, ces paramètres font référence à différents navigateurs, appareils, systèmes d'exploitation, versions de navigateurs, etc. Le DOM est plus ou moins le même pour tous les types de navigateurs et distributeurs, mais à cause de cela, il y a beaucoup de règles à respecter pour créer une expérience cohérente..
CSS utilise un concept appelé le modèle de boîte. Le modèle de boîte comprend les propriétés suivantes:
Voici un schéma qui l'explique un peu mieux.
Petites boîtes, à flanc de collineLors de la conception d’une forme telle qu’un carré, l’immobilier qu’elle occupe comprend les éléments ci-dessus..
“Les chances ne sont jamais en votre faveur"
Oui, les grilles à cinq colonnes ne sont pas de bon augure pour les développeurs. Il est généralement plus facile de travailler avec des événements que des probabilités. Les développeurs ont tendance à utiliser des frameworks front-end tels que Bootstrap ou UIKIT, fournis avec des grilles pré-calculées contenant dix colonnes, douze colonnes ou peut-être plus. C'est une très bonne idée de demander à un développeur quel framework il compte utiliser, le cas échéant, afin d'aligner davantage votre conception sur HTML et CSS.
Fini les vieux jours du web. Étant donné que la majorité des sites Web évoluent vers la réactivité, le besoin de mises en page fluides est devenu très évident. Les grilles sont maintenant établies avec des pourcentages (10%, 30%, 50%) de conteneurs, qui s’effondrent ensuite à certains points de rupture qu'un développeur peut spécifier..
Les polices sur les sites Web fonctionnent très différemment de l’impression. Lorsque vous créez un site Web sur votre propre ordinateur, vous pouvez utiliser n’importe quelle police que vous avez installée sur votre système. C'est très bien pour vous, mais dès que ces fichiers sont transférés sur un autre ordinateur, le code source ne peut plus faire référence à la police que vous avez installée sur votre propre ordinateur, car il n'est plus connecté..
Il existe de nombreuses façons de résoudre ce dilemme, mais vous entendez souvent un développeur demander aux concepteurs d'utiliser Google Fonts. Les polices Google sont un ensemble de polices hébergées sur un CDN (réseau de distribution de contenu) accessible à tout ordinateur disposant d'une connexion active à Internet, ce qui signifie que même si la police spécifique n'est pas installée sur mon propre ordinateur, il peut encore rendre sur mon site. Soyez conscient de cela. Certaines polices ne sont pas non plus conçues pour le rendu sur les moteurs Web. Ils peuvent paraître radicalement différents, par exemple dans Photoshop, par rapport à un navigateur Web. Chaque programme rend les polices avec différents moteurs de rendu.
Maintenant que nous avons couvert certains principes fondamentaux, examinons quelques problèmes que les concepteurs ont tendance à ne pas prendre en compte dans leurs conceptions, mais qui sont vraiment importants pour l'expérience utilisateur..
Les événements sont des actions qu'un utilisateur prend lorsqu'il interagit avec votre site Web. JavaScript en a quelques-uns à prendre en compte, mais les exemples simples incluent «clic», «défilement», «mouseon» ou «mouseout», et «keydown» ou «keyup». Si vous voulez en savoir un peu plus sur les événements JavaScript, visitez Mozilla. Certains des événements que vous voyez ici ne sont pas nécessairement déclenchés par une interaction utilisateur.
Du point de vue du concepteur, il est primordial de comprendre ce qu'il advient de certains éléments ou de certaines sections de votre site Web une fois qu'un utilisateur a agi en conséquence. Que se passe-t-il lorsqu'un bouton est cliqué, par exemple? Ou existe-t-il une animation appliquée à une fenêtre modale lorsqu'elle se ferme au clic? Ce sont des questions auxquelles vous devez apporter des réponses, en particulier si votre projet a une portée prédéfinie. Selon le budget et les échéanciers, la «conception par interaction», comme on l'appelle dans les communautés Web, peut prendre un temps précieux à un projet..
Après un événement, les éléments sont laissés dans des «états». Un exemple courant étant les liens. Les liens ont plusieurs états: actif, concentrer, flotter. À quoi ressemblent vos liens quand ils ont été cliqués? Pendant que tu appuies? Quand la souris passe dessus? Ou quand ils sont touchés sur mobile?
La conception atomique peut vraiment être utile ici car vos guides de style peuvent facilement rendre compte de ces états lors de la création d'un atome tel qu'un bouton. State peut avoir un impact considérable sur votre expérience utilisateur, alors tenez-en compte lorsque vous utilisez des sites plus complexes..
Le mot à la mode «réactivité» bourdonne depuis un certain temps maintenant. En tant que développeurs, nous devons nous assurer que nos expériences Web sont cohérentes sur tous les appareils. Si vous êtes un pigiste, presque tous les clients demanderont à leur site d’être réactif. C'est devenu le «pain et le beurre» du Web. CSS fournit aux développeurs une technologie utile, telle que Media Queries, qui leur permet de personnaliser les présentations à certains «points d'arrêt»..
Les infrastructures frontales telles que Bootstrap et Foundation sont conçues pour faciliter la mise en œuvre de la réactivité en concevant des grilles réactives à base de pourcentages avec lesquelles les développeurs peuvent travailler. La principale conséquence à retenir ici n’est pas la façon dont les grilles de conception réactives fonctionnent, mais bien plus encore ce pour quoi elles sont conçues.
C'est pour cette fois! Dans le prochain article, nous examinerons le backend et comment nous pouvons utiliser un état d'esprit de conception atomique pour améliorer notre compréhension de la logique et des compétences en programmation..
Accentsconagua