Publicité
Plus que de la brique et du mortier, le code informatique et les pixels sont le fondement de l'économie du 21e siècle. Si vous avez déjà regardé "Source de page" ou "Outils de développeur" dans votre navigateur, vous avez probablement rencontré un désordre de texte et vous êtes demandé comment cela pouvait faire fonctionner la page Web.
Les développeurs Web appellent graphical User jenterfaces (GUI) collectivement l'extrémité avant d'une page Web, contrairement au back-end. Le frontal est ce que l'utilisateur peut manipuler, prendre des mesures et utiliser autrement. Le back-end peut être considéré comme l'infrastructure qui contient et prend en charge toutes les informations et tâches impliquées par le front-end.
Cet article concerne le front-end. Nous allons cartographier le territoire afin que vous puissiez comprendre les distinctions et les capacités qui font du front-end ce il est, et vous montrer comment commencer à donner un sens - et à utiliser - des outils de développeur Web pour créer un Web attrayant et interactif pages.
Conception Web contre développement frontal
Dans les grandes organisations, la conception et le développement sont des tâches entreprises par des équipes de professionnels aux compétences différentes. Les concepteurs créeraient un design visuel et d'interaction spécifique; les développeurs frontaux l'implémenteraient.
Pour un individu, cependant, il n'y a aucune raison de limiter votre exploration: ce n'est pas parce que vous êtes intéressé par le développement que vous n'avez pas de vision du design, et vice-versa. Une quantité modeste de connaissances sur les technologies Web de base ou les principes de conception peut s'avérer extrêmement bénéfique pour votre carrière ou votre entreprise.
Le développement frontal est à la fois plus et moins une activité de codage. Plus parce que c'est plus de la moitié du design dans sa pensée: de nombreux concepts sont tirés du monde de la production imprimée. Moins parce qu'il utilise du code informatique, ce code est une variété moins complexe, plus indulgente et nécessite moins de connaissances de base en programmation que d'autres langages de programmation Web (dont beaucoup peuvent être trouvés sur le back-end) Quel langage de programmation apprendre - Programmation WebAujourd'hui, nous allons jeter un œil aux différents langages de programmation Web qui alimentent Internet. Ceci est la quatrième partie d'une série de programmation pour débutants. Dans la partie 1, nous avons appris les bases de ... Lire la suite .
Front-end du Web: balisage, feuille de style et langages de programmation
La plupart des pages Web sont construites avec un trio de technologies: langage de balisage hypertexte (HTML), feuilles de style en cascade (CSS) et JavaScript (JS):
- Langages de balisage comme HTML marquer un document avec Mots clés. Les balises délimitent le contenu sémantique et structurent le document. Les documents structurés peuvent être stylé.
- CSS est un langue de la feuille de style et descendant des instructions de style d'impression à un compositeur de pages (qui crée l'image imprimable finale pour une presse à imprimer); sur le Web, CSS dicte la présentation de contenu comme la typographie et la mise en page en général, ainsi que le placement de graphiques.
- JavaScript, contrairement aux deux précédents, est un langage de programmation. JS gère l'interaction et la saisie utilisateur, et se concentre sur les événements qu'un utilisateur produit. Pour compléter l'image un peu plus, l'opposé d'un paradigme événementiel est celui où la programmation s'exécute indépendamment de l'entrée de l'utilisateur.
HTML
Cela fait plus de vingt ans, et le but principal du HTML reste le même: séparer le texte destiné à un lecteur de la structure nécessaire pour analyser le document.
Pourquoi tu en as besoin
Pourquoi le HTML est-il toujours important? Pour faire simple, le HTML est le sens sémantique de votre contenu. Cela est nécessaire pour les lecteurs de machines comme les moteurs de recherche et les lecteurs d'écran (pour l'accessibilité). Au fil du temps, la pertinence de séparer ce qui est sémantique de ce qui est structurel a augmenté plutôt que diminué au fil du temps. La version la plus récente de HTML (5) a introduit des balises comme
Anatomie d'un élément HTML
Les éléments HTML, au minimum, sont des paires de balises d'ouverture et de fermeture, chaque balise incluse dans
Le résultat de ce balisage:
Texte clair du paragraphe ici.
Crédit supplémentaire (avancé)
Les développeurs de toutes sortes sont obsédés par la vitesse d'exécution. À cette fin, ils optimiseront les langues elles-mêmes pour accélérer l'écriture et créer des lignes lisibles. C'est appelé enrobage syntaxique. La communauté HTML a produit quelques-uns de ces efforts.
Pourquoi utiliser un raccourci axé sur les développeurs lorsque vous êtes, vraisemblablement, un novice? En créant des choses dans un balisage plus simple, vous pouvez vous concentrer sur l'intention, pas sur l'expression, tout en validant par rapport à un standard standard. Les fichiers source que vous générez dans le balisage simplifié seront soit compilés en HTML valide, soit le compilateur générera une erreur sur un numéro de ligne spécifique. Vous trouverez peut-être cela plus instructif que de chercher dans la «soupe aux étiquettes» un support d'angle manquant. Ils nécessitent chacun un logiciel intermédiaire pour les transcompiler en HTML. (Il est supplémentaire crédit, après tout.)
- Haml (HTML Abstraction Markup Language) | A besoin Rubis (dont nous avons déjà réfléchi 3 façons interactives, amusantes et gratuites de commencer à apprendre le langage de programmation RubyRuby est un langage de script expressif de très haut niveau. Il est utilisé sur le Web principalement dans le cadre du cadre de développement Web Ruby on Rails, mais également de manière autonome. Si vous êtes curieux de savoir ce que Ruby (pas ... Lire la suite ) compiler
- Jade [URL cassée supprimée] | A besoin Node.js (vous trouverez une introduction ici Qu'est-ce que Node. JS et pourquoi devrais-je m'en soucier? [Développement web]JavaScript est juste un langage de programmation côté client qui s'exécute dans le navigateur, non? Plus maintenant. Node.js est un moyen d'exécuter JavaScript sur le serveur; mais c'est bien plus encore. Si... Lire la suite ) compiler
- Svelte | Nécessite Ruby pour être compilé (comme ci-dessus)
CSS
CSS permet au contenu sémantique et à la présentation de documents d'être hébergés séparément, ce qui rend les fonctionnalités stylistiques comme la mise en page, les couleurs et la typographie portables et applicables à différents documents. Lorsque le contenu et la conception visuelle sont séparés, le développeur gagne en flexibilité et en cohérence dans la conception visuelle.
Pourquoi tu en as besoin
Les sites Web dépourvus de style sont terribles et peu attrayants. Bien qu'ils puissent être lisibles, CSS est la pierre angulaire de la hiérarchie visuelle des informations en raison de la mise en page qu'il permet. Par exemple, la figure ci-dessous illustre en partie le menu de navigation supérieur actuel de makeuseof.com, sans CSS appliqué.
Notez qu'en dehors de la typographie et de la couleur, le menu sans style est vertical car c'est le style par défaut du navigateur. Il est peu probable que vous souhaitiez recréer Internet de 1990, vous souhaiterez donc qu'une dose saine et continue de connaissances CSS soit vraiment compétente. De plus, avec la montée en puissance d'appareils de tailles différentes et connectés comme les iPhones, les tablettes, etc., un des compétences les plus importantes sont devenues «Responsive Design» ou des pages Web qui s'adaptent à différents écrans tailles. Tout cela est accompli via CSS.
Anatomie d'une règle CSS
Les règles CSS sont écrites à l'un des trois emplacements: a) en ligne dans un élément, b) en créant un
Idéalement, les styles sont écrits dans des feuilles de style distinctes auxquelles plusieurs pages Web peuvent faire référence. En utilisant le même ensemble de règles, les auteurs peuvent gagner du temps et créer une présentation visuelle avec plus d'ordre et de cohérence. (Les styles intégrés ne peuvent pas vous aider à former le socle du style du site ou même de la page - c'est pourquoi ils sont mieux utilisés avec parcimonie pour répondre à des besoins spécifiques.)
Les règles CSS commencent par un sélecteur, écrit en vert ci-dessous. Dans ce cas, le sélecteur de la règle est p, pour le paragraphe: la règle s'applique aux éléments de paragraphe. La règle est placée entre {accolades}, par opposition à
Les règles CSS peuvent devenir plus complexes et compliquées que ne le permet cette introduction. C’est pourquoi, en termes de temps engagé, vous pouvez vous attendre CSS prendra beaucoup plus de temps à maîtriser que HTML.
Crédit supplémentaire (avancé)
Tout comme HTML, CSS a ses optimisations pour ceux qui veulent en faire plus, plus rapidement.
- TOUPET (et SCSS) | Nécessite Ruby, comme ci-dessus
- Moins | Nécessite Node.js, comme ci-dessus
Javascript
Quand beaucoup de gens pensent au codage, ils le voient comme une instruction à l’ordinateur commentfaire quelque chose. C'est la tâche d'un langage de programmation, notre dernier ajout à l'équation frontale.
Les langages de programmation sont généralement classés selon le niveau d'abstraction qu'ils utilisent dans leur sémantique, leurs langages ancêtres, leur paradigmes, et leur disciplines de dactylographie. JavaScript défie toute classification simple, car il a été étendu à de nombreux frameworks, pour s'adapter à de nombreux objectifs différents. C'est un caméléon hybride flexible, vaguement dérivé de la famille C, multi-paradigme, typé de manière lâche, jouant à la pie avec des concepts de codage. C'est soit un excellent exemple d'une langue très générale, soit un très mauvais exemple de nombreux types de langues différents.
Pourquoi tu en as besoin
Pourquoi apprendre JavaScript? Comme le souligne mon collègue, JavaScript a ses champions et ses détracteurs 6 langages de programmation les plus faciles à apprendre pour les débutantsApprendre à programmer, c'est tout autant trouver le bon langage que le processus d'édification. Voici les six premiers langages de programmation les plus simples pour les débutants. Lire la suite , en particulier dans le cas de sa pertinence pour les nouveaux apprenants. Il est peut-être la le langage de programmation le plus populaire d'aujourd'hui. Bien qu'il ne donne pas une base solide pour comprendre le reste du royaume de codage, il y a un bon argument à faire pour apprendre JS avec Ruby ou PHP.
Cela dit, vanilla JS ne va pas très loin - les frameworks sont responsables des pages web d'aujourd'hui.
Cadres populaires
- Angular, le framework JS de Google pour les applications Web comme GMail et les autres.
- JQuery Rendre le Web interactif: une introduction à jQueryjQuery est une bibliothèque de script côté client que presque tous les sites Web modernes utilisent - elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus utilisée ... Lire la suite , déjà couvert par MUO ici Rendre le Web interactif: une introduction à jQueryjQuery est une bibliothèque de script côté client que presque tous les sites Web modernes utilisent - elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus utilisée ... Lire la suite , qui alimente WordPress entre autres applications.
- Réagir, construit par les légions d'ingénierie de Facebook, est conçu pour créer des interfaces utilisateur.
Crédit supplémentaire (avancé)
La nature palimpseste de JavaScript demande une certaine imposition de structure. Chacun des sucriers ci-dessous va dans une certaine mesure vers la mise en œuvre
- CoffeeScript | Nécessite Node.js, comme ci-dessus
- Manuscrit | Nécessite Node.js, comme ci-dessus
Par où commencer à apprendre
Étant donné que le développement frontal est désormais largement considéré comme une compétence professionnelle cruciale pour les travailleurs du savoir de toutes sortes, vous trouverez de nombreux points de départ sous la forme de cours en ligne. Voici une liste organisée que nous avons faite pour nos lecteurs:
-
Coursera (Payé)
Coursera recueille des cours en ligne des universités et des institutions d'apprentissage. La fourchette de prix passe de 50 à 250 USD pour un cours, mais ils annoncent un niveau élevé de connaissances et des résultats de compétence élevés. -
Dash de l'Assemblée générale (Gratuit)
L'assemblée générale est une option populaire pour l'enseignement professionnel rémunéré. Dash est leur offre gratuite et couvre HTML / CSS / JS. -
MakeUseOf.com - Le pack Apprendre à coder 2017 (Payé, Plug)
Accès à vie à 10 classes couvrant toute la gamme du développement web front-end et back-end, pour aussi peu que 20 USD. -
Réseau de développeurs Mozilla (Gratuit)
MDN fait autorité, mais il préfère le style de documentation à l'enseignement en classe ou aux offres en ligne uniquement gamifiées. -
Cabane dans les arbres (Payé)
Une autre offre en ligne, celle-ci payée par mois plutôt que bien sûr. Cela vient à la recommandation de Karen X Cheng dans son post viral Medium "Comment obtenir un emploi de designer sans aller à l'école de design.” -
Tutoriels de conception Web par Envato Tuts + (Mélange de contenu gratuit et payant de qualité égale)
Une multitude d'articles uniques et de séries en plusieurs parties d'informations de haute qualité, spécifiques et ciblées, généralement sur un sujet.
Commencer
L'un des avantages du développement frontal pour le débutant est que, pour la plupart, il ne nécessite pas outils propriétaires coûteux: l'outil de développement frontal le plus basique est l'éditeur de texte associé au navigateur de votre choix:
- Les éditeurs de texte aiment Éditeur de texte Atom de Git, Texte sublime (payé), ou VS Code par Microsoft
- Navigateurs tels que Mozilla Firefox ou Google Chrome
- Il est utile, mais au-delà de la portée de cet article, d'avoir un hébergement ou un serveur local (tel que XAMPP) installer.
Les éditeurs en direct sur le Web, tels que:
- Codepen.io
- JSbin.com
Raccourcis
Les structures HTML sont, pour la plupart, bien comprises et ne méritent pas d'être retapées à grande fréquence. Pour CSS, la feuille de style d'un site moyen comporte des milliers de lignes, et vous pouvez parier que peu de pages modernes sont écrites exclusivement à la main. Et en termes d'interactivité, certaines normes ont émergé. En vertu de ces faits, vous constaterez que de nombreux développeurs frontaux utilisent des infrastructures prédéfinies comme colonne vertébrale, puis peaufinent, suppriment ou remplacent selon les besoins.
- Amorcer, développé à l'origine par Twitter, contient des modèles HTML, CSS et JS qui sont largement répandus sur le Web aujourd'hui. Bootstrap est presque un lingua franca pour commencer le développement web.
- Fondation se présente comme le cadre le plus avancé au monde et est construit en mettant l'accent sur la petite taille et la vitesse.
Matériel de référence
- Une liste à part - Une publication A-list, «Pour les personnes qui créent des sites Web»
- Puis-je utiliser - «Tableaux de support pour HTML5, CSS3, etc.»
- Astuces CSS - Un hub pour la communauté CSS et une fontaine de connaissances sur les bonnes pratiques et la compatibilité
- Documentation HTML Living Standard - «The Living Standard - Edition pour développeur Web»
- HTML5 s'il vous plaît - «Utilisez le nouveau et le brillant de façon responsable»
- Smashing Magazine - «Pour les concepteurs et développeurs Web professionnels»
Conclusion
Nous espérons que vous avez apprécié cette orientation vers le monde du front-end. Comme vous pouvez le voir, le développement frontal est un domaine qui offre de nombreuses possibilités, mais qui comporte de nombreux points d'entrée. L'apprentissage ajoutera une compétence impressionnante à votre portefeuille et vous permettra de passer à l'étape suivante de votre carrière ou de passer à une toute nouvelle.
Développeurs: Que contient votre pile frontale?
Débutants: Quoi d'autre aurions-nous pu inclure pour vous orienter?
Rodrigo aime la rédaction technique, le développement Web et l'expérience utilisateur. Lorsqu'il n'est pas en train de réfléchir trop, de frapper un clavier ou de pousser des pixels, il aime les grands espaces et la culture cyberpunk.