Wiederaufbau einer 2004-Flash-Website für 2018

1999 habe ich meine erste Website mit Webstudio 1.0 erstellt. Web Studio war eine grafische Benutzeroberfläche. Es war möglich, ein neues zu erstellen Landing-Seite und ziehen Sie Elemente, um Elemente hineinzuziehen. Ich habe dann eine kostenlose Domain und Hosting mit Geocities und Voila eingerichtet! Ich hatte eine Website. Fast nach vorne bis 2004 wollte ich weiter gehen und so, wie viele andere, habe ich mich dafür eingesetzt, eine Bandwebsite aufzubauen.

• 12 Häufige Javascript-Fragen beantwortet

Viel hat sich seitdem verändert. In diesem Artikel nehme ich eine Auslösung hinunter die Gedächtnisspur und erstellen Sie heute dieselbe Site für das Web.

Holen Sie sich die Dateien für dieses Tutorial.

So lass uns anfangen! Zunächst beginnt jedes neue Projekt für mich mit MKD, gefolgt von G-Init. Für diejenigen von Ihnen, die mich wissen, irgendwann habe ich Ihnen wahrscheinlich Dotfiles erwähnt. Dotfiles sind Dateien, die einfach mit einem Punkt beginnen (es brauchte eine überraschend lange Zeit, um diese Verbindung tatsächlich zu machen!) Und sie können für eine Reihe von Zwecken verwendet werden. Zwei meiner Lieblingsdotfiles sind .aliasas und .Funktionen. Lass mich aufwarten ...

In Bash ist es möglich, ein neues Verzeichnis mit dem Befehl MKDIR zu erstellen, danach müssen Sie die Verzeichnis-CD in das von Ihnen erstellte Verzeichnis ändern, den Sie gerade erstellt haben. Verwenden des Codes, 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 diesem Verzeichnis geändert. Dies mag zunächst übertrieben erscheinen, aber ich liebe diese Micro-Siege. Im Laufe der Zeit, insbesondere wenn diese Befehle mehrmals täglich ausgeführt werden, summieren sie sich bald zu einer Menge gespeicherter Zeit.

 # Erstellen Sie ein neues Verzeichnis und geben Sie ihn ein
Funktion MKD () {
    mkdir -p "$ @" & amp; & amp; CD "$ _";
} 

Der nächste Befehl, wenn Sie mit Git vertraut sind, ist einfach git init init, mit dem wir die Version des Projekts aktivieren können. Ich benutze Git viel, auch für Shoppellisten! Also, anstatt jedes Mal git eingeben zu müssen, fügte Alias ​​G = "Git" an .aliases wieder ein schöner, kleiner Zeitretter für mich.

In diesen Tagen gibt es eine Fülle von verschiedenen Frameworks und Technologien. Für dieses Projekt möchte ich die Dinge einfach halten. Ich werde HTML, CSS verwenden, und ggf. ein Sprinkle JavaScript. Lassen Sie uns das grundlegende HTML-Markup erstellen. Aber warte! Lass uns aufhören und für eine Minute nachdenken.

Manchmal können Entwickler, die selbst eingeschlossen sind, super aufgeregt sein, um ein Projekt aufgeregt zu werden, und möchten sofort knacken und direkt auf die Tastatur gehen, um Code zu schreiben. Ich finde jedoch, dass dies oft nicht der beste Ansatz ist. Ich liebe es, zuerst einen Überblick über das Projekt zu erwerben. Indem Sie dies tun und eine viel klarere Vision des Projekts insgesamt haben, finde ich, dass es eine viel bessere Entscheidungsfindung ermöglicht. Wenn ich zum Beispiel direkt in den Code taucht, könnte ich ein Problem stoßen, das ich dann zurückgehen würde, und Refaktor. Mit diesem Ansatz gibt es ein paar verschiedene Ergebnisse. Erstens könnte ich sein, dass ich den Code vollständig löschen muss und erneut beginnen muss; Zweitens, wenn ich auf dieser Weise fortgesetzt werde, kann ich mit 'Spaghetti-Code' enden, der es in der Zukunft schwierig macht, in der Zukunft zu aktualisieren, zu debuggen und zu einem Leistungsverlust zu führen; Drittens, manchmal funktioniert es okay, und Sie enden mit einem besseren Code, aber ich neige dazu, zu sagen, dass der erste und der zweite Ergebnis viel häufiger sind.

Dieses Projekt ist ziemlich klein; Es gibt ein paar Seiten: Home, News, Gigs, Medien, Alben, Links und gemeinsame Teile auf diesen Seiten: Header, Navigation, Typografieinhalte, Listen, Bilder, Videos. Bei der ursprünglichen Bau der Flash-Site im Jahr 2004 waren die Dinge in Bezug auf das Testen viel einfacher. Die Site wurde in Flash eingebaut, zum Flash auf einem Desktop-Computer mit Maus und Tastatur. Heutzutage ist die Internetnutzung der Mobil- und Tablet-Internetnutzung häufiger als auf einem Desktop-Computer, und dieser Trend steigt weiter an.

Um dies zu einem besseren Erlebnis dafür zu machen, wer den Standort anschaue, dauert ich ein paar Dinge zu Beginn des Projekts und nutzen Sie eine mobile erste Strategie. Um dies zu tun, und wieder, bevor Sie einen beliebigen Code schreib, werde ich einen guten altmodischen Stift und ein Papier aussteigen. Zuerst schreibe ich die Sitemap aus; Dabei gibt es einige wichtige Bereiche, die ich für verbessert werden kann. Beispielsweise bestand meine ursprüngliche Site aus verschiedenen Seiten für jedes der Alben der Band. Zu der Zeit hatten sie drei Alben und passen so gut in die Navigation. Jetzt haben sie viel mehr und potenziell mehr zu kommen, also denke ich schon in meinen Gedanken darüber nach, wie er den Standort mehr zukünftiger (ein Oldie, aber ein Goodie ist, ist Dan Cederholms Kugelfest Webdesign. ).

Jetzt habe ich eine grobe Idee in meinem Kopf der Sitemap und in den Seiten, in der Nähe ist es, einige Low-Fi-Wireframes zu erstellen. Aus früheren Erfahrungen bauen sich das Bauen zahlreiche ansprechende Sites, Mobiltelefone mit interessanten Design-Herausforderungen, nämlich wie man eine Navigation erstellt, jedoch den Menschen den Hauptinhalt des Standorts anzunehmen. Ich gehe mit dem Design-Ergebnis zusammen, das wir alle gewachsen sind, um zu lieben / zu hassen: Der Menüansatz des Burger-Menüs. Ich werde jedoch eine kleine Drehung hinzufügen. Das Original-Kunstwerk verwendete Vögel, so eher als das Standard-Burger-Menü-Symbol, ich werde Vogelgrafiken verwenden, der das Menü aktiviert und die Flügel öffnen und schließen, um anzuzeigen, ob das Menü aktiv ist oder nicht.

Die Dinge in meinem Kopf nehmen jetzt an, mit einer Idee, wie Menschen um den Standort 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 Typografieinhalten. Nächste, News - erneut Typografieinhalte, 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. Für Medien, auf die Rückblick auf die vorherige Site, hatte ich "Bilder" und "Videos" als zwei verschiedene Abschnitte, aber hier denke ich, dass es eine Verbesserung des Raums gibt und als "Medien" zu konsolidieren. Alben, ah, ja Alben - Nun zahlt sich dieses Sorte aus. Sie sehen, die Seite der Alben hat Typografie und ein Bild und benötigt eine Art Navigation, um ältere Beiträge anzuzeigen. Klingt bekannt? Klingt viel wie die gleiche Struktur wie die Nachrichtenseite! Mit diesem obersten Überblick kann ich ansehen und die Dinge an einem körnigeren, Bauteil überlegen und denken, man könnte sogar sagen Atomdesign Niveau, wenn Sie mit der Arbeit von Brad Frost vertraut sind.

Jetzt habe ich eine Vorstellung davon, wie die Website an kleineren Geräten und wiederverwendbaren Elementen arbeiten wird, es ist Zeit, den Prozess mit größeren Geräten zu wiederholen. Da die Site ziemlich einfach ist, und mit den Wireframes, die bereits für Mobile erstellt wurden, sehe ich, dass die größeren Geräte ziemlich ähnlich sind - abgesehen von nun, wir haben einen zusätzlichen Raum, so dass wir die Inhaltsbereiche erweitern und auch eine seitliche Navigation enthalten können.

Die seitliche Navigation ist das Bit der Site, von dem ich aus dem Offset am meisten aufgeregt bin. Inspiration aus dem Originalgrafik der Band baute ich die Navigation als Baum-Silhouette mit Blättern. Jedes Blatt war ein Knopf, der mit einer anderen Seite der Site verknüpft ist. Auch, wenn Sie hineinregelt und vom Blatt weg schwebten, würde das Blatt animieren und zu Boden fallen. Blitz war dabei großartig; Es wurde twening genannt. Sie können ein Element in einem Keyframe in der Schnittstelle in der Timeline einstellen, einen anderen Keyframe entlang der Zeitleiste erstellen und einen Pfad für das folgende Element hinzufügen. Die Dinge ein wenig weiter nehmen, variieren die Wege, Dauer und Geschwindigkeit der fallenden Blätter, endete ich mit etwas, mit dem ich sehr zufrieden war.

Aber jetzt verwenden wir kein Flash, also wie machen wir das? Ganz oft springe ich zu Codepen oder JS bin. Für diejenigen von Ihnen, die nicht wissen, sind CodePen und JS bin Online-Dienste, mit denen Sie schnell codieren und speichern können. Ich neige dazu, Codepen als mehr Design-LED zu sehen, und JS bin mehr Javascript fokussiert. Für dieses Projekt benutze ich Codepen, um die Tree-Navigation aus einigen Gründen zu erstellen. Zuerst möchte ich anfangen, die Haupt-Mobile-Version des Standorts aufzubauen, und in der Tat dadurch, dass ich Zeit kritisch war, könnte ich mit einem MVP enden. Zwar gibt es Verbesserungen an der Website, die durch Hinzufügen der netten Blattnavigation und der Animation erfolgen könnte, dauert dies länger, um zu produzieren. Ein Vorteil, in Codepen für die Tree-Navigation zu arbeiten, bedeutet, dass es von der Hauptstätte und der Codebasis isoliert ist. Wenn die Dinge schwierig werden, wenn Sie es abschließen, kann ich sparen, wo ich bin, mit dem Haupt-Site-Build weiterzumachen, und dann wieder zur Navigation zurückkehren. Manchmal finde ich das, wenn ich von einem Problem wegging, oder sogar darauf schlafen, mein Unterbewusstsein kann weiterhin darüber nachdenken. Bei der Rückkehr zum Problem stellt sich dann eine Lösung dar.

Svgs! Ich liebe SVGs. Zuvor in Flash, habe ich das Blattvermögen in Illustrator herausgezogen. Erstaunlich hatte ich immer noch eine arbeitende CD mit dem Originalgrafik und konnte es öffnen. Heutzutage verwende ich Skizze und er hat eine großartige Aufgabe gemacht, die Datei zu öffnen. Ich habe jetzt das Blattvermögen, das alle bereit ist, als SVGs exportiert zu werden. Warum SVGs? Es gibt viele Gründe. Wenn wir ein JPG oder GIF auf einem Retina-Gerät verwenden würden, müssen wir auch größere Vermögenswerte liefern, andernfalls würden sie unscharf aussehen. Mit SVGS können wir auch CSS verwenden. Das ist großartig und lässt uns einfach die Farbe der SVG mit einem Bit von CSS ändern, anstatt ein anderes Bildangebot erstellen zu müssen. Dies bedeutet, dass es einfacher war, zu warten, und als Bonus ist es auch mehr aufführlicher. Wenn Sie mit SVGs nicht vertraut sind, würde ich wärmstens empfehlen, auf ihnen und die unglaubliche Arbeit von meinem guten Freund zu lesen, Sara Soueiidan. .

Mit dem Baum- und Blattvermögen nun an Ort und Stelle ist das Finale der Animation. Es gibt ein paar Ansätze, mit denen ich mitnehmen konnte. Man wäre es, dem ursprünglichen Flash-Pfad zwar treu zu bleiben, den ich tat. Dies würde bedeuten, die Wege zu replizieren und SVG zu verwenden, und dann potenziell weitere SVG-Arbeit mit Pfaden und Animatemotion. Ich mag diese Idee von einer nostalgischen Sicht, aber CSS ist im Laufe der Jahre sehr viel gekommen, und wir haben jetzt verwandelt und übersetzen, so dass dies ein anderer Ansatz sein könnte. Wenn wir einen Schritt weiter nehmen, könnten wir sogar ein JavaScript hinzufügen, das die fallenden Blätter randomisieren würde.

Beide Optionen klingen gut an, aber ich schwang in Richtung der mehr CSS-LED-Route. Hier ist ein weiterer Vorteil der Verwendung von Codepen, ich kann schnell gehen und einen Ansatz ausprobieren. Wenn es sich herausstellt, dass es komplizierter ist, als ich ursprünglich gedacht habe, oder es fühlt sich nicht richtig an, ich kann einen anderen Ansatz mit wenig Zeit versuchen, mit wenig Zeit verabschieden. Tatsächlich stellte sich das als eine großartige Idee heraus! Ich betrachte immer noch Optionen dafür - siehe das Projekt auf GitHub für das Endergebnis.

Wenn die Tree-Navigation jetzt sortiert wurde, kehrte ich dem mobilen ersten Ansatz zurück, erhob die Navigation. Wenn Sie mit Sass vertraut sind, haben Sie mehr als wahrscheinlich auf Variablen. Aber wussten Sie wissen, dass Variablen jetzt in CSS verfügbar sind? Sie haben Hübsche anständige Browser-Unterstützung In Chrom, Rand, Safari und Samsung Internet! Da ich versuche, den grundlegenden CSS aufrechtzuerhalten und die Notwendigkeit zusätzlicher Abhängigkeiten zu vermeiden, ist dies eine großartige Nachricht. Wie würden wir das also umsetzen? An der Spitze des Stilblatts erkläre ich meine Variablen:

: root {
  --Grey: #ccc;
  --red: # FB0F0C;
  --GRID-Größe: 10px;
} 

Nun, da sie erklärt werden, kann ich sie anrufen, also würde zum Beispiel die Körperhintergrundfarbe so aussehen:

 Körper {
  Hintergrund: var (- grau);
} 

Wenn Sie einen Schritt weiter nehmen und mit der Gitterausrichtung, weißen Platz, vertikaler Rhythmus helfen, haben Sie möglicherweise bemerkt, dass ich auch eine Gittergröße-Variable definiert habe. Variablen funktionieren sehr gut mit Calc und das sieht ein bisschen so aus:

 // Standardvariable verwendet, die verwendet werden, Ausgänge 10px.
Padding-Top: Var (- Gittergröße);

// Hinzufügen von Calc, um die variable Einheit mit 2 mit 2, Ausgänge 20px zu multiplizieren.
Padding-Bottom: Calc (Var (- Gittergröße) * 2); 

Mit den mobilen Navigationsstilen komplett können wir die Funktionalität zum Verstecken und Anzeigen angehen. Für die Toggle-Taste wenden wir ein Etikettenmarket an, dann fügen wir in das NAV-Tag eine Eingabe hinzu:

& lt; Header-Klasse = "Header" & GT;
  & lt; H1-Klasse = "header_title" & gt; Band-Website & lt; / h1 & gt;
  & lt; H2-Klasse = "header_currentpage" & gt; home & lt; / h2 & gt;
  & lt; label für = "mobileenav_toggle" Klasse = "mobileenav_toggle" & gt; Toggle & lt; / label & gt;
& lt; / header & gt;

& lt; nav class = "mobileenav" & gt;
  & lt; Eingabetyp = "Kontrollkästchen" ID = "mobileenav_toggle" Rolle = "Button" & GT;
  & lt; ul Class = "mobileenav_list" & gt;
    & lt; li class = "mobileenav_listitem" & gt; & lt; eine Klasse = "mobileenav_listitemlink" href = "#" & gt; home & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobileenav_listitem" & gt; & lt; eine Klasse = "mobileenav_listitemlink" href = "#" & gt; über & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobileenav_listitem" & gt; & lt; a class = "mobileenav_listitemlink" href = "#" & gt; portfolio & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobileenav_listitem" & gt; & lt; eine Klasse = "mobileenav_listitemlink" href = "#" & gt; news & lt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobileenav_listitem" & gt; & lt; eine Klasse = "mobileenav_listitemlink" href = "#" & gt; Kontakt & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Mit den folgenden CSS können wir das Navigationsmenü anzeigen und ausblenden. Da wir das Etikett in der Kopfzeile wünschen, können wir ~ aka tilde oder (u + 007e) verwenden, sodass es funktioniert, während er nicht sofort vom ersten Element gelungen ist.

 #mobilenav_toggle [type = checkbox] {
  Anzeige: Keine;
}

#mobilenav_toggle [type = checkbox]: checkiert ~ .mobilenav_list {
  Bildschirmsperre;
} 

Mit der mobilen Navigation komplett, ist es Zeit, einige zu implementieren sich anpassendes Webdesign . Wenn Sie den Hauptinhalt für die Site hinzufügen, dann mit der ansprechenden Ansicht in Chrome-Entwickler-Tools, kann ich die Viewport-Breite erhöhen, bis ich das Gefühl habe, dass es genügend Platz gibt, um die Tree-Navigation angemessen zu halten. Damit ist es bei 600 px, und dafür können wir eine Medienabfrage verwenden:

 .TreenenAV {
  Anzeige: Keine;
}

@Media-Bildschirm und (Min-Breite: 600px) {
  .TreenenAV {
    Bildschirmsperre;
  }
} 

Fast dort! Endlich für die Tree-Navigation, neben dem Hauptinhaltsbereich zu sitzen, nutze ich Flexbox:

 .container {
  Anzeige: Flex;
}

.TreenenAV {
  Anzeige: Keine;
  Min-Breite: 140px;
} 

Nun dauert die Tree-Navigation 100% Höhe, wobei der Inhalt das gleiche tun und rechts davon sitzt. Dies bedeutet, dass egal wie lange der Inhalt wird, es wird niemals unter der Baumnavigation fließen. Wenn Sie mehr über Flexbox erfahren möchten, empfehlen Sie das Auschecken flexbox.io. von der einzigen und nur Wes Bos. Es gibt viel, was es kann!

Das ist alles, was ich gerade Zeit habe, aber es gibt immer noch viele Dinge, die wir tun könnten, um dieses Projekt noch besser zu machen. Wenn Sie Fragen haben oder den Artikel mochten, sagen Sie bitte Hallo auf Twitter oder durch meine Seite oder schick 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. Kaufen Sie das Thema 304 hier oder Abonnieren Sie hier .

Zum Thema passende Artikel:

• 5 Tipps für superschnelle CSS
• Animieren Sie SVG mit Javascript
• Verstehen der CSS-Display-Eigenschaft