Erstellen von Webschnittstellen: Wo soll ich anfangen?

Werbung

Computercode und Pixel sind mehr als nur stationär, sie bilden die Grundlage der Wirtschaft des 21. Jahrhunderts. Wenn Sie sich jemals in Ihrem Browser "Seitenquelle" oder "Entwicklertools" angesehen haben, sind Sie wahrscheinlich auf ein Durcheinander von Text gestoßen und haben sich gefragt, wie die Webseite dadurch funktioniert.

Webentwickler rufen an Graphisch U.ser ichSchnittstellen (GUIs) zusammen die Vorderes Ende einer Webseite im Gegensatz zum Backend. Das Front-End ist das, was der Benutzer manipulieren, Maßnahmen ergreifen und anderweitig verwenden kann. Das Back-End kann als die Infrastruktur betrachtet werden, die alle vom Front-End implizierten Informationen und Aufgaben enthält und unterstützt.

Dieser Artikel handelt vom Frontend. Wir werden das Gebiet kartieren, damit Sie die Unterschiede und Fähigkeiten verstehen, die das Front-End ausmachen Es zeigt Ihnen, wie Sie beginnen, die Tools von Webentwicklern zum Erstellen eines ansprechenden und interaktiven Webs zu verstehen und zu verwenden Seiten.

Webdesign versus Front-End-Entwicklung

In großen Organisationen sind Design und Entwicklung Aufgaben, die von Teams von Fachleuten mit unterschiedlichen Fähigkeiten ausgeführt werden. Designer würden ein spezifisches visuelles und Interaktionsdesign erstellen. Front-End-Entwickler würden es implementieren.

Für einen Einzelnen gibt es jedoch keinen Grund, Ihre Erkundung einzuschränken: Nur weil Sie an Entwicklung interessiert sind, bedeutet dies nicht, dass Sie keine Vision für Design haben und umgekehrt. Eine bescheidene Menge an Wissen über grundlegende Webtechnologien oder Designprinzipien kann sich als äußerst vorteilhaft für Ihre Karriere oder Ihr Unternehmen erweisen.

Die Front-End-Entwicklung ist mehr und weniger eine Codierungsaktivität. Mehr, weil es mehr als die Hälfte des Designs ist: Viele Konzepte stammen aus der Welt der Druckproduktion. Weniger, weil dieser Code während der Verwendung von Computercode weniger komplex und verzeihend ist und weniger Grundkenntnisse in der Programmierung erfordert als andere Web-Programmiersprachen (von denen viele im Back-End zu finden sind) Welche Programmiersprache Sie lernen sollten - WebprogrammierungHeute werfen wir einen Blick auf die verschiedenen Web-Programmiersprachen, die das Internet antreiben. Dies ist der vierte Teil einer Programmierreihe für Anfänger. In Teil 1 haben wir die Grundlagen von ... Weiterlesen .

Das Front-End des Webs: Markup, Stylesheet und Programmiersprachen

Die meisten Webseiten werden mit drei Technologien erstellt: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) und JavaScript (JS):

• Auszeichnungssprachen Markieren Sie wie HTML ein Dokument mit Stichworte. Tags markieren semantischen Inhalt und strukturieren das Dokument. Strukturierte Dokumente können sein gestylt.
• CSS ist ein Stylesheet-Sprache und Nachkomme von Anweisungen im Druckstil an einen Seiten-Compositor (der das endgültige druckbare Bild für eine Druckmaschine erstellt); Im Web schreibt CSS die Präsentation von Inhalten wie Typografie und Layout im Allgemeinen sowie die Platzierung von Grafiken vor.
• JavaScript ist im Gegensatz zu den beiden vorherigen a Programmiersprache. JS kümmert sich um Interaktion und Benutzereingaben und konzentriert sich auf die Ereignisse, die ein Benutzer erzeugt. Um das Bild ein wenig mehr auszufüllen, ist das Gegenteil eines ereignisgesteuerten Paradigmas eines, bei dem die Programmierung unabhängig von Benutzereingaben ausgeführt wird.

HTML

Es ist über zwanzig Jahre her und der Hauptzweck von HTML bleibt derselbe: den für einen Leser bestimmten Text von der Struktur zu trennen, die zum Parsen des Dokuments erforderlich ist.

Warum brauchst Du es

Warum ist HTML immer noch wichtig? Einfach ausgedrückt, in HTML liegt die semantische Bedeutung Ihres Inhalts. Dies ist für Maschinenleser wie Suchmaschinenspinnen und Bildschirmleser erforderlich (für die Barrierefreiheit). Im Laufe der Zeit hat die Relevanz der Trennung von Semantik und Struktur eher zugenommen als abgenommen. Die neueste Version von HTML (5) führte Tags wie ein

,

Anatomie eines HTML-Elements

HTML-Elemente sind mindestens Paare von Tags öffnen und schließen, jedes Tag eingeschlossen in , wie das Absatz-Tag, unten in Cyan. Elemente können nehmen Attribute, wie unten in Magenta, z. B. eine „Klasse“, die das Element zu einem Mitglied einer Gruppe macht, auf die sich HTML und JS auswirken können. Das Stil Das Attribut, dessen Inhalt unten rot geschrieben ist, ist eine Möglichkeit, eine einmalige CSS-Regel nur für dieses Element zu erstellen. (CSS wird am besten auf Website- oder Seitenebene geschrieben, wie wir weiter unten diskutieren werden.)

Das Ergebnis dieses Markups:

Einfacher Absatztext hier.

Extra Credit (Advanced)

Entwickler aller Art sind von der Geschwindigkeit der Ausführung besessen. Zu diesem Zweck optimieren sie die Sprachen selbst, um das Schreiben zu beschleunigen und lesbare Zeilen zu erstellen. Das nennt man syntaktische Zuckerbeschichtung. Die HTML-Community hat einige dieser Bemühungen unternommen.

Warum eine entwicklerorientierte Verknüpfung verwenden, wenn Sie vermutlich ein Anfänger sind? Indem Sie Dinge in einem einfacheren Markup erstellen, können Sie sich auf die Absicht konzentrieren, nicht auf den Ausdruck, während Sie zuletzt anhand eines Standards validieren. Die Quelldateien, die Sie im vereinfachten Markup generieren, werden entweder in gültiges HTML kompiliert oder der Compiler gibt einen Fehler bei einer bestimmten Zeilennummer aus. Vielleicht finden Sie das lehrreicher, als in der „Tag-Suppe“ nach einer fehlenden spitzen Klammer zu suchen. Sie benötigen jeweils eine Zwischensoftware, um sie in HTML umzuwandeln. (Es ist extra Kredit schließlich.)

• Haml (HTML Abstraction Markup Language) | Benötigt Rubin (worüber wir vorher nachdenklich geschrieben haben 3 Interaktive, unterhaltsame und kostenlose Möglichkeiten zum Erlernen der Ruby-ProgrammierspracheRuby ist eine ausdrucksstarke Skriptsprache auf sehr hohem Niveau. Es wird im Web hauptsächlich als Teil des Ruby on Rails-Webentwicklungsframeworks verwendet, ist aber auch eigenständig. Wenn Sie neugierig sind, was Ruby (nicht ... Weiterlesen ) kompilieren
• Jade [Gebrochene URL entfernt] | Benötigt Node.js (Eine Einführung finden Sie hier Was ist der Knoten? JS und warum sollte es mich interessieren? [Web Entwicklung]JavaScript ist nur eine clientseitige Programmiersprache, die im Browser ausgeführt wird, oder? Nicht mehr. Mit Node.js können Sie JavaScript auf dem Server ausführen. aber es ist auch so viel mehr. Wenn... Weiterlesen ) kompilieren
• Schlank | Erfordert Ruby zum Kompilieren (wie oben)

CSS

Mit CSS können semantische Inhalte und Dokumentpräsentationen getrennt untergebracht werden, sodass Stilmerkmale wie Layout, Farben und Typografie portabel sind und auf verschiedene Dokumente angewendet werden können. Wenn Inhalt und visuelles Design getrennt sind, gewinnt der Entwickler mehr Flexibilität und Konsistenz beim visuellen Design.

Warum brauchst Du es

Nicht gestaltete Websites sehen schrecklich und unattraktiv aus. Obwohl sie möglicherweise lesbar sind, ist CSS aufgrund des aktivierten Layouts der Eckpfeiler der visuellen Informationshierarchie. Die folgende Abbildung zeigt beispielsweise teilweise das aktuelle obere Navigationsmenü von makeuseof.com, ohne dass CSS angewendet wird.

Beachten Sie, dass das nicht gestaltete Menü, abgesehen von Typografie und Farbe, vertikal ist, da dies der Standardstil des Browsers ist. Es ist unwahrscheinlich, dass Sie das Internet von 1990 neu erstellen möchten. Daher möchten Sie, dass eine gesunde und kontinuierliche Dosis CSS-Wissen wirklich kompetent ist. Mit dem Aufkommen von Geräten unterschiedlicher Größe und verbundener Geräte wie iPhones, Tablets usw. wird eines Zu den wichtigsten Fähigkeiten gehören „Responsive Design“ oder Webseiten, die sich an unterschiedliche Bildschirme anpassen Größen. Dies alles wird über CSS erreicht.

Anatomie einer CSS-Regel

CSS-Regeln werden an einer von drei Stellen geschrieben: a) Inline innerhalb eines Elements, b) durch Erstellen von a

Im Idealfall werden Stile in separaten Stylesheets geschrieben, auf die mehrere Webseiten verweisen können. Durch die Verwendung derselben Regeln können Autoren Zeit sparen und eine visuelle Präsentation mit mehr Ordnung und Konsistenz erstellen. (Inline-Stile können Ihnen nicht dabei helfen, das Fundament eines Site- oder sogar seitenweiten Stils zu bilden. Deshalb werden sie am besten sparsam verwendet, um bestimmte Anforderungen zu erfüllen.)

CSS-Regeln beginnen mit a Wähler, unten grün geschrieben. In diesem Fall ist der Selektor für die Regel p, für Absatz: Die Regel gilt für Absatzelemente. Die Regel ist im Gegensatz zu {geschweifte Klammern} eingeschlossen . In diesem Fall macht die Regel die Schriftart für Absatztext normal.

CSS-Regeln können komplexer und komplizierter werden, als es diese Einführung zulässt. Aus diesem Grund können Sie in Bezug auf den Zeitaufwand erwarten Das Beherrschen von CSS dauert viel länger als das von HTML.

Extra Credit (Advanced)

Ähnlich wie HTML hat CSS seine Optimierungen für diejenigen, die mehr und schneller erreichen möchten.

• SASS (und SCSS) | Benötigt Ruby wie oben
• Weniger | Benötigt Node.js wie oben

JavaScript

Wenn viele Leute an Codierung denken, denken sie daran, dass sie den Computer anweisen wie manmachen etwas. Dies ist die Aufgabe einer Programmiersprache, unserer letzten Ergänzung zur Front-End-Gleichung.

Programmiersprachen werden normalerweise nach der Abstraktionsebene klassifiziert, die sie in ihrer Semantik, ihren Ahnensprachen und ihrer Sprache verwenden Paradigmen, und ihre Schreibdisziplinen. JavaScript lässt sich nicht einfach klassifizieren, da es auf so viele Frameworks erweitert wurde, dass es für so viele verschiedene Zwecke geeignet ist. Es ist ein flexibles, vage aus der C-Familie abgeleitetes, multiparadigmatisches, lose typisiertes Hybridchamäleon, das Elster mit Codierungskonzepten spielt. Es ist entweder ein großartiges Beispiel für eine sehr universelle Sprache oder ein sehr schlechtes Beispiel für viele verschiedene Arten von Sprachen.

Warum brauchst Du es

Warum JavaScript lernen? Wie mein Kollege betont, hat JavaScript seine Champions und Kritiker 6 Einfachste Programmiersprachen für AnfängerBeim Programmieren geht es ebenso darum, die richtige Sprache zu finden wie um den Erbauungsprozess. Hier sind die sechs einfachsten Programmiersprachen für Anfänger. Weiterlesen , insbesondere im Fall seiner Eignung für Erstlerner. Es ist möglicherweise das beliebteste Programmiersprache von heute. Es ist zwar keine solide Grundlage, um den Rest des Coding-Königreichs zu verstehen, aber es gibt ein gutes Argument dafür, JS neben Ruby oder PHP zu lernen.

Vanilla JS geht jedoch nicht sehr weit - Frameworks sind für die heutigen Webseiten verantwortlich.

Beliebte Frameworks

• Angular, das JS-Framework von Google für Webanwendungen wie GMail und andere.
• JQuery Das Web interaktiv machen: Eine Einführung in jQueryjQuery ist eine clientseitige Skriptbibliothek, die fast jede moderne Website verwendet - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber die am weitesten entwickelte, am meisten unterstützte und am weitesten verbreitete ... Weiterlesen , hier bereits von MUO abgedeckt Das Web interaktiv machen: Eine Einführung in jQueryjQuery ist eine clientseitige Skriptbibliothek, die fast jede moderne Website verwendet - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber die am weitesten entwickelte, am meisten unterstützte und am weitesten verbreitete ... Weiterlesen , die unter anderem WordPress antreibt.
• Reagierenwurde von den Facebook-Techniklegionen erstellt und dient zum Erstellen von Benutzeroberflächen.

Extra Credit (Advanced)

Die palimpsestische Natur von JavaScript erfordert eine gewisse Auferlegung der Struktur. Jeder der folgenden Zuckermäntel trägt zur Umsetzung bei

• CoffeeScript | Benötigt Node.js wie oben
• Typoskript | Benötigt Node.js wie oben

Wo soll ich anfangen zu lernen?

Da die Front-End-Entwicklung mittlerweile allgemein als wichtige berufliche Fähigkeit für Wissensarbeiter aller Art angesehen wird, finden Sie viele Ausgangspunkte in Form von E-Learning-Kursen. Hier ist eine kuratierte Liste, die wir für unsere Leser erstellt haben:

• Coursera (Bezahlt)
  Coursera sammelt Online-Kurse von Universitäten und Lerninstitutionen. Die Preisspanne für einen Kurs liegt zwischen 50 und 250 USD, sie bieten jedoch einen hohen Wissensstandard und Ergebnisse mit hoher Kompetenz.
• Generalversammlung Dash (Frei)
  Die Generalversammlung ist eine beliebte Option für eine bezahlte Berufsausbildung. Dash ist ihr kostenloses Angebot und deckt HTML / CSS / JS ab.
• MakeUseOf.com - Das Learn to Code 2017 Bundle (Bezahlt, Stecker)
  Lebenslanger Zugriff auf 10 Klassen, die die Bandbreite der Front- und Back-End-Webentwicklung abdecken, für nur 20 USD.
• Mozilla Developer Network (Frei)
  MDN ist maßgeblich, nimmt jedoch mehr am Dokumentationsstil teil als Unterricht im Klassenzimmerstil oder gamifizierte Online-Angebote.
• Baumhaus (Bezahlt)
  Ein weiteres Online-Angebot, das eher pro Monat als natürlich bezahlt wird. Dies geschieht auf Empfehlung von Karen X Cheng in ihrem viralen Medium-Beitrag „Wie man einen Job als Designer bekommt, ohne zur Designschule zu gehen.”
• Webdesign-Tutorials von Envato Tuts + (Gemischt aus freiem und kostenpflichtigem Inhalt gleicher Qualität)
  Eine Vielzahl von einmaligen Artikeln und mehrteiligen Serien hochwertiger, spezifischer und zielgerichteter Informationen, normalerweise zu einem Thema.

Fertig machen

Einer der Vorteile, die die Front-End-Entwicklung für Anfänger bietet, besteht darin, dass sie größtenteils nicht erforderlich ist teure proprietäre Tools: Das grundlegendste Tool für die Front-End-Entwicklung ist der Texteditor, der mit dem Browser Ihres Computers gekoppelt ist Wahl:

• Texteditoren mögen Git's Atom Texteditor, Erhabener Text (bezahlt) oder VS Code von Microsoft
• Browser wie Mozilla Firefox oder Google Chrome
• Es ist nützlich, aber über den Rahmen dieses Artikels hinausgehend, ein Hosting oder einen lokalen Server zu haben (z XAMPP) Konfiguration.

Bequemere, wenn auch weniger dauerhafte Alternativen sind webbasierte Live-Editoren wie:

• Codepen.io
• JSbin.com

Abkürzungen

HTML-Strukturen sind größtenteils gut verstanden und nicht unbedingt eine erneute Eingabe mit großer Häufigkeit wert. Bei CSS ist das Stylesheet einer durchschnittlichen Website Tausende von Zeilen lang, und Sie können darauf wetten, dass nur wenige moderne ausschließlich von Hand geschrieben wurden. In Bezug auf die Interaktivität haben sich bestimmte Standards herausgebildet. Aufgrund dieser Tatsachen werden Sie feststellen, dass viele Front-End-Entwickler vorgefertigte Frameworks als Backbone verwenden und diese dann nach Bedarf optimieren, entfernen oder ersetzen.

• Bootstrap, ursprünglich von Twitter entwickelt, enthält HTML-, CSS- und JS-Vorlagen, die heute im Web weit verbreitet sind. Bootstrap ist fast ein Verkehrssprache zu Beginn der Webentwicklung.
• Stiftung rechnet sich als das fortschrittlichste Framework der Welt und wurde mit Schwerpunkt auf geringer Größe und Geschwindigkeit entwickelt.

Referenzmaterial

• Eine Liste auseinander - Eine Veröffentlichung auf der A-Liste „Für Leute, die Websites erstellen“
• Kann ich benutzen - "Support-Tabellen für HTML5, CSS3 usw."
• CSS-Tricks - Ein Hub für die CSS-Community und eine Quelle des Wissens über Best Practices und Kompatibilität
• HTML Living Standard-Dokumentation - "The Living Standard - Edition für Webentwickler"
• HTML5 Bitte - "Verwenden Sie das Neue und Glänzende verantwortungsbewusst"
• Smashing Magazine - "Für professionelle Webdesigner und Entwickler"

Fazit

Wir hoffen, Ihnen hat diese Ausrichtung auf die Front-End-Welt gefallen. Wie Sie sehen, ist die Front-End-Entwicklung ein Bereich, der viele Möglichkeiten bietet, aber viele Einstiegspunkte bietet. Wenn Sie es lernen, wird Ihr Portfolio um eine beeindruckende Fähigkeit erweitert, und Sie können den nächsten Schritt in Ihrer Karriere machen oder zu einem völlig neuen übergehen.

Entwickler: Was ist in Ihrem Front-End-Stack?

Anfänger: Was hätten wir noch aufnehmen können, um Sie zu orientieren?