Webschnittstellen erstellen, wo Sie anfangen sollen
Computercode und Pixel sind mehr als nur Ziegelsteine die Grundlage der Wirtschaft des 21. Jahrhunderts. Wenn du dich schon mal angeschaut hast “Seitenquelltext” oder “Entwicklerwerkzeuge” In Ihrem Browser sind Sie wahrscheinlich auf ein Durcheinander von Text gestoßen und haben sich gefragt, wie die Webseite funktioniert.
Webentwickler rufen an Graphisch User ichSchnittstellen (GUIs) zusammen die Vorderes Ende einer Webseite, im Gegensatz zum Backend. Das Frontend ist das, was der Benutzer manipulieren, handeln und anderweitig verwenden kann. Das Back-End kann als Infrastruktur betrachtet werden, die alle Informationen und Aufgaben enthält und unterstützt, die das Front-End impliziert.
Dieser Artikel befasst sich mit dem Frontend. Wir werden das Territorium ausarbeiten, so dass Sie die Unterschiede und Möglichkeiten des Frontends verstehen können und Ihnen zeigen, wie Sie mit den Tools des Webentwicklers beginnen und diese sinnvoll einsetzen können interaktive Webseiten.
Webdesign gegen Front-End-Entwicklung
In großen Organisationen sind Design und Entwicklung Aufgaben, die von Teams von Fachleuten mit unterschiedlichen Fähigkeiten durchgeführt werden. Designer würden ein spezifisches visuelles und Interaktionsdesign erstellen. Front-End-Entwickler würden es implementieren.
Für eine Person gibt es jedoch keinen Grund, Ihre Erkundung einzuschränken: Nur weil Sie an Entwicklung interessiert sind, bedeutet das nicht, dass Sie keine Vision für das Design haben und umgekehrt. Ein bescheidenes Wissen über grundlegende Webtechnologien oder Designprinzipien kann für Ihre Karriere oder Ihr Geschäft von großem Nutzen sein.
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 der Code bei der Verwendung von Computercode weniger komplex und fehlerverzeihend ist und weniger Grundkenntnisse in der Programmierung erfordert als andere Web-Programmiersprachen (von denen viele im Backend zu finden sind), zu welcher Programmiersprache Lernen - Web-Programmierung Welche Programmiersprache muss man lernen - Web-Programmierung Heute werden wir uns die verschiedenen Web-Programmiersprachen ansehen, die das Internet unterstützen. Dies ist der vierte Teil einer Programmierserie für Anfänger. In Teil 1 haben wir die Grundlagen von… Read More .
Das Web-Frontend: Markup, Stylesheet und Programmiersprachen
Die meisten Webseiten bestehen aus drei Technologien: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) und JavaScript (JS):
- Markup-Sprachen wie HTML ein Dokument mit markieren Stichworte. Tags kennzeichnen semantische Inhalte und strukturieren das Dokument. Strukturierte Dokumente können sein gestylt.
- CSS ist ein Style-Sheet-Sprache und Nachkommen von Druckstilanweisungen zu einem Seitenkompositor (der das endgültige druckbare Bild für eine Druckmaschine erstellt); Im Web bestimmt CSS generell die Darstellung von Inhalten wie Typografie und Layout sowie das Platzieren von Grafiken.
- JavaScript ist im Gegensatz zu den vorherigen beiden ein 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 den Benutzereingaben ausgeführt wird.
HTML
Es ist über zwanzig Jahre her, und der Hauptzweck von HTML bleibt derselbe: Der für einen Leser bestimmte Text wird von der Struktur getrennt, die zum Analysieren 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 Suchmaschinenspider und Bildschirmleser (für Zugänglichkeit) erforderlich. Im Laufe der Zeit ist die Relevanz der Trennung von semantischem und strukturellem Aspekt im Laufe der Zeit eher gewachsen als gesunken. Die neueste Version von HTML (5) führte Tags ein wie
Anatomie eines HTML-Elements
HTML-Elemente sind mindestens Paare von öffnenden und schließenden Tags, wobei jedes Tag eingeschlossen ist
Das Ergebnis dieses Markups:
Einfacher Absatztext hier.
Extra Credit (Fortgeschrittene)
Entwickler aller Art sind besessen von der Ausführungsgeschwindigkeit. Zu diesem Zweck optimieren sie die Sprachen selbst, um schnell schreiben und lesbare Zeilen erstellen zu können. Dies wird als syntaktische Zuckerschicht bezeichnet. Die HTML-Community hat einige dieser Bemühungen hervorgebracht.
Warum eine entwicklerorientierte Verknüpfung verwenden, wenn Sie vermutlich ein Anfänger sind? Durch das Erstellen von Elementen in einem einfacheren Markup können Sie sich auf die Absicht konzentrieren, nicht auf den Ausdruck, während Sie die Validierung anhand eines Standards als allerletzten durchführen. Die Quelldateien, die Sie im vereinfachten Markup generieren, werden entweder in gültiges HTML-Format übersetzt, oder der Compiler gibt einen Fehler bei einer bestimmten Zeilennummer aus. Sie finden das vielleicht lehrreicher als die Jagd “Tag Suppe” für einen fehlenden Winkel. Sie benötigen jeweils eine dazwischenliegende Software, um sie in HTML umzuwandeln. (Es ist extra schließlich Kredit.)
- Haml (HTML Abstraction Markup Language) | Benötigt Ruby (über das wir nachdenklich geschrieben haben. 3 Interaktive, lustige, kostenlose Einstiegsmöglichkeiten für die Programmiersprache Ruby 3 Interaktive, spaßige, kostenlose Einstiegsmöglichkeiten für die Ruby-Programmiersprache Ruby ist eine ausdrucksstarke Scriptsprache auf sehr hohem Niveau Es wird im Web hauptsächlich als Teil des Webentwicklungsframeworks von Ruby on Rails verwendet, aber auch als eigenständige Lösung. Wenn Sie neugierig sind, was Ruby (nicht… Weiterlesen) kompilieren soll
- Jade | Benötigt Node.js (eine Einführung finden Sie hier Was ist Node.JS und warum sollte ich mich kümmern? [Webentwicklung] Was ist Node.JS und Warum sollte ich mich kümmern? [Webentwicklung] JavaScript ist nur eine Client-Seite 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 noch viel mehr
- Slim | Erfordert Ruby zum Kompilieren (wie oben)
CSS
Mit CSS können semantische Inhalte und Dokumentpräsentationen separat untergebracht werden, wodurch stilistische Merkmale wie Layout, Farben und Typografie portierbar und für verschiedene Dokumente anwendbar sind. Wenn der Inhalt und das visuelle Design voneinander getrennt sind, erhält der Entwickler mehr Flexibilität und Konsistenz im visuellen Design.
Warum brauchst Du es
Ungestylte Websites sehen schrecklich und unansehnlich aus. CSS ist zwar lesbar, aber aufgrund des möglichen Layouts der Eckpfeiler der visuellen Informationshierarchie. Die folgende Abbildung zeigt zum Beispiel teilweise das aktuelle obere Navigationsmenü von makeuseof.com, ohne dass CSS angewendet wird.
Beachten Sie, dass das nicht gestylte Menü neben 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 unterschiedlich großen und verbundenen Geräten wie iPhones, Tablets usw. ist eine der wichtigsten Fähigkeiten geworden “Sich anpassendes Design,” oder Webseiten, die sich an verschiedene Bildschirmgrößen anpassen. Dies wird alles über CSS erreicht.
Anatomie einer CSS-Regel
CSS-Regeln werden an drei Stellen geschrieben: a) Inline innerhalb eines Elements, b) Erstellen von a