Partager:
Création d'interfaces Web par où commencer
Plus que de la brique et du mortier, le code informatique et les pixels sont le fondement de l’économie du XXIe siècle. Si vous avez déjà regardé “Source de la page” ou “Outils de développement” dans votre navigateur, vous avez probablement rencontré un désordre de texte et vous vous demandez comment cela permet de faire fonctionner la page Web..
Les développeurs Web appellent graphical User jenterfaces (GUI) collectivement les l'extrémité avant d'une page Web, contrairement au back-end. Le front-end est ce que l'utilisateur peut manipuler, utiliser avec et autrement utiliser. Le back-end peut être considéré comme l'infrastructure qui contient et supporte 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 fonctionnalités qui font du système frontal ce qu’il est, et vous montrer comment commencer à donner du sens - et à utiliser - les outils de développement Web pour créer des contenus attrayants et innovants. pages Web interactives.
Web design versus développement frontal
Dans les grandes organisations, la conception et le développement sont des tâches confiées à des équipes de professionnels dotés de compétences différentes. Les concepteurs créeraient un design visuel et interactif spécifique; les développeurs front-end le mettraient en œuvre.
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 petite quantité 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 en amont est à la fois une activité de codage. Plus encore parce que sa conception fait plus de la moitié du design: de nombreux concepts sont tirés du monde de la production imprimée. Moins parce qu’en utilisant du code informatique, ce code est une variété moins complexe, plus tolérante et qui nécessite moins de connaissances de base en programmation que d’autres langages de programmation Web (dont la plupart se trouvent sur le back-end). Apprendre - Programmation Web Quel langage de programmation apprendre - Programmation Web Aujourd'hui, nous allons examiner les différents langages de programmation Web qui font fonctionner Internet. Ceci est la quatrième partie d'une série de programmation pour débutants. Dans la première partie, nous avons appris les bases de… Read More .
Le Web frontal: balisage, feuille de style et langages de programmation
La plupart des pages Web reposent sur trois 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 langage de feuille de style et descendant des instructions de style d'impression vers un compositeur de page (qui crée l'image imprimable finale pour une presse à imprimer); Sur le Web, CSS dicte la présentation du 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 les interactions et les entrées utilisateur et se concentre sur les événements produits par l'utilisateur. 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é au lecteur de la structure nécessaire pour analyser le document..
Pourquoi tu en as besoin
Pourquoi le HTML est-il toujours important? Pour le dire simplement, HTML est la base de la signification sémantique de votre contenu. C'est nécessaire pour les lecteurs de machines comme les robots 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 telles que
Anatomie d'un élément HTML
Les éléments HTML, au minimum, sont des paires de balises d’ouverture et de fermeture, chaque balise étant placée entre
Le résultat de ce balisage:
Texte de paragraphe simple ici.
Crédit supplémentaire (avancé)
Les développeurs de toutes sortes sont obsédés par la rapidité d'exécution. À cette fin, ils optimiseront eux-mêmes les langues pour accélérer la rédaction et la création de lignes lisibles. C'est ce qu'on appelle la dragéification syntactique. La communauté HTML a produit quelques-uns de ces efforts.
Pourquoi utiliser un raccourci axé sur le développeur alors que vous êtes probablement un novice? En créant des éléments avec un balisage plus simple, vous pouvez vous concentrer sur l'intention et non sur l'expression, tout en validant par rapport à une norme. Les fichiers source que vous générez dans le balisage simplifié seront soit compilés en HTML valide, soit le compilateur émettra une erreur à un numéro de ligne spécifique. Vous trouverez peut-être cela plus instructif que de traquer “soupe tag” pour 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) | Requiert Ruby (dont nous avons soigneusement parlé avant 3 façons interactives, amusantes et gratuites de commencer à apprendre le langage de programmation Ruby 3. Manières interactives, amusantes et gratuites de commencer à apprendre le langage de programmation Ruby Ruby 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 de Ruby on Rails, mais également de manière autonome. Si vous êtes curieux de savoir ce que Ruby (pas… Read More) compiler
- Jade | Requiert Node.js (vous trouverez une introduction ici Qu'est-ce que Node.JS et Pourquoi devrais-je m'en soucier? [Développement Web] Qu'est-ce que Node.JS et Pourquoi devrais-je m'en soucier? [Développement Web] JavaScript est juste un côté client Un langage de programmation qui tourne dans le navigateur, pas plus. Node.js est une façon d’exécuter JavaScript sur le serveur, mais c’est beaucoup plus… (Lire la suite) à compiler
- Slim | Requiert Ruby pour compiler (comme ci-dessus)
CSS
CSS permet d’héberger séparément le contenu sémantique et la présentation de documents, rendant ainsi les caractéristiques stylistiques telles que 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 non stylés semblent terribles et peu attrayants. Bien qu'ils puissent être lisibles, CSS est la pierre angulaire de la hiérarchie des informations visuelles en raison de la présentation qu'il permet. Par exemple, la figure ci-dessous illustre partiellement le menu de navigation supérieur actuel de makeuseof.com, sans application de code CSS..
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 aurez donc besoin d'une dose saine et continue de connaissances CSS pour être réellement compétent. De plus, avec l’apparition d’appareils de tailles différentes et connectés tels que les iPhones, les tablettes, etc., l’une des compétences les plus importantes est devenue “Conception sensible,” ou des pages Web qui s’adaptent à différentes tailles d’écran. Tout cela se fait via CSS.
Anatomie d'une règle CSS
Les règles CSS sont écrites à l’un des trois emplacements suivants: a) en ligne dans un élément, b) en créant un