Advertisement
  1. Web Design
  2. Complete Websites

Leistungsstarkes Webdesign mit Daten-URIs

Scroll to top
Read Time: 31 min

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Wir haben kürzlich das Was, Warum und Wie von Daten-URIs im Webdesign auf Webdesigntuts+ behandelt, wo wir einige der Möglichkeiten untersucht haben, Daten-URIs für leistungsfreundliche Schnittstellendesigns zu verwenden.

Im heutigen Premium-Tutorial werden wir einige der im Einführungsartikel behandelten Theorien anwenden und auf einigen der Beispiele aufbauen, die zur Entwicklung einer vollständig realisierten Benutzeroberfläche verwendet wurden. Um die Sache interessant zu halten, werden wir auch unser Design ansprechend gestalten und die Dribbble-API und jQuery verwenden, um einige Bilder aus dem Envato-Dribbble-Feed einzulesen.

Es gibt viel zu besprechen, also fangen wir an!


Bevor wir anfangen

Wie ich bereits erwähnt habe, baut dieses Tutorial auf dem Tutorial Das Was, Warum und Wie von Daten-URIs im Webdesign auf. Auch wenn Ihr Wissen über Daten-URIs bereits solide ist, empfehle ich Ihnen dringend, diesen Artikel zu lesen, bevor Sie hier beginnen. Ich werde einen Teil des Codes aus den Übungen im ersten Artikel verwenden, um Zeit zu sparen, daher bitte ich Sie, an einigen Stellen zum ursprünglichen Artikel zurückzukehren.

Zweitens werden wir uns in diesem Projekt stark auf Daten-URIs verlassen, um Ihnen viel Übung bei der Verwendung dieser Technik zu geben. Ob ich Daten-URIs tatsächlich so stark in der Produktion verwenden würde oder nicht, ist fraglich (insbesondere, wenn <IE7) unterstützt wird. Denken Sie also daran, dass Daten-URIs einfach ein weiteres Werkzeug in Ihrer Toolbox sind und diese Techniken nicht unbedingt ein Allheilmittel für jede Situation sind.

Schließlich wird dieses Projekt in den neuesten Versionen von Webkit, Firefox und Internet Explorer getestet. Sie können davon ausgehen, dass diese Schnittstelle in IE7 und darunter nicht voll funktionsfähig sein wird (obwohl Fallbacks leicht angewendet werden könnten, um bei Bedarf alte IE-Versionen zu unterstützen). Außerdem beziehe ich mich im Tutorial auf -webkit und generische Präfixe für CSS3-Elemente, aber die Quelldateien enthalten alle Herstellerpräfixe.


Eine zweiminütige Überprüfung der Daten-URIs

Bevor wir loslegen, lassen Sie uns (sehr) kurz auffrischen, was das Daten-URI-Schema ist und warum es eine gute Alternative sein kann, um dem Browser Elemente bereitzustellen, die traditionell Ressourcen verbrauchen und die Leistung verlangsamen können.

  • Daten-URIs sind eine Möglichkeit, Binärdaten in eine ASCII-Textzeichenfolge zu codieren, die moderne Browser lesen und rendern können.
  • Daten-URIs werden häufig verwendet, um Bilddateien zu ersetzen, aber alle Binärdaten können codiert werden, einschließlich SVG, Multimedia, Schriftarten und mehr.
  • Der Hauptvorteil der Verwendung von Daten-URIs besteht darin, die Anzahl der HTTP-Anforderungen zu reduzieren, die zum Laden der Seite im Browserfenster erforderlich sind. Einfach ausgedrückt, wirkt sich jede zusätzliche HTTP-Anfrage (normalerweise) negativ auf die Gesamtleistung der Website aus.
  • Daten-URIs sind etwa 33% größer als ein Standarddateityp (z. B. ein JPG-Bild), aber mit Komprimierung und Gzipping wird diese Menge oft auf unter 5% reduziert. Diese zusätzliche Dateigröße ist normalerweise kein großes Problem, sollte jedoch bei der Auswahl der besten Technik zum Einbinden von Assets in ein Design berücksichtigt werden.
  • Daten-URIs sind lang, unsinnig und sehen überhaupt nicht schön aus, was das Lesen, Navigieren und Verwalten von Markup und Stylesheets erschwert. Es ist eine gute Idee, Code-Folding in Ihrem Texteditor großzügig zu verwenden!

Angriffsplan

Es gibt drei separate Phasen dieses Tutorials, die wir in der folgenden Reihenfolge behandeln werden:

  1. Entwerfen Sie die Site in 'full-width' mit Referenzbildern in HTML und CSS.
  2. Ziehen Sie Bilder aus der Dribbble-API und dem jribbble jQuery-Plugin ein
  3. Fügen Sie Medienabfragen hinzu, damit die Site in kleineren Ansichtsfenstern reagiert.

Okay! Genug zu reden! Kommen wir zur Codierung!


Schritt 1: Erstes Markup

Für unser Design gehen wir von der neuesten HTML5 Boilerplate als Ausgangspunkt aus. Wir werden nicht alle Funktionen des Boilerplates im Projekt verwenden (z. B. das Modernizer-Skript oder Analytics), es ist jedoch eine gute Idee, es in der Anfangsphase 'wie es ist' zu belassen und später im Projekt zurückzukehren um alle Funktionen zu reduzieren, die wir am Ende nicht verwendet haben (oder wahrscheinlich auch in Zukunft nicht verwenden werden).

Erstellen Sie eine neue index.html-Datei in einem Verzeichnis, das auch einen CSS- und einen js-Ordner enthält.

Fügen Sie im <body> des Dokuments eine <header>, einen vorgestellten Inhalt <div> und eine <footer> hinzu. Diese werden wir im weiteren Verlauf ausarbeiten.

Dann setzen wir unser CSS mit Eric Myers CSS Reset zurück und fügen einige grundlegende Layoutstile hinzu:

Hier sollte alles ziemlich einfach sein, mit Ausnahme der universellen Anwendung des border-box-Box-Modells. Anstatt das Standard-Box-Modell zu verwenden, bei dem Padding, Margin und Rand separat zur definierten Breite des Elements hinzugefügt werden, ist die definierte Breite die Gesamtbreite des Elements, bestehend aus Padding, Margin und Border.

Dieser Ansatz ist für flüssige Layouts beliebt und viele der gängigen Frameworks verwenden das border-box-Modell, einschließlich Twitter Bootstrap und Zurb Foundation, da es die Arbeit mit Prozentsätzen kinderleicht macht. Benötigen Sie gleich breite Spalten mit Zwischenstegen dazwischen? Einfach. Wenden Sie einfach das Boder-Box-Modell an und setzen Sie die Spalte auf 33,333% – ohne dass die Auffüllung und die Ränder separat berechnet werden müssen.

Natürlich gibt es bisher nicht viel zu sehen, dies ist nur unsere Leinwand!


Schritt 2: Definieren Sie ein einfaches flüssiges Gitter

Wenn Sie sich die Demo ansehen, werden Sie feststellen, dass die vorgestellten Inhalte in drei gleichbreiten Spalten angeordnet werden. Hinter den Kulissen befinden sich diese Spalten in einem <div> mit der Klasse <class="row">, das einen zentrierten Inhaltsbereich mit einer maximalen Breite von 1024px festlegt.

Damit wir mit dem Rest unseres Projekts reibungslos fortfahren können, definieren wir dieses einfache Raster in unserem CSS (teilweise adaptiert aus Zurb Foundation 3.1):

Lassen Sie mich einige Punkte in diesem Codeblock klären, bevor wir fortfahren. Zunächst sehen Sie, dass wir der Zeile eine min-width von 767 px zugewiesen haben. Das bedeutet, dass bei Anzeige in Darstellungsfenstern mit einer kleineren Breite als dieser Breite alle untergeordneten Elemente (d. h. .row .three) die Skalierung einstellen, um zu verhindern, dass die vorgestellten Inhaltselemente zu klein werden. Wir kehren zu unseren Medienabfragen zurück, um dem Browser etwas später in der Anleitung zusätzliche Anweisungen zu geben, wenn der Darstellungsbereich kleiner als 767px ist.

Zweitens müssen wir alle Floats nach dem div-Tag der schließenden Zeile löschen, da wir wissen, dass jede Zeile schwebende untergeordnete Elemente enthält. In diesem Projekt habe ich den clearfix-hack auf das row:after-Pseudoelement angewendet. Wenn Sie dieses Projekt ausbauen möchten und möglicherweise zusätzliche Clearfixes benötigen, hängen Sie einfach die .row:after-Regel mit einer zusätzlichen Klasse von .clearfix:after an.


Schritt 3: Definieren Sie Typografie und Symbolschriftarten

Obwohl wir noch keine Schriftarten verwendet haben, ziehe ich es vor, meine Typografie am oberen Rand des Stylesheets zu etablieren (obwohl Sie nichts davon abhält, dies später anzugehen). Damit wir ohne Backtracking direkt ins Design einsteigen können, legen wir jetzt alle Grundregeln für unsere Typografie- und Icon-Fonts fest.

Für unsere benutzerdefinierte, base64-codierte Symbolschrift verwenden wir die hervorragende IcoMoon-App, um unseren Symbolschriftsatz und das erforderliche CSS zu generieren. Eine vollständige exemplarische Vorgehensweise mit Screenshots finden Sie im Data URI-Tutorial.

Zusammenfassend erstellen Sie mit der IcoMoon-App die folgende Symbolschrift:

  • Wählen Sie ein benutzerdefiniertes Set aus, das die Symbole "Herz", "Auge", "Kommentar" und "Lupe" aus der Broccolidry-Familie enthält.
  • Ändern Sie die Basislinieneinstellung auf 10%.
  • Ändern Sie unter "Weitere Einstellungen" den Schriftartnamen in "customFont".
  • Setzen Sie ein Häkchen bei 'Base64 Encode & Embed Fonts in CSS'

Laden Sie die Schriftart herunter, öffnen Sie das Haupt-Stylesheet und kopieren Sie das CSS in die Datei style.css des Projekts.

Neben einigen zusätzlichen Schriftarten enthält Ihr Typografie-Abschnitt Ihres Stylesheets den folgenden Code:

Eine ausführlichere Erläuterung der Syntax dieses Codes, seiner Verwendung und des alten IE-Fix finden Sie im Tutorial zum ersten Daten-URI.

Nachdem wir nun alle unsere Grundlagen geschaffen haben, einschließlich eines grundlegenden flüssigen Rasters und einer base64-codierten benutzerdefinierten Symbolschrift, gehen wir nun durch die einzelnen Abschnitte und geben unserem grundlegenden Markup den dringend benötigten Feinschliff.


Schritt 4: Geben Sie dem Körper einen sich wiederholenden Hintergrund

Im ersten Tutorial haben wir einen Daten-URI aus einem kleinen Bild von Subtle Patterns erstellt, das sich perfekt für den Hintergrund unserer Site eignet. Nehmen Sie dieses base64-codierte Bild und fügen Sie es dem <body>-Element unserer Seite als sich wiederholendes background-image hinzu.

Füllen Sie die body-Regel mit dem folgenden CSS aus, das aus den vorherigen Schritten in diesem Tutorial stammt:

Groß! Wir haben jetzt eine hübsch aussehende Hintergrundkachel, die sich sowohl auf der y- als auch auf der x-Achse über das gesamte Dokument wiederholt.


Schritt 5: Markieren und gestalten Sie den Site-Header

Kehren Sie in Ihr Markup zurück und fügen Sie im Abschnitt <header> den folgenden HTML-Code hinzu:

Als Nächstes gestalten wir unseren Header-Hintergrund mit einem karierten Hintergrund, der mit sich wiederholenden linearen Farbverläufen gerendert wird:

Dieser Hintergrund ist eine Modifikation einer Technik, die in einem kürzlich erschienenen Artikel von Webdesigntuts+ verwendet wurde. Weitere Informationen finden Sie unter Das Was, Wo und Wie von Texturen im Webdesign.

Weiter fügen wir unser .svg-Logo hinzu, das Sie aus dem Ressourcenbereich dieses Tutorials herunterladen können.

Sie werden feststellen, dass ich das Logo als externe .svg-Datei im HTML-Markup (mit der zusätzlichen HTTP-Anforderung) für eine vollständig skalierbare Vektorlösung referenziert habe. Für ein echtes bildfreies Design können Sie die .svg-Datei auch direkt im HTML-Code selbst verwenden. Wie Sie dies am besten tun, erfahren Sie unter Erste Schritte mit skalierbaren Vektorgrafiken (SVG).

Als Nächstes gestalten wir ein einfaches Navigationsmenü für die Website:


Schritt 6: Gestalten Sie eine einfache Fußzeile

Wir unterbrechen unseren logischen Fluss nur für einen Moment und kümmern uns um das Styling der (sehr einfachen) Fußzeile, da sich der Großteil der kommenden Schritte auf die Erstellung der Inhaltselemente konzentrieren wird, und ich möchte dies tun sicher, dass wir in diesem Abschnitt die Dynamik beibehalten. Fügen Sie Ihrem HTML-Code das folgende Markup hinzu:

Das Styling wie folgt:

Nachdem dies erledigt ist, kehren wir zum Schwerpunkt des Designs zurück, den vorgestellten Inhaltselementen.


Schritt 7: Empfohlene Inhaltselemente

In der nächsten Phase des Tutorials ziehen wir Bilder aus Dribbble mit jQuery und der Dribbble-API. Im Moment verwenden wir nur ein Platzhalterbild und legen den allgemeinen Stil der Bilder selbst fest.

Es ist wichtig zu beachten, dass sich unser Markup sehr bald ändern wird, um das jQuery-Plugin aufzunehmen, also hängen Sie nicht zu sehr an das folgende Markup! Wenn Sie jedoch keine Ressourcen von einer externen Site abrufen und Ihre eigenen statischen Assets bereitstellen möchten, verwenden Sie diesen Code.

Wir werden die Schnittstelle so gestalten, dass sie durch die Replikation des gesamten <figure>-Elements auf beliebig viele Bilder erweitert werden kann. Wir beginnen damit, ein einzelnes <figure>-Element zu erstellen und es dann fünf weitere Male zu replizieren, um zwei Reihen mit drei Bildern zu erstellen.

Fügen Sie in Ihrem HTML-Code das Basis-Markup für die Bildbereiche der vorgestellten Inhalte direkt unter dem Tag </header> hinzu:

Zusammenfassend haben wir hier drei Spalten gleicher Breite erstellt (33,3333%). In jeder Spalte haben wir Folgendes erstellt:

  • ein <figure>-Element, das das Bild enthält,
  • ein verankerter Link, der uns zu zusätzlichen Inhalten führt (z. B. Dribbble)
  • ein Span-Element innerhalb des Links, das unser Lupensymbol definiert
  • ein Image-Tag ohne festgelegte Quelle (wir werden dies in den nächsten Schritten mit jQuery füllen)
  • eine ungeordnete Liste von Symbolschriften für 'Kommentare', 'Ansichten' und 'Gefällt mir', denen einige willkürliche Zahlenwerte zugewiesen wurden.

Da die Platzierung/der Fluss der Bilder für die gesamte Dokumentstruktur nicht entscheidend ist, ist das HTML5-Element <figure> der perfekte Wrapper für das <img>-Element.

Gehen wir zum Stil der Inhaltselemente über. Beginnen wir damit, einen Rand am unteren Rand der Inhaltselementzeilen hinzuzufügen und dann das <figure>-Element zu formatieren. Die <figure> besteht aus einem Element und zwei Pseudoelementen, um den Effekt eines gestapelten Bilderstapels zu erzielen.

Um eine Benutzeroberfläche zu erstellen, die besser auf sich ändernde Browserfenstergrößen reagiert, sowohl horizontal als auch vertikal, verwenden wir Prozentsätze, um die Breite und Höhe des Elements zu messen, wo immer wir können.

Der zum Stylen der Figurenelemente und des Bildstapeleffekts erforderliche Code lautet wie folgt:

Wir sollten jetzt einen netten Stack-Effekt haben, der gut skaliert, wenn das Browserfenster von voller Breite auf 767px verkleinert wird.


Schritt 8: Platzhalterbilder erstellen

Als Nächstes gestalten wir das eigentliche Bild selbst. In der nächsten Phase des Tutorials werden wir diesen Bereich mit Assets direkt aus Dribbble füllen, aber vorerst fügen wir ein Platzhalterbild (ein graues Envato-Logo) hinzu, das sicherstellt, dass unser <figure>-Element nicht t zusammenbrechen, während Bilder geladen werden. Darüber hinaus wird das Platzhalterbild auch das Design funktionieren lassen, wenn es in Zukunft Probleme beim Abrufen des Inhalts von Dribbble gibt (obwohl wir das standardmäßige Symbol für defekte Bilder beibehalten möchten, um dem Benutzer ein Feedback zu geben, das es geben sollte ein Bild).

Für das Platzhalterbild habe ich ein 291px x 218px .jpg-Bild (in den Quelldateien enthalten) mit dem Web Semantics Data URI-Tool in einen Daten-URI umgewandelt.

Nachdem wir die base64-codierte Zeichenfolge aus dem Ausgabebereich des Tools kopiert haben, können wir das Styling für das Bildelement abschließen:

Indem wir dem Bild eine Breite von 100 % und eine maximale Höhe von 218 Pixeln geben, stellen wir sicher, dass die Bilder ihr Seitenverhältnis beibehalten, während sie relativ zum <figure>-Element verkleinert werden, wenn die Größe des Browserfensters geändert wird. Es gibt ausgefeiltere Ansätze für responsive Medien, aber dieser supereinfache Ansatz wird für diese Anwendung gut funktionieren.

Für einen schnellen Sanity-Check sollten Sie dies bisher für das erste <figure>-Element haben:


Schritt 9: Stylen Sie den 'Mehr anzeigen'-Link

Wenn der Mauszeiger über jedes der Bilder fährt, erscheint eine halbtransparente Überlagerung über dem Bild zusammen mit einer Lupe, die wir mit unserer Symbolschriftart erstellen.

Sehen wir uns zunächst schnell das Markup für den Link Mehr anzeigen an:

Wir werden einen Ankerlink auf Blockebene gestalten, der eine Breite von 100 % und eine Höhe von 100 % enthält und eine Klasse für die icon-search hat, die sich in unser bereits eingerichtetes CSS für die Symbolschriftart einklinkt.

Der Code für den Link sieht so aus:

Als Nächstes fügen wir Pseudoklassen hinzu, um den Link auf :hover und :active zu gestalten:

Beachten Sie, dass für die Größe und Positionierung des View-More-Links standardmäßig Prozentsätze verwendet werden. Dieser Ansatz ermöglicht es, den View-More-Link zu skalieren und ein schönes Verhältnis beizubehalten, wenn die Größe des Browserfensters geändert wird.

Außerdem werden Sie feststellen, dass ein Übergang auf dem a.viewmore-Link selbst ausgelöst wird. Während dies selbst nichts bewirkt, ermöglicht es, dass der Link ausgeblendet wird, wenn der Benutzer den Mauszeiger über das Element bewegt und sich dann vom Element entfernt.


Das CSS für die Lupenspanne wird durch die Verwendung von zwei separaten Klassen erstellt, large-icon und icon-search. Der Code für die erste Klasse lautet wie folgt (den ich im Abschnitt "Typografie" des Stylesheets eingefügt habe):

Und wir haben das CSS für die icon-search bereits weiter oben im Tutorial mit dem generierten Code aus der IcoMoon-App erstellt. Um Ihr Gedächtnis aufzufrischen, hier ist jedoch der relevante Code, der das stillose Vergrößerungssymbol anzeigt:

Es ist wichtig anzumerken, dass wir versucht haben, die Präsentation und das Styling des Symbols so weit wie möglich zu trennen (tatsächlich habe ich versucht, dies im gesamten Design großzügig anzuwenden). Dies ist ein kleines Projekt, aber wenn wir den Umfang der Benutzeroberfläche erweitern und das Lupensymbol an einer anderen Stelle im Design wiederverwenden wollten, wird dieser objektorientierte Ansatz die Komplexität der Änderung des Stils des Symbols reduzieren.


Schritt 10: Style die Kommentare/Gefällt mir/Ansichtsliste

Jetzt müssen Sie nur noch unsere Icon-Gruppe mit den passenden Icon-Fonts gestalten.

Erinnern wir uns nur an das Markup für diesen Teil des Projekts. Jedes Inhaltselement hat die folgende ungeordnete Liste:

Sie werden feststellen, dass wir im vorherigen Schritt zwar einen Klassennamen für unser Lupensymbol verwendet haben, aber für diese Liste den data-icon-Ansatz verwenden. Es gibt keinen besonderen Grund, diesen Ansatz gegenüber der klassenbasierten Anwendung zu verwenden – es ist nur eine gute Gelegenheit, die alternative Ausführung von Symbolfonts zu verwenden. Sie werden sehen, dass wir den Unicode verwendet haben, der uns von der IcoMoon-App zur Verfügung gestellt wurde, um das entsprechende Symbol zu definieren. Lassen Sie uns zuerst die Liste selbst gestalten:

Der erste Abschnitt des obigen Codes positioniert das <ul>-Element, während der Stil für die Listenelemente sie nach rechts verschiebt, das Element inline anzeigt und einen Stil auf übergeordneter Ebene festlegt. Als Nächstes formatieren wir die Elemente list-item und list-number:

Und damit haben wir unser erstes vorgestelltes Inhaltselement mit coolem CSS3 und zwei verschiedenen Implementierungen von Symbolschriftarten gestaltet. Hier ist unser letztes Inhaltselement, das mit dem Link view-more im schwebenden Zustand angezeigt wird:

Wenn wir die Schnittstelle zu diesem Zeitpunkt statisch halten (d. h. keine Assets über die Dribbble-API abrufen), könnten wir den Codeblock content-items einfach so oft wie erforderlich kopieren und einfügen und auf eine geeignete Bilddatei verweisen. Da wir in den nächsten Schritten jedoch etwas anders vorgehen, werden wir unser Markup(vorerst) so belassen, wie es ist, bevor wir über die nächsten Schritte sprechen und – schluck – unsere bisherige Arbeit auseinanderbrechen.


Schritt 11: Einführung der Dribbble-API und des Jribbble-Plugins

Für die nächsten Schritte des Tutorials werden wir unsere Featured-Content-Elemente mit Aufnahmen füllen, die direkt aus Dribbble über die Dribbble-API aufgenommen wurden.

Die API ermöglicht es uns, Inhalte direkt aus der Anwendung über HTTP zu übernehmen, wobei die Antworten als JSON zurückgegeben werden. Zum Zeitpunkt des Schreibens erfordert die API keinen Schlüssel und hat eine ziemlich liberale nicht-kommerzielle Lizenz mit einigen Einschränkungen, ist also perfekt für unsere Anwendung.

Machen Sie sich keine Sorgen, wenn Sie noch nie eine API in Angriff genommen haben. Wir werden das Jribbble jQuery-Plugin verwenden, um eine Aufnahme über eine ID anzufordern und sie mit unserem benutzerdefinierten Layout, das wir bereits entworfen haben, in das DOM einzufügen. Wie ich bereits erwähnt habe, werden wir über das Jribbble-Plugin und die Dribbble-API einzelne Aufnahmen anfordern (für die Zwecke des Projekts werden wir sechs Aufnahmen vom Envato-Dribbble-Account nehmen).

Wie zu erwarten, können Sie mit Jribbble neben einzelnen Aufnahmen auch eine Reihe von Parametern anfordern, darunter:

  • Holen Sie sich einen Schuss
  • Holen Sie sich die Kommentare eines Schusses
  • Holen Sie sich die Rebbbounds eines Schusses
  • Holen Sie sich eine Liste der Aufnahmen nach dem Listennamen
  • Holen Sie sich eine Liste der Schüsse eines Spielers
  • Holen Sie sich eine Liste der Schüsse, denen ein Spieler folgt
  • Holen Sie sich eine Liste der Schüsse, die einem Spieler gefallen
  • Holen Sie sich die Profildetails eines Spielers
  • Holen Sie sich die Follower eines Spielers
  • Holen Sie sich die Spieler, denen ein Spieler folgt
  • Holen Sie sich die Wehrpflichtigen eines Spielers

Ich werde heute keine Zeit damit verbringen, auf das Plugin oder die API in nennenswertem Detail einzugehen, aber wenn Sie den Umfang dieses Tutorials erweitern und einige der Möglichkeiten von Jribbble erkunden möchten, empfehle ich Ihnen, die Dokumentation zu lesen erfahren Sie mehr. Gehen Sie zunächst ins Labor, laden Sie Jribbble herunter und speichern Sie es in einem neuen Stammverzeichnis namens 'js'.


Schritt 12: Verknüpfen Sie die Skripte

Das erste, was wir tun müssen, um Jribbble zum Laufen zu bringen, ist, die relevanten Skripte anzuschließen. Das Plugin ist jQuery-abhängig. Damit unser Plugin funktioniert, benötigen wir:

  • die neueste Distribution von jQuery,
  • der Jribbble-Code,
  • eine Datei namens js/jribbble.shots.js, die die Heimat aller Funktionen ist, die zum Aufrufen der Dribbble-Shots erforderlich sind.

Fügen Sie am Ende Ihrer HTML-Datei zwischen den Tags </footer> und </body> den folgenden Code hinzu:


Schritt 13: Holen Sie sich einen Schuss

Die Grundstruktur des Jribbble 'Get a Shot' Parameters ist ziemlich einfach:

Stecken Sie eine Shot-ID von Dribbble ein und die folgenden Daten werden vom Plugin erfasst:

  • Die Aufnahme selbst (400px x 300px)
  • Der Schusstitel
  • Der Spieler
  • Ansichten
  • Bemerkungen
  • Likes
  • Rebounds

Sehen wir uns die Demonstrationsfunktion auf der Jribbble-Seite an, um zu sehen, wie diese Informationen angefordert und in das DOM eingefügt werden:

Dies sollte ziemlich einfach sein, auch wenn Sie kein jQuery-Assistent sind. Was das Plugin sucht, ist ein Element mit der ID "shotById" und fügt dann die Aufnahme, Ansichten, Likes, Kommentare usw. mit dem folgenden Markup in das DOM ein:

Offensichtlich funktioniert dies nicht (wie es ist) für unser vorhandenes HTML-Markup, das wir bereits in den vorherigen Schritten erstellt haben. Um sicherzustellen, dass unsere harte Arbeit nicht zerstört wird, müssen wir unser Markup ausschlachten und einige Änderungen am Basiscode in unserer Datei js/jribbble.shots.js vornehmen.


Schritt 14: Schütteln Sie das Markup

Als erstes würde ich empfehlen, das vorhandene Markup für Inhaltselemente, das wir bereits erstellt haben, zu duplizieren und auskommentieren, um sicherzustellen, dass wir einen Referenzpunkt für die folgenden Schritte haben. Überschreiben Sie als Nächstes den nicht kommentierten HTML-Code mit dem folgenden Code:

Wie Sie sehen, haben wir das Markup in unserer Indexdatei wirklich reduziert. Wir werden jQuery dazu bringen, die Lücken im nächsten Schritt auszufüllen.


Schritt 15: Erstellen Sie eine neue Funktion

Um den Schuss aufzurufen und unser <figure>-Element mit einigen Daten zu füllen, müssen wir eine neue Funktion in unserer neu erstellten js/jribbble.shots/js-Datei erstellen. Unsere neue Funktion sieht so aus:

Wie Sie zweifellos bemerken werden, wird dieser Codeabschnitt unserem alten Markup ziemlich bekannt vorkommen. Die Funktion führt nun die folgenden Schritte aus, wenn das Dokument bereit ist:

  • Nehmen Sie die Aufnahme mit der ID '332826' von Dribbble
  • Suchen Sie nach einem Element mit der ID 'Shot1'
  • Füllen Sie den in der Aufnahme-URL von Dribbble enthaltenen Link aus
  • Bereitstellen des Bildspeicherorts in der untergeordneten <img>-Quelle
  • Erstellen Sie drei <li>-Elemente innerhalb der <ul>
  • Fügen Sie relevante <span>-Elemente ein, um die Symbole zu erstellen und Zahlen zu zählen.

Die gute Nachricht ist, dass wir keine Änderungen am CSS vornehmen müssen, da wir während des gesamten Projekts mit unseren Klassennamen vorsichtig umgegangen sind. Und damit haben wir unseren ersten vorgestellten Inhaltsgegenstand mit der Envato-Dribbble-Aufnahme mit der ID 332826 fertiggestellt.


Schritt 16: Füllen Sie die Lücken aus

Bisher haben wir nur mit einem Featured Content Item gearbeitet, obwohl wir Platzhalter-Markup für weitere fünf Featured Content Items erstellt haben. Jetzt ist es an der Zeit, die Lücken auszufüllen und dieses Design wie eine richtige Schnittstelle aussehen zu lassen! Dieser Prozess ist kinderleicht. Kopieren Sie einfach das vorgestellte Inhaltselement aus dem letzten Schritt und duplizieren Sie es fünfmal, wobei Sie die ID für jeden ändern. Dieser Teil der Datei index.html sieht wie folgt aus:

Als Nächstes müssen wir Funktionen für jedes der vorgestellten Inhaltselemente erstellen. Duplizieren Sie in Ihrer Datei js/jribbble.shots.js die Funktion aus dem letzten Schritt nach Bedarf und ändern Sie die Shot-ID und die Element-ID für jeden. Unser letztes Skript sieht wie folgt aus:

Als kurze Anmerkung: Wenn Sie sich wirklich darauf konzentrieren würden, HTTP-Anfragen auf ein Minimum zu reduzieren, könnten Sie jede dieser Funktionen problemlos in <script>-Tags in Ihrem HTML unterbringen. Ich habe mich entschieden, dies heute nicht zu tun, um die Trennung zwischen HTML und Javascript verständlicher zu machen.

Wenn Sie es genau verfolgt haben, sieht Ihr Hauptinhaltsbereich der Website wie folgt aus (verkleinert):

Gute Arbeit! Nehmen Sie sich einen Moment Zeit, um einen Kaffee zu trinken und eine Pause zu machen, bevor wir mit dem letzten Teil des Projekts beginnen... die Benutzeroberfläche reaktionsschnell zu machen.


Schritt 18: Planen Sie das Responsive Design

Da wir In-Browser entwerfen, haben wir nicht den Vorteil, auf ein Mockup für kleine Viewport-Displays zu verweisen. Bevor wir uns selbst überlegen, ist es eine gute Idee, die allgemeine Richtung der Medienanfragen zu planen und eine grundlegende responsive Infrastruktur einzurichten.

Hier sind die wichtigsten Funktionen, die unser Design bei kleineren Ansichtsfenstern haben wird:

  • Die Inhaltselemente ändern sich bei Ansichtsfenstern zwischen 480 Pixel und 767 Pixel von drei zu zwei im Durchmesser.
  • Die Inhaltselemente werden für Darstellungsbereiche <480 px (d. h. mobile Ansicht) übereinander gestapelt.
  • Die Oberflächennavigation wird unter dem Logo angezeigt und nimmt 100% der Breite des Darstellungsbereichs ein, wenn er unter 767 Pixel liegt
  • Die Ränder zwischen den Elementen werden nach Bedarf angepasst.

Wie Sie sehen, ist dies ein ziemlich einfacher Spielplan und kann in nur zwei Medienabfragen erreicht werden.

Erstellen Sie im Abschnitt Media Queries Ihres Stylesheets die folgenden beiden Media Queries:


Schritt 19: Passen Sie die Navigation an

Es gibt viele Möglichkeiten, wie wir unser Navigationsmenü in responsiven Kontexten angehen könnten, aber für heute werden wir die Dinge schnell, einfach und nicht Javascript-abhängig halten.

Fügen Sie in der ersten Medienabfrage (unter 767px), die im vorherigen Schritt erstellt wurde, den folgenden Code ein:

Dieser einfache Codeblock verschiebt die Navigation unter den Hauptheader, ändert seine Breite auf 100 % und fügt einige grundlegende Stylings hinzu.


Schritt 20: Ändern Sie das Layout der empfohlenen Inhaltselemente

In Bezug auf unseren responsiven Miniplan werden zwischen 480 Pixel und 767 Pixel die vorgestellten Inhaltselemente in zwei Breiten angezeigt und unter 480 Pixel übereinander gestapelt.

Zuerst erweitern wir unsere erste Medienabfrage, um eine zweiseitige Anzeige von Inhaltselementen zu erstellen.

Fügen Sie als Nächstes der zweiten Medienabfrage die folgenden Regeln hinzu, um Ansichtsfenster zu verwalten, die schmaler als 480 Pixel sind:


Schritt 21: Ränder und Abstände optimieren

Um unser Design zu vervollständigen, müssen wir schließlich nur einige der Ränder optimieren, um sicherzustellen, dass wir vernünftige Ränder zwischen den Elementen beibehalten.

Fügen Sie in unserer <767px-Medienabfrage die folgenden Regeln hinzu:

Und in unserer <480px-Medienabfrage gelten die folgenden Regeln:

Die Beibehaltung unserer Margen in Prozent, wann immer möglich, ermöglicht es unserer Benutzeroberfläche, bei praktisch jeder Ansichtsfenstergröße gut auszusehen, nicht nur bei einer Reihe vordefinierter Haltepunkte.

Nehmen Sie sich einen Moment Zeit, um Ihren Code zu bereinigen, stellen Sie sicher, dass alles logisch angeordnet ist, und treten Sie einen Schritt zurück und schätzen Sie all Ihre harte Arbeit. Wir sind fertig!


Abschluss

Wenn Sie dieses gesamte Tutorial durchgezogen haben, sind Sie jetzt mit einer Reihe intelligenter Techniken ausgestattet, um die Leistung Ihrer Websites zu steigern, sowie mit allen Tools, die Sie zum Kodieren von Bildern und Symbolschriftarten in base64-kodierten Daten-URIs benötigen.

Denken Sie daran, dass Daten-URIs nicht immer die beste Wahl für jede Situation sind und dass bei der Entscheidung, ob die Kodierung der Assets Ihrer Website die beste Lösung ist, Diskretion verwendet werden muss. Gut verwendet, sind Daten-URIs ein unschätzbares Werkzeug in Ihrer Webdesign-Toolbox.

Ich hoffe, Sie haben dieses Tutorial genauso genossen, wie ich es genossen habe, es Ihnen zu präsentieren!

Wie haben Sie Daten-URIs in Ihren Projekten verwendet? Hinterlassen Sie unten einen Kommentar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.