Création d`interfaces web: où commencer

Plus de brique et de mortier, le code informatique et les pixels sont à la base de l`économie du 21e siècle. Si vous avez déjà regardé « page Source » ou « Outils de développement » dans votre navigateur, vous avez probablement rencontré un gâchis de texte, et je me demandais comment cela rend le travail de la page Web.

Video: Développez des sites web avec Java EE: Créer une première application

Les développeurs Web appellent graphical User jenterfaces (GUI) collectivement l`extrémité avant d`une page Web, contrairement à l`arrière-plan. Le front-end est ce que l`utilisateur peut manipuler, prendre des mesures, et de l`utiliser. L`arrière-plan peut être considéré comme l`infrastructure qui contient et prend en charge toutes les informations et les tâches qu`implique le front-end.

Cet article est sur le front-end. Nous allons tracer le territoire afin que vous puissiez obtenir une compréhension des distinctions et des capacités qui font le front-end ce qu`elle est, et vous montrer comment commencer à donner un sens - et l`utilisation - des outils de développeur web pour créer attrayant et pages Web interactives.

Web Design par rapport au développement frontal

Dans les grandes organisations, la conception et le développement sont des tâches entreprises par des équipes de professionnels avec différents ensembles de compétences. Les concepteurs créeraient un visuel et une interaction spécifique aux développeurs conception- frontaux se mettre en œuvre.

Cependant, il y a une personne, aucune raison de limiter votre exploration: juste parce que vous êtes intéressé par le développement, ne signifie pas que vous avez pas de vision pour la conception, et vice-versa. Une quantité modeste de connaissances sur les technologies Web de base ou des principes de conception peut se révéler extrêmement bénéfique dans votre carrière ou votre entreprise.

développement front-end est à la fois plus et moins une activité de codage. Plus parce qu`il est plus que la conception de la moitié dans sa pensée: de nombreux concepts sont issus du monde de la production d`impression. Moins parce qu`il utilise tout code informatique, ce code est une variété qui est moins complexe, plus indulgent, et nécessite moins de connaissances de base de la programmation que d`autres langages de programmation web (dont beaucoup peuvent être trouvés sur le back-end).Quel langage de programmation à apprendre - Programmation WebQuel langage de programmation à apprendre - Programmation WebAujourd`hui, nous allons jeter un oeil sur les différents langages de programmation web qui alimentent l`Internet. Ceci est la quatrième partie d`une série de programmes de débutants. Dans la partie 1, nous avons appris la base de ...Lire la suite

Front-End du Web: balisage, feuille de style, et langages de programmation

La plupart des pages web sont construits avec un trio de technologies: langage de balisage hypertexte (HTML), les feuilles de style en cascade (CSS) et javascript (JS):

Video: Développez des sites web avec Java EE

• Les langages de balisage marquer comme un document HTML avec Mots clés. Mots-clés contenu sémantique et délimitent structurent le document. Les documents structurés peuvent être Styled.
• CSS est un Langue de feuille de style et descendant des directions d`impression style à un typographe de page (qui crée l`image finale imprimable pour une presse d`impression) - sur le web, CSS dicte la présentation du contenu comme la typographie et la mise en page générale, ainsi que des graphiques en plaçant.
• javascript, contrairement aux deux précédentes, est un langage de programmation. JS gère l`interaction et l`entrée utilisateur, et se concentre sur les événements un utilisateur produit. Pour compléter l`image un peu plus, à l`opposé d`un paradigme événementiel est celui où la programmation exécute indépendamment de l`entrée utilisateur.

HTML

Cela fait plus de vingt ans, et l`objectif principal de 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 est-HTML encore important? Pour le dire simplement, HTML est où la signification sémantique de votre contenu est. Ce qui est nécessaire pour les lecteurs de machines comme les robots des moteurs de recherche et les lecteurs d`écran (pour l`accessibilité). Au fil du temps, la pertinence de séparer ce qui est d`ordre sémantique par rapport à ce qui est structurel a augmenté plutôt que diminué au fil du temps. La version la plus récente de HTML (5) introduit des balises comme

Anatomie d`un élément HTML

éléments HTML, au minimum, sont des paires de balises d`ouverture et de fermeture, chaque balise enfermé dans , tels l`étiquette de paragraphe, ci-dessous en cyan. Les éléments peuvent prendre les attributs, comme ci-dessous en magenta, comme une « classe », ce qui rendrait l`élément un membre d`un groupe qui HTML et JS peuvent affecter. le style attribut, dont le contenu est écrit en rouge ci-dessous, est en fait une façon de créer une règle CSS unique juste pour cet élément. (CSS est mieux écrit au niveau du site ou d`une page, comme nous le verrons ci-dessous.)

Le résultat de ce balisage:

texte du paragraphe ordinaire 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 la vitesse par écrit et la création de lignes lisibles. On appelle cela sugarcoating syntaxique. La communauté HTML a produit quelques-unes de ces efforts.

Pourquoi utiliser un raccourci développeur centrée lorsque vous êtes, sans doute, un novice? En créant des choses dans le balisage plus simple, vous pouvez vous concentrer sur l`intention, et non pas l`expression, tout en validant contre une norme dernier de tous. Les fichiers sources que vous générez dans le balisage simplifié sera soit compiler en HTML valide, ou le compilateur génère une erreur à un numéro de ligne spécifique. Vous trouverez peut-être que plus instructif que la chasse par « soupe tag » pour un support d`angle manquant. Chacun d`eux ont besoin d`une pièce intermédiaire d`un logiciel pour les transcompile en HTML. (C`est supplémentaire crédit, après tout.)

• Haml (HTML Abstraction Markup) | Nécessite Ruby (que nous avons soigneusement écrit au sujet avant) compiler
• Jade | Nécessite Node.js (vous trouverez ici une introduction) compiler
• Slim | Nécessite Ruby pour compiler (comme ci-dessus)

CSS

CSS permet au contenu sémantique et la présentation de documents à être logés séparément, ce qui rend les caractéristiques stylistiques comme la mise en page, les couleurs et la typographie portable et applicable à différents documents. Lorsque le contenu et la conception visuelle sont séparés, le développeur gagne plus de flexibilité et de cohérence dans la conception visuelle.

Pourquoi tu en as besoin

sites regardent terrible et sans style peu attrayant. Bien qu`ils puissent être lisibles, CSS est la pierre angulaire de la hiérarchie de l`information visuelle en raison de la mise en page qui lui permet. Par exemple, la figure ci-dessous illustre en partie le menu de navigation actuel haut de makeuseof.com, sans CSS appliqué.

Notez que, en dehors de la typographie et la couleur, le menu est sans style vertical parce que c`est le style par défaut du navigateur. Il est peu probable que vous voudriez recréer l`Internet de 1990, de sorte que vous aurez envie d`une bonne dose et continue des connaissances CSS pour être vraiment compétent. En outre, avec la montée des appareils de taille différente connectés comme les iPhones, les tablettes, et ainsi de suite, l`une des compétences les plus importantes est devenue « Responsive Design » ou pages Web qui s`adaptent aux différentes tailles d`écran. Tout cela est accompli via CSS.

Anatomie d`une règle CSS

règles CSS sont écrites dans l`un des trois endroits: a) en ligne dans un élément, b) en créant un

Idéalement, les styles sont écrits dans des feuilles de style distinctes pages Web multiples peuvent faire référence. En utilisant le même ensemble de règles, les auteurs peuvent gagner du temps et de créer une présentation visuelle avec plus d`ordre et de cohérence. (Les styles en ligne ne peuvent pas vous aider à former le fondement du style site- ou même la page à l`échelle - c`est pourquoi ils sont mieux utilisés avec parcimonie pour répondre aux besoins spécifiques.)

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, du paragraphe: la règle applique aux éléments de paragraphe. La règle est enfermée dans des accolades {}, par opposition à . Dans ce cas, la règle fait la police de caractères pour le texte du paragraphe normal.

règles CSS peuvent obtenir plus complexe et compliqué que cette introduction permet. Voilà 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 obtenir plus, plus vite.

• SASS (et SCSS) | Nécessite Ruby, comme ci-dessus
• moins | Nécessite Node.js, comme ci-dessus

javascript

Quand beaucoup de gens pensent de codage, ils pensent comme instruction à l`ordinateur comment faire quelque chose. Telle est la tâche d`un langage de programmation, notre dernière cumulateur à l`équation frontal.

Les langages de programmation sont généralement classés par niveau d`abstraction qu`ils emploient dans leur sémantique, leurs langues, leurs ancêtres paradigmes et leurs disciplines de frappe. javascript inclassable simple, car il a été étendu en autant de cadres, pour tenir tant de fins différentes. Il est flexible, vaguement dérivée-de-la-C-famille, multi-paradigme, Caméléon hybride vaguement typé jouant Magpie avec les concepts de codage. Il est soit un excellent exemple d`une langue d`usage très général, ou un très mauvais exemple de différents types de langues.

Pourquoi tu en as besoin

Pourquoi apprendre javascript? Comme le souligne mon collègue, javascript a ses champions et ses détracteurs, en particulier dans le cas de son aptitude à l`apprenant pour la première fois. Il est peut-être la 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 aux côtés de Ruby ou PHP.6 Easiest langages de programmation à l`apprentissage pour les débutants6 Easiest langages de programmation à l`apprentissage pour les débutantsApprendre à programmer est de trouver la bonne langue tout autant qu`il est sur le processus édificateur. Voici les six premiers langages de programmation les plus faciles pour les débutants.Lire la suite

Cela dit, JS vanille ne va pas très loin - cadres sont responsables des pages web d`aujourd`hui.

cadres populaires

• Angulaire, cadre de JS Google pour les applications web comme GMail et le reste.
• JQuery, déjà couvert par MUO ici, WordPress qui alimente entre autres applications.
• React, construit par les légions d`ingénierie Facebook, est fait pour créer UIs.

Crédit supplémentaire (Avancé)

nature palimpseste de javascript mendie pour une imposition de la structure. Chacun des sugarcoats descend en dessous de certains de la voie vers la mise en œuvre

• CoffeeScript | Nécessite Node.js, comme ci-dessus
• tapuscrit | Nécessite Node.js, comme ci-dessus

Où commencer l`apprentissage

Depuis le développement frontal est maintenant 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 forme de cours d`apprentissage en ligne. Voici une liste organisée que nous avons fait pour nos lecteurs:

• Coursera (charge)
  Coursera recueille des cours en ligne des universités et des établissements d`enseignement. La fourchette de prix tombe de 50-250 USD pour un cours, mais ils annoncent un haut niveau de résultats de connaissances et de haute compétence.
• Assemblée générale Dash (gratuit)
  Assemblée générale est une option populaire pour la formation professionnelle rémunérée. Dash est leur offre gratuite et couvre HTML / CSS / JS.
• MakeUseOf.com - Apprendre à code 2017 Bundle (payant, Plug)
  accès à vie à 10 classes couvrant toute la gamme de développement web avant et back-end, pour aussi peu que 20 USD.
• Mozilla Developer Network (gratuit)
  Fait autorité MDN, mais prend part du style de la documentation plus que l`instruction de style en classe ou en ligne gamified offres uniquement.
• Un arbre (charge)
  Une autre offre en ligne, celui-ci payé par mois plutôt que cours. Cela vient à la recommandation de Karen X Cheng dans son poste Moyenne virale « Comment obtenir un emploi en tant que concepteur sans aller à une école de design. »
• Tutoriels Web Design par Envato Tuts + (Article mixte de gratuits et payants de qualité égale)
  Une foule d`articles uniques et série en plusieurs parties de haute qualité, spécifiques et des informations ciblées en général sur un sujet.

Commencer

L`un des avantages que le développement front-end détient pour le débutant est que, pour la plupart, il ne nécessite pas d`outils propriétaires coûteux: l`outil le plus fondamental du développement frontal est l`éditeur de texte associé avec le navigateur de votre choix :

• Les éditeurs de texte comme éditeur de texte Atom Git, Sublime Text (payant), ou le code VS par Microsoft
• Les navigateurs tels que Mozilla Firefox ou Google Chrome
• Il est utile, mais au-delà du champ d`application de cet article, d`avoir l`hébergement ou un serveur local (comme XAMPP) mis en place.

Plus pratique, si moins permanente, des alternatives sont des éditeurs en direct sur le Web tels que:

• Codepen.io
• JSbin.com

Short Cuts

structures HTML sont, pour la plupart, bien compris, et pas tout à fait digne de ressaisie avec une grande fréquence. Pour CSS, la feuille de style de site moyen est des milliers de lignes longues, et vous pouvez parier que peu modernes sont écrits exclusivement à la main. Et en termes d`interactivité, certaines normes ont vu le jour. En vertu de ces faits, vous constaterez que de nombreux développeurs frontaux utilisent des cadres prédéfinis comme épine dorsale, puis tweak, supprimer ou remplacer au besoin.

• Bootstrap, développé à l`origine par Twitter, contient HTML, CSS et JS modèles qui sont largement connues sur le web aujourd`hui. Bootstrap est presque lingua franca en commençant le développement web.
• Fondation se présente comme le cadre le plus avancé dans le monde, et est construit en mettant l`accent sur la petite taille et de la vitesse.

Matériel de référence

• A List Apart - Une publication A-list «pour les personnes qui rendent les sites »
• Puis-je utiliser - « tables de soutien pour HTML5, CSS3, etc. »
• CSS-Astuces - Une plaque tournante pour la communauté CSS et source de connaissances sur les meilleures pratiques et la compatibilité
• HTML Living Documentation Standard - « La norme Living - Edition Web Developer »
• HTML5 S`il vous plaît - « Utilisez le nouveau et brillant responsable »
• Smashing Magazine - « Pour les concepteurs Web professionnels et les développeurs »
• Docs - « plateforme web un site axé sur la collectivité qui vise à devenir une source complète et fiable pour la documentation développeur web. »

Conclusion

Nous espérons que vous avez apprécié cette orientation au monde du front-end. Comme vous pouvez le voir, le développement frontal est un champ qui est rempli avec beaucoup de possibilité, mais a beaucoup de points d`entrée. L`apprentissage, il ajoutera une compétence impressionnante à votre portefeuille, et vous permettre de passer à l`étape suivante dans votre carrière, ou de transition vers un tout nouveau.

Les développeurs: Qu`est-ce qui est dans votre pile front-end?

débutants: Que pourrions-nous avons inclus pour vous orienter?