Share
Im Verlauf dieses Artikels werden wir einen großen Sprung in die Front-End-Entwicklung machen und sehen, wie es in unser breiteres Bild passt. Folgendes werden wir behandeln:
Das Rendern von Websites kann eine ziemliche Aufgabe sein. Mit einer Vielzahl von Geräten, Browsern, Zugangspunkten, Bandbreiten, Programmiersprachen und Umgebungen kann der Aufbau konsistenter Weberlebnisse schwierig sein. Dank Browsern und einem Standardisierungskörper (dem W3C) verfügen wir über einige Säulen, um die Kontrolle nach Möglichkeit zu ermöglichen. Diese Säulen sind HTML, CSS und JavaScript.
Zusammen bezeichnen wir diese Säulen als Front-End-Stack. Jede Sprache hat ihren eigenen Zweck, und die Entwickler geben viel Zeit darauf zu achten, dass sie nicht die Linien jeder Sprache verwischen, da sie ineinander bluten können. Also lasst uns hier grundlegend sein. Moderne Browser, die im Handel erhältlich sind: Safari, Edge, Chrome und Firefox können nur HTML, CSS und JavaScript verstehen. Das ist es, drei Sprachen. Mit Ausnahme von Javascript sind HTML und CSS deklarativ statisch Sprachen. Damit meine ich, dass Sie nicht unbedingt in einem von beiden "programmieren" müssen, da es keine echte Logik zum Schreiben gibt (mit einigen kleinen Ausnahmen). JavaScript, das in den letzten Jahren immer mehr in das Internet gesprungen ist, ist jedoch eine Programmiersprache.
Wenn ich in der Vergangenheit versucht habe, den Front-End-Stack zu erklären, habe ich es immer als nützlich empfunden, auf den menschlichen Körper zu verweisen. In Anbetracht dessen, dass wir im Zusammenhang mit Atomic Design sprechen, trägt dies meine Metapher zufällig mit!
Eine Leiche gesternHTML ist dein Skelett. Sie bestimmt Ihre Struktur und Ihre Haltung. Aus einer solchen Struktur kann eine bestimmte Bedeutungsebene abgeleitet werden. Ihr Kopf steht immer an erster Stelle, Hals, Brustkorb, Hüften, Beine, Füße, bis hin zu Ihren Phalangen.
HTML, ewDie Reihenfolge von Elemente Ich habe gerade beschrieben, ist dein typischer Mensch. Bei einem Wal oder Tiger kann es anders sein. Daher kann HTML für Blogs, Commerce-Stores oder Plattformen unterschiedlich sein. Bei HTML geht es um Bedeutung und die Beschreibung eines Webbrowsers auf eine sinnvolle Weise, worum es bei einer Seite geht. In letzter Zeit ist es zu einer Wissenschaft geworden, da der Google-Algorithmus diese Struktur im Wesentlichen liest und daraus ableitet, worum es auf der Seite eigentlich geht.
Takeout: Denken Sie daran, dass HTML eine Struktur für Ihr Web-Erlebnis bietet.
CSS sieht so aus. Haarfarbe, Augenfarbe, Hautton, haarige, lange Arme, muskulös, Zehennagellänge usw. Es ist sogar die Art, wie Sie Ihr Haar stylen oder wie Sie sich schminken, damit Sie wie Sie aussehen.
Ihr einziger Zweck besteht darin, das zu gestalten, was sonst sehr schlichtes und langweiliges HTML wäre. Wenn wir alle nur in unseren Skeletten herumlaufen würden, wäre die Anziehung ein Problem. Gleiches gilt für Web-Erlebnisse.
JavaScript ist Ihre Verhaltensweisen und Interaktionen. Alles, vom Klicken der Fingerknöchel bis zum Blinzeln, Lächeln, Husten, der Art, wie Sie gehen, wenn Sie sich entscheiden, zu überspringen oder nicht, dreht sich alles um Interaktivität. Was bei JavaScript zu beachten ist, ist Folgendes zu beachten: Wenn Sie Ihren Browser schließen, ist alles vergessen (im Allgemeinen), sodass wir uns vorstellen können, dass JavaScript die Interaktivität einer Website ist, die in einer "Sitzung" aktiv ist oder aktiv mit dieser interagiert Die Webseite. Denken Sie daran, auf Popups oder Navigations-Dropdowns zu klicken.
Das ist jemand, der gehtEinige von Ihnen fragen sich an diesem Punkt vielleicht, wo das Gehirn oder die „Logik“ eintritt, aber wir werden dorthin gelangen. Das Wichtigste, was Sie aus diesem Abschnitt herausnehmen können, ist, dass HTML, CSS und JavaScript im Browser leben. Sie arbeiten alle zusammen, um ein "statisches" Web-Erlebnis zu schaffen, das wir dann zur Optimierung von Atomic Design verwenden können.
DOM steht für Dokumentobjektmodell. Das DOM ist das lebendige, atmende Ergebnis von HTML, CSS und JavaScript, die in einer vom Benutzer aktivierten Sitzung vorhanden sind.
Da das DOM eine lebendige, atmende Darstellung des Quellcodes ist, ist es wichtig zu verstehen, dass es Einschränkungen gibt. Der Code, den Sie in HTML-, CSS- und JavaScript-Dateien auf Ihrem Computer schreiben, wird als Quellcode bezeichnet. Diese Quelle ahmt sehr genau nach, was Sie im DOM sehen, aber es ist nicht dasselbe. Das DOM ist das Nachprodukt der Manipulation und Zusammenstellung dieser Dateien, die mit Quellcode gefüllt sind. Wenn diese Dateien von einem Browser angefordert werden, werden die Sprachen "interpretiert" und eine Website oder Webseite ist geboren. Wenn Sie den Quellcode ändern, muss die Darstellung dieser Quelldateien aktualisiert werden, damit die aktualisierte Version in Ihrem Browser angezeigt wird.
Jede Sprache hat ihre eigenen Grenzen. CSS hat zum Beispiel keine besonders starke Layout-Engine. Dies bedeutet, dass es durchaus ein Prozess sein kann, komplexe Layouts im Browser zu erstellen. HTML hat keine Layoutfunktionen und kann nur eine Struktur und Hierarchie bereitstellen, damit die Website verstanden werden kann. JavaScript kann als Programmiersprache HTML und CSS bearbeiten. Da wir zum Erstellen des Frontends einer Website einen dreischichtigen Stack verwenden, müssen sie alle gut miteinander spielen und einige zusätzliche Parameter berücksichtigen. In unserem Fall beziehen sich diese Parameter auf verschiedene Browser, Geräte, Betriebssysteme, Browser-Versionen und mehr. Das DOM ist in allen Browsertypen und Distributoren mehr oder weniger gleich. Aus diesem Grund müssen viele Regeln beachtet werden, um ein konsistentes Erlebnis zu schaffen.
CSS verwendet ein Konzept namens Box-Modell. Das Box-Modell umfasst die folgenden Eigenschaften:
Hier ist ein Diagramm, das es etwas besser erklärt.
Kleine Kisten auf einem HügelBeim Entwerfen einer Form, beispielsweise eines Quadrats, bestehen die Immobilien aus den oben genannten Elementen.
“Das Glück ist niemals auf deiner Seite"
Ja, fünf Säulenraster sind für Entwickler kein gutes Zeichen. Es ist im Allgemeinen einfacher, mit Gleichen zu arbeiten als mit Widrigkeiten. Entwickler neigen dazu, Front-End-Frameworks wie Bootstrap oder UIKIT zu verwenden, die mit vorberechneten Rastern mit zehn, zwölf oder vielleicht mehr Spalten geliefert werden. Es ist wirklich eine gute Idee, einen Entwickler zu fragen, welches Framework ggf. verwendet werden soll, um das Design besser an HTML und CSS anzupassen
Vorbei sind die alten Zeiten des Web. Aufgrund der Tatsache, dass sich die Mehrheit der Websites in Richtung Reaktionsfähigkeit bewegt, ist der Bedarf an flüssigen Layouts sehr offensichtlich geworden. Raster werden nun mit Prozentsätzen (10%, 30%, 50%) von Containern ermittelt, die dann an bestimmten Haltepunkten zusammenbrechen, die ein Entwickler angeben kann.
Schriftarten auf Websites funktionieren beim Drucken sehr unterschiedlich. Während Sie eine Website auf Ihrem eigenen Computer erstellen, können Sie jede auf Ihrem System installierte Schriftart verwenden. Das ist großartig für Sie, aber sobald diese Dateien auf einen anderen Computer verschoben werden, kann der Quellcode nicht mehr auf die Schriftart verweisen, die Sie auf Ihrem eigenen Computer installiert haben, da keine Verbindung besteht.
Es gibt viele Wege, um dieses Dilemma zu umgehen, aber man hört oft, dass ein Entwickler Designer fragt, Google Fonts zu verwenden. Bei Google-Schriftarten handelt es sich um eine Gruppe von Schriftarten, die auf einem CDN (Content Delivery Network) gehostet werden, auf den jeder Computer zugreifen kann, der über eine aktive Verbindung zum Internet verfügt. Dies bedeutet, dass die Schriftarten auch dann nicht auf meinem eigenen Computer installiert sind Kann immer noch auf meiner Website rendern. Sei dir dessen bewusst. Einige Schriftarten sind auch nicht für das Rendern auf Web-Engines ausgelegt. Sie sehen im Vergleich zu einem Webbrowser beispielsweise in Photoshop drastisch anders aus. Jedes Programm rendert Schriftarten mit unterschiedlichen Rendering-Engines.
Nachdem wir nun einige Grundlagen besprochen haben, werfen wir einen Blick auf einige Themen, die Designer in ihren Entwürfen nicht berücksichtigen, aber für die Benutzererfahrung wirklich wichtig sind.
Ereignisse sind Aktionen, die ein Benutzer während der Interaktion mit Ihrer Website ausführt. JavaScript hat einige zu berücksichtigen, aber zu den einfachen Beispielen gehören „Klicken“, „Scrollen“, „Mouseon“ oder „Mouseout“ und „Keydown“ oder „Keyup“. Wenn Sie mehr über JavaScript-Ereignisse erfahren möchten, besuchen Sie Mozilla. Einige der hier angezeigten Ereignisse werden nicht notwendigerweise durch Benutzerinteraktionen ausgelöst.
Aus der Sicht eines Designers ist es wichtig zu verstehen, was mit bestimmten Elementen oder Abschnitten auf Ihrer Website passiert, wenn ein Benutzer darauf reagiert hat. Was passiert zum Beispiel, wenn eine Schaltfläche angeklickt wird? Oder wird auf ein modales Fenster eine Animation angewendet, wenn es beim Klicken geschlossen wird? Dies sind Fragen, auf die Sie Antworten geben müssen, insbesondere wenn Ihr Projekt einen vordefinierten Umfang hat. Abhängig von Budget und Zeitplan kann "Interaction Design", wie es in den Web-Communities genannt wird, eine wertvolle Zeit für ein Projekt beanspruchen.
Nachdem ein Ereignis aufgetreten ist, verbleiben die Elemente in „Status“. Ein häufiges Beispiel sind Links. Links haben eine Reihe von Zuständen: aktiv, Fokus, schweben. Wie sehen Ihre Links aus, wenn sie angeklickt wurden? Während du drückst? Wenn die Maus über ihnen schwebt? Oder wenn sie auf dem Handy berührt werden?
Atomic Design kann hier sehr nützlich sein, da Ihre Style Guides diese Zustände leicht berücksichtigen können, während Sie ein Atom wie einen Button aufbauen. State kann dramatische Auswirkungen auf Ihre Benutzererfahrung haben. Berücksichtigen Sie dies daher, wenn Sie mit komplexeren Sites arbeiten.
Das Schlagwort „Responsiveness“ ist schon seit einiger Zeit ein Summen. Als Entwickler müssen wir sicherstellen, dass unsere Web-Erlebnisse auf allen Geräten konsistent sind. Wenn Sie freiberuflich tätig sind, wird fast jeder Kunde nach einer entsprechenden Website fragen. Es ist das "Brot und die Butter" des Netzes geworden. CSS bietet Entwicklern eine nützliche Technologie, z. B. Medienabfragen, mit denen Entwickler Layouts an bestimmten "Haltepunkten" anpassen können..
Front-End-Frameworks wie Bootstrap und Foundation sind darauf ausgelegt, die Implementierung von Reaktionszeiten durch die Entwicklung reaktiver, prozentualer Netze für Entwickler zu vereinfachen. Die größte Herausforderung besteht nicht darin, wie responsive Design-Grids funktionieren, sondern vielmehr, zu welchem Zweck sie entwickelt wurden.
Das wars für diese Zeit! Im nächsten Artikel werden wir einen Blick auf das Backend werfen und herausfinden, wie wir mit einer Denkweise von Atomic Design unser Verständnis von Logik und Programmierfähigkeiten verbessern können.
Accentsconagua