1999 habe ich meine erste Website mit Web Studio 1.0 erstellt. Web Studio war eine grafische Benutzeroberfläche. Es war möglich, eine neue Zielseite zu erstellen und Elemente per Drag & Drop darauf zu ziehen. Ich habe dann eine kostenlose Domain eingerichtet und mit GeoCities und voila gehostet! Ich hatte eine Website. Ich wollte noch weiter gehen und machte mich wie viele andere daran, eine Band-Website zu erstellen.
- 12 häufig gestellte JavaScript-Fragen beantwortet
Seitdem hat sich viel geändert. In diesem Artikel werde ich eine Reise in die Vergangenheit unternehmen und heute dieselbe Website für das Web neu erstellen.
Holen Sie sich die Dateien für dieses Tutorial.
So lass uns anfangen! Zunächst einmal beginnt im Allgemeinen jedes neue Projekt für mich mit mkd, gefolgt von g init. Für diejenigen unter Ihnen, die mich kennen, habe ich Ihnen wahrscheinlich irgendwann Dotfiles erwähnt. Punktedateien sind Dateien, die einfach mit einem Punkt beginnen (es hat überraschend lange gedauert, bis ich diese Verbindung hergestellt habe!) Und für eine Reihe von Zwecken verwendet werden können. Zwei meiner Lieblings-Dotfiles sind .aliasas und .functions. Lassen Sie mich näher darauf eingehen ...
In bash ist es möglich, mit dem Befehl mkdir ein neues Verzeichnis zu erstellen. Danach müssen Sie die Verzeichnis-CD in das gerade erstellte Verzeichnis ändern. Mit dem Code, den ich in meiner .functions-Datei habe, ist es jetzt möglich, mkd auszuführen. Dadurch wird nicht nur das neue Verzeichnis erstellt, sondern auch in dieses Verzeichnis geändert. Das mag auf den ersten Blick übertrieben erscheinen, aber ich liebe diese Mikrogewinne. Im Laufe der Zeit, insbesondere wenn diese Befehle mehrmals am Tag ausgeführt werden, führt dies bald zu einer erheblichen Zeitersparnis.
# Erstellen Sie ein neues Verzeichnis und geben Sie es ein. Funktion mkd () {mkdir -p "$ @" && cd "$ _"; }}
Der nächste Befehl, wenn Sie mit git vertraut sind, ist einfach git init, mit dem wir das Projekt versionieren können. Ich benutze Git oft, sogar für Einkaufslisten! Anstatt jedes Mal git eingeben zu müssen, ist das Hinzufügen von Alias g = "git" zu .aliases eine schöne, kleine Zeitersparnis für mich.
Heutzutage gibt es eine Vielzahl unterschiedlicher Frameworks und Technologien. Für dieses Projekt möchte ich die Dinge einfach halten. Ich werde HTML, CSS und bei Bedarf eine Prise JavaScript verwenden. Lassen Sie uns zunächst das grundlegende HTML-Markup erstellen. Aber warte! Lassen Sie uns eine Minute innehalten und nachdenken.
Manchmal sind Entwickler, auch ich, sehr aufgeregt über ein Projekt und möchten sofort loslegen und direkt zur Tastatur gehen, um Code zu schreiben. Ich finde jedoch, dass dies oft nicht der beste Ansatz ist. Ich liebe es, mir zuerst einen Überblick über das Projekt zu verschaffen. Wenn ich dies tue und eine viel klarere Vision des gesamten Projekts habe, finde ich, dass es eine viel bessere Entscheidungsfindung ermöglicht. Wenn ich beispielsweise direkt in den Code eintauche, kann ein Problem auftreten, das ich dann zurückgehen und umgestalten muss. Bei diesem Ansatz gibt es einige unterschiedliche Ergebnisse. Erstens kann es sein, dass ich den Code vollständig löschen und neu starten muss. Zweitens, wenn ich so weitermache, kann es sein, dass ich Spaghetti-Code bekomme, der es in Zukunft schwierig macht, zu aktualisieren, zu debuggen und zu Leistungseinbußen zu führen. Drittens funktioniert es manchmal in Ordnung und Sie erhalten besseren Code, aber ich würde eher sagen, dass das erste und das zweite Ergebnis weitaus häufiger sind.
Dieses Projekt ist ziemlich klein; Es hat ein paar Seiten: Home, News, Gigs, Medien, Alben, Links und gemeinsame Teile dieser Seiten: Header, Navigation, Typografie-Inhalt, Listen, Bilder, Videos. Bei der ursprünglichen Erstellung der Flash-Site im Jahr 2004 waren die Tests viel einfacher. Die Site wurde in Flash für Flash auf einem Desktop-Computer mit Maus und Tastatur erstellt. Heutzutage ist die Internetnutzung von Mobilgeräten und Tablets häufiger als auf einem Desktop-Computer, und dieser Trend nimmt weiter zu.
Um dies für jeden, der die Website betrachtet, zu einer besseren Erfahrung zu machen, werde ich zu Beginn des Projekts einige Dinge berücksichtigen und eine mobile erste Strategie verwenden. Um dies zu tun, werde ich vor dem Schreiben eines Codes einen guten, altmodischen Stift und Papier herausholen. Zuerst schreibe ich die Sitemap aus; Dabei gibt es einige Schlüsselbereiche, die meiner Meinung nach verbessert werden können. Zum Beispiel bestand meine ursprüngliche Seite aus verschiedenen Seiten für jedes Album der Band. Zu der Zeit hatten sie drei Alben und passten so gut in die Navigation. Jetzt haben sie noch viel mehr und möglicherweise noch mehr vor sich. Daher denke ich bereits darüber nach, wie ich die Website zukunftssicherer machen kann (ein Oldie, aber ein Goodie ist das kugelsichere Webdesign von Dan Cederholm).
Jetzt habe ich eine grobe Idee in meinem Kopf der Sitemap und der Seiten. Als nächstes sollen einige Low-Fi-Wireframes erstellt werden. Aufgrund früherer Erfahrungen beim Erstellen vieler reaktionsfähiger Websites stellt Mobile interessante Designherausforderungen, nämlich das Erstellen einer Navigation, ermöglicht es den Nutzern jedoch, den Hauptinhalt der Website anzuzeigen. Ich werde dem Design-Ergebnis folgen, das wir alle lieben / hassen gelernt haben: dem Burger-Menü-Ansatz. Ich werde jedoch eine kleine Wendung hinzufügen. In der Originalvorlage wurden Vögel verwendet. Daher verwende ich anstelle des Standard-Burger-Menüsymbols Vogelgrafiken, die das Menü aktivieren und seine Flügel öffnen und schließen, um anzuzeigen, ob das Menü aktiv ist oder nicht.
Die Dinge in meinem Kopf nehmen jetzt Gestalt an, mit einer Vorstellung davon, wie die Leute auf der Website navigieren können. Ich werde jetzt darüber nachdenken, wie die Seiten selbst aussehen könnten. Beginnend mit der Homepage ist es ziemlich einfach, mit Typografie-Inhalten. Als nächstes Nachrichten - wieder Typografie-Inhalte, möglicherweise Bilder und dann eine Art Navigation, um ältere Beiträge anzuzeigen. Gigs - eine Liste der kommenden Gigs mit Links zum Kauf von Tickets. Wenn ich auf die vorherige Website zurückblicke, hatte ich für Medien "Bilder" und "Videos" als zwei verschiedene Abschnitte, aber hier gibt es meiner Meinung nach Raum für Verbesserungen und die Konsolidierung als "Medien". Alben, ah, ja Alben - hier zahlt sich so etwas aus. Sie sehen, die Seite "Alben" enthält Typografie und ein Bild und benötigt eine Art Navigation, um ältere Beiträge anzuzeigen. Klingt bekannt? Klingt sehr nach der gleichen Struktur wie die Nachrichtenseite! Mit dieser Übersicht auf oberster Ebene kann ich die Dinge auf einer detaillierteren Komponente betrachten und überdenken. Einige könnten sogar sagen, atomare Designebene, wenn Sie mit der Arbeit von Brad Frost vertraut sind.
Jetzt habe ich eine Vorstellung davon, wie die Site auf kleineren Geräten und wiederverwendbaren Elementen funktionieren wird. Es ist Zeit, den Vorgang mit größeren Geräten zu wiederholen. Da die Site ziemlich einfach ist und die Wireframes bereits für Mobilgeräte erstellt wurden, sehe ich, dass die größeren Geräte ziemlich ähnlich sind. Abgesehen davon haben wir jetzt zusätzlichen Platz, sodass wir die Inhaltsbereiche erweitern und auch eine Seitennavigation einbinden können.
Die Seitennavigation ist der Teil der Website, auf den ich mich vom Offset aus am meisten freue.Ich ließ mich von der Originalvorlage der Band inspirieren und baute die Navigation als Baumsilhouette mit Blättern. Jedes Blatt war eine Schaltfläche, die mit einer anderen Seite der Site verknüpft war. Wenn Sie hineinscrollen und vom Blatt wegschweben, wird das Blatt animiert und fällt zu Boden. Flash war großartig darin; es wurde Tweening genannt. Sie können ein Element an einem Keyframe in der Benutzeroberfläche auf der Timeline festlegen, einen weiteren Keyframe weiter entlang der Timeline erstellen und einen Pfad für das Element hinzufügen, dem Sie folgen möchten. Als ich etwas weiter ging und die Wege, die Dauer und die Geschwindigkeit der fallenden Blätter variierte, kam ich zu etwas, mit dem ich sehr zufrieden war.
Aber jetzt verwenden wir kein Flash. Wie machen wir das? Sehr oft springe ich zu CodePen oder JS Bin. Für diejenigen unter Ihnen, die es nicht wissen, sind CodePen und JS Bin Onlinedienste, mit denen Sie schnell codieren und speichern können. Ich sehe CodePen eher als designorientiert und JS Bin als JavaScript-fokussierter. Für dieses Projekt verwende ich aus mehreren Gründen CodePen, um die Baumnavigation zu erstellen. Zuerst möchte ich mit dem Aufbau der mobilen Hauptversion der Site beginnen. Wenn die Dinge zeitkritisch wären, könnte ich auf diese Weise ein MVP erhalten. Obwohl es Verbesserungen an der Site gibt, die durch Hinzufügen der netten Blattnavigation und -animation vorgenommen werden könnten, wird die Erstellung länger dauern. Ein Vorteil der Arbeit in CodePen für die Baumnavigation besteht darin, dass es von der Hauptwebsite und der Codebasis isoliert ist. Wenn es schwierig wird, es fertigzustellen, kann ich speichern, wo ich mich gerade befinde, mit der Erstellung der Hauptwebsite fortfahren und dann zur Navigation zurückkehren. Manchmal stelle ich fest, dass mein Unterbewusstsein weiter darüber nachdenken kann, wenn ich mich von einem Problem entferne oder sogar darauf schlafe. Wenn wir dann auf das Problem zurückkommen, bietet sich eine Lösung an.
SVGs! Ich liebe SVGs. Zuvor habe ich in Flash die Blatt-Assets in Illustrator gezeichnet. Erstaunlicherweise hatte ich immer noch eine funktionierende CD mit der Originalvorlage und konnte sie öffnen. Heutzutage benutze ich Sketch und es hat großartige Arbeit geleistet, die Datei zu öffnen. Ich habe jetzt alle Blatt-Assets bereit, um sie als SVGs zu exportieren. Warum SVGs? Es gibt viele Gründe. Wenn wir ein JPG oder GIF auf einem Retina-Gerät verwenden würden, müssten wir auch größere Assets bereitstellen, da diese sonst unscharf aussehen würden. Bei SVGs können wir auch CSS verwenden. Dies ist großartig und ermöglicht es uns, die Farbe des SVG einfach mit ein wenig CSS zu ändern, anstatt ein weiteres Bildelement erstellen zu müssen. Dies bedeutet, dass es einfacher zu warten ist und als Bonus auch leistungsfähiger. Wenn Sie mit SVGs nicht vertraut sind, kann ich Ihnen nur empfehlen, sich über sie und die unglaubliche Arbeit meiner guten Freundin Sara Soueidan zu informieren.
Nachdem die Baum- und Blatt-Assets jetzt vorhanden sind, müssen Sie als letztes die Animation hinzufügen. Es gibt einige Ansätze, die ich damit verfolgen könnte. Eine wäre, dem ursprünglichen Flash-Pfad zwischen mir treu zu bleiben. Dies würde bedeuten, die Pfade zu replizieren und SVG zu verwenden und dann möglicherweise die SVG-Arbeit mit Pfaden und animateMotion weiter voranzutreiben. Ich mag diese Idee aus nostalgischer Sicht sehr, aber CSS hat sich im Laufe der Jahre stark entwickelt, und wir haben jetzt Transformation und Übersetzung zur Verfügung, sodass dies ein anderer Ansatz sein könnte. Wenn wir noch einen Schritt weiter gehen, könnten wir sogar JavaScript hinzufügen, das die fallenden Blätter zufällig sortiert.
Beide Optionen klingen gut, aber ich schwanke in Richtung der CSS-gesteuerten Route. Hier ist ein weiterer Vorteil der Verwendung von CodePen: Ich kann schnell einen Ansatz ausprobieren. Wenn sich herausstellt, dass es komplizierter ist als ursprünglich gedacht oder sich nicht richtig anfühlt, kann ich mit wenig Zeitverschwendung einen anderen Ansatz ausprobieren. Tatsächlich stellte sich heraus, dass dies eine großartige Idee war! Ich suche noch nach Optionen dafür. Das endgültige Ergebnis finden Sie im Projekt auf GitHub.
Nachdem die Baumnavigation jetzt sortiert war, wandte ich mich wieder dem mobilen ersten Ansatz zu und baute die Navigation auf. Wenn Sie mit Sass vertraut sind, sind Ihnen höchstwahrscheinlich Variablen begegnet. Aber wussten Sie, dass Variablen jetzt in CSS verfügbar sind? Sie haben auch ziemlich gute Browser-Unterstützung in Chrome, Edge, Safari und Samsung Internet! Da ich versuche, mich an das grundlegende CSS zu halten und zusätzliche Abhängigkeiten zu vermeiden, sind dies großartige Neuigkeiten. Wie würden wir das umsetzen? Am oberen Rand des Stylesheets deklariere ich meine Variablen:
: root {--grey: #ccc; --red: # fb0f0c; - Gittergröße: 10px; }}
Jetzt, da sie deklariert sind, kann ich sie aufrufen. So würde beispielsweise das Einstellen der Hintergrundfarbe des Körpers folgendermaßen aussehen:
Körper {Hintergrund: var (- grau); }}
Wenn Sie noch einen Schritt weiter gehen und dabei helfen, die Rasterausrichtung, den Leerraum und den vertikalen Rhythmus zu verbessern, haben Sie möglicherweise bemerkt, dass ich auch eine Rastergrößenvariable definiert habe. Variablen funktionieren sehr gut mit calc und das sieht ungefähr so aus:
// Standardvariable wird verwendet, gibt 10px aus. Polsterung oben: var (- Gittergröße); // Wenn Sie calc hinzufügen, um die variable Einheit mit 2 zu multiplizieren, werden 20px ausgegeben. Polsterung unten: calc (var (- Gittergröße) * 2);
Nachdem die mobilen Navigationsstile abgeschlossen sind, wollen wir uns mit den Funktionen zum Ausblenden und Anzeigen befassen. Für die Umschalttaste wenden wir ein Beschriftungs-Tag an und fügen dann im Navigations-Tag eine Eingabe hinzu:
header> h1> Bandwebsite / h1> h2> Home / h2> label for = "mobileNav_toggle"> Toggle / label> / header> nav> input type = "checkbox" id = "mobileNav_toggle" role = "button"> ul> li> a href = "#"> Startseite / a> / li> li> a href = "#"> Über / a> / li> li> a href = "#"> Portfolio / a> / li> li> a href = "#"> Nachrichten / a> / li> li> a href = "#"> Kontakt / a> / li> / ul> / nav>
Mit dem folgenden CSS können wir das Navigationsmenü ein- und ausblenden. Da wir die Beschriftung in der Kopfzeile haben möchten, können wir ~ aka tilde oder (U + 007E) verwenden, damit es funktioniert, ohne dass das erste Element sofort darauf folgt.
#mobileNav_toggle [Typ = Kontrollkästchen] {Anzeige: keine; } #mobileNav_toggle [type = checkbox]: markiert ~ .mobileNav_list {display: block; }}
Nachdem die mobile Navigation abgeschlossen ist, ist es an der Zeit, ein ansprechendes Webdesign zu implementieren. Wenn ich den Hauptinhalt für die Website hinzufüge und dann die Responsive-Ansicht in den Chrome Developer Tools verwende, kann ich die Breite des Ansichtsfensters erhöhen, bis ich das Gefühl habe, dass genügend Platz vorhanden ist, um die Baumnavigation angemessen zu halten. Dies endet bei 600px, und dafür können wir eine Medienabfrage verwenden:
.treeNav {Anzeige: keine; } @media screen und (min-width: 600px) {.treeNav {display: block; }}
Fast dort! Damit sich die Baumnavigation neben dem Hauptinhaltsbereich befindet, verwende ich Flexbox:
.container {Anzeige: flex; } .treeNav {Anzeige: keine; Mindestbreite: 140px; }}
Jetzt nimmt die Baumnavigation 100% Höhe ein, wobei der Inhalt dasselbe tut und rechts davon sitzt. Dies bedeutet, dass der Inhalt unabhängig von seiner Länge niemals unter die Baumnavigation fließt. Wenn Sie mehr über Flexbox erfahren möchten, empfehlen wir Ihnen, flexbox.io von dem einzigen Wes Bos zu besuchen. Es gibt viel zu tun!
Das ist alles, wofür ich im Moment Zeit habe, aber es gibt noch viele Dinge, die wir tun könnten, um dieses Projekt noch besser zu machen. Wenn Sie Fragen haben oder den Artikel mögen, sagen Sie bitte Hallo auf Twitter oder über meine Website oder senden Sie mir eine Pull-Anfrage auf GitHub!
Dieser Artikel wurde ursprünglich in Ausgabe 304 von veröffentlicht Netz, das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Ausgabe 304 hier kaufen oder Abonnieren Sie hier.
