7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Entwerfen und codieren Sie eine integrierte Facebook-App: HTML + CSS

Scroll to top
Read Time: 13 mins
This post is part of a series called Design and Code an Integrated Facebook App.
Design and Code an Integrated Facebook App: Theory
Design and Code an Integrated Facebook App: PHP + jQuery

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Willkommen zurück! In diesem Teil des Tutorials werden wir unser Design in HTML codieren und einige der CSS-Stileigenschaften von Facebook veranschaulichen, die ihm das native Gefühl verleihen. Also bleiben Sie bei mir, machen Sie Ihnen eine Tasse Tee und fröhliches Codieren!


Einführung

Willkommen zu Teil 2 unseres Entwurfs und Codes einer nativen Facebook-App. Im letzten Artikel haben wir einen Blick hinter die Kulissen einiger Denkprozesse geworfen, die mit der Erstellung einer nativen Facebook-App verbunden sind. Obwohl wir in Photoshop nicht sehr detailliert auf das eigentliche Design eingegangen sind; Wir haben besprochen, wie die Designprinzipien von Facebook Ihnen beim Entwerfen Ihrer App helfen können. In meinem Beispiel habe ich das webdesigntuts+ -Blog als Facebook-App neu erstellt. Ich gehe davon aus, dass Sie sich in Photoshop alle so wohl fühlen, dass Sie es entweder repliziert oder angepasst haben, um Ihr eigenes natives Erscheinungsbild zu erstellen.

Was wir erschaffen werden

Design and Code an Integrated Facebook AppDesign and Code an Integrated Facebook AppDesign and Code an Integrated Facebook App

In diesem Teil des Tutorials werden wir dieses Design in HTML codieren und einige der CSS-Stileigenschaften von Facebook veranschaulichen, die ihm das native Gefühl verleihen. Also bleiben Sie bei mir, machen Ihnen eine Tasse Tee und fröhliches Codieren!


Schritt 1: Wenn Sie sich nicht vorbereiten, bereiten Sie sich auf den Fehler vor

Es ist immer eine gute Idee, mit etwas Vorausplanung zu beginnen. Einige von Ihnen möchten Ihr Layout in Photoshop entwerfen, während einige von Ihnen, die sicher genug sind, direkt vom Drahtmodell in das HTML/CSS-Markup springen möchten. Persönlich mag ich es immer, zuerst das zu erstellen, was ich in Photoshop codieren werde, da es mir eine starke visuelle Vorstellung davon gibt, was ich codieren. Es kann auch in Zukunft nützlich sein, wenn Sie Ihre App aktualisieren möchten. Es kann viel einfacher sein, Dinge in Photoshop anzuordnen und zu konzipieren, als in Ihrem Code-Editor.

Manchmal drucke ich auch gerne mein Drahtmodell aus und markiere die Abmessungen mit einem Stift. Dies erleichtert auch das Leben, wenn ich Dinge codiere. Ich bin mir sicher, dass Sie im Laufe der Zeit Ihre eigenen Methoden und Methoden entwickeln werden. Ein Teil davon besteht darin, den besten Weg zu finden, der zu Ihnen passt.


Schritt 2: App-Struktur

Facebook app folder structureFacebook app folder structureFacebook app folder structure

Ich habe meinen Ordner wie folgt strukturiert (und dies ist so ziemlich meine Standardmethode, um Dinge für jedes Projekt einzurichten). Sie können sich viel Zeit sparen, indem Sie einfach diese leere Ordnervorlage auf Ihrer Festplatte erstellen und jedes Mal kopieren, wenn Sie ein neues Projekt erstellen

  • css
  • js
  • images
  • index.html

Schritt 3: HTML-Markup

Einrichten unserer Includes

Für dieses Projekt habe ich den HTML5-Doctype verwendet, den die meisten von Ihnen meiner Meinung nach inzwischen hätten ausprobieren sollen. Für meinen CSS-Reset habe ich einen Link zum Yahoo-CSS-Reset aus der YUI-Bibliothek erstellt. Wenn Sie mit einem CSS-Reset nicht vertraut sind, kann es in seiner grundlegendsten Form wie folgt beschrieben werden:

ein Stylesheet zur Reduzierung von Browser-Inkonsistenzen in Bezug auf Standardzeilenhöhen, Ränder und Schriftgrößen von Überschriften usw.

Ich werde in diesem Tutorial nicht zu sehr ins Detail gehen, aber weitere Informationen hierzu finden Sie im Abschnitt weiter unten.

Nach dem Zurücksetzen habe ich dann eine Verknüpfung zu meiner eigenen CSS-Datei hergestellt, die ich 'style.css' genannt habe. Ich habe dann das neueste Include von jQuery und ein Include zu meiner eigenen Javascript-Datei gefolgt, die ich 'myjava.js' genannt habe. (obwohl wir diese Datei im nächsten Teil des Tutorials erstellen werden). Mit dieser Datei können wir unsere Filtersuche durchführen und den Inhalt unserer Seitenregisterkarten ändern

Einrichten unserer Seite

Beim Erstellen der HTML-Version unserer Facebook-App möchte ich alles in einen Wrapper mit einer Breite von 760px packen. Dies dient nur dazu, sicherzustellen, dass ich innerhalb von 760px bleibe. Die Breite der Leinwand, auf der Facebook Ihrer App Platz bietet. Dann entferne ich diesen Wrapper und das CSS dafür, bevor ich ihn in Facebook einfüge.

Sobald wir unsere Includes und 'Wrapper' eingerichtet haben, ist es Zeit, zu den Hauptbausteinen unserer App überzugehen. In diesem Beispiel ist es relativ einfach, da wir nur die Divs 'maincontent' und 'sidebar' haben. Hierzu wenden wir gleichnamige Klassen an. Wenn Sie möchten, können Sie 'id' anstelle von 'classes' verwenden, da diese div-Instanzen nicht wiederholt werden. Was ich jedoch immer wähle (obwohl ich sicher bin, dass einige anderer Meinung sind), ist die Verwendung von Klassen für die meisten Elemente. Ich benutze selten Ausweise. Ich finde, dass es mir dadurch einfach bleibt. Ich muss mich nie fragen, ob ich etwas mit einem "id" oder einer "class" versehen habe. Das kann besonders nützlich sein, wenn Sie anfangen, jQuery in Ihre Apps zu integrieren. Überlegen Sie jedoch, ob es machbar ist, bevor Sie mit dem Codieren beginnen, dass Sie auf keinen Fall irgendwo IDs verwenden müssen.

Es ist auch ratsam, Ihre Markup-Blöcke immer mit einem abschließenden Kommentar zu beenden, der angibt, welcher Teil des Markups abgeschlossen ist. Auf diese Weise wissen Sie, wo jeder Abschnitt endet. Ich muss zugeben, dass ich diese Technik ziemlich spät übernommen habe, und im Nachhinein hätte ich mir viele Stunden sparen können, wenn ich mich durch jede Menge Code waten musste, um herauszufinden, wo bestimmte Blöcke beginnen und enden.


Schritt 4: Hauptinhalt

Facebook app main contentFacebook app main contentFacebook app main content

Für diese App hielt ich es nicht für notwendig, einen Header zu verwenden, um nur das Logo zu speichern, also habe ich dies oben in der Div 'Hauptinhalt' in eine eigene Div mit einer Klasse namens 'logo' eingefügt. Darauf folgt eine ungeordnete Liste für die Registerkarten. Ich habe den Registerkarten den Klassennamen gegeben. Ja, Sie haben es erraten "tabs". Diese dienen als Registerkarten-Menüleiste, in der die verschiedenen Seiten unserer Blog-App angezeigt werden.

Die Seiten unserer Blog-App sind in einen div-Container eingeschlossen, dem ich die Klasse "tab_container" gegeben habe. Darin habe ich dann vier Divs (eine für jede Registerkarte/Seite). Ich habe allen vier eine Klasse namens 'tab_content' gegeben, wobei jede eine eigene Klasse für ihre Position innerhalb der Seite hat. Die erste Registerkarte enthält eine zusätzliche Klasse von "tab1", die zweite "tab2", die dritte "tab3" usw. Diese einzelnen Klassennamen werden verwendet, um die einzelnen Registerkarten im nächsten Teil des Lernprogramms bei der Implementierung von jQuery zu identifizieren.


Schritt 5: Einzelne Blog-Beiträge

webdesigntuts Facebook app blog postswebdesigntuts Facebook app blog postswebdesigntuts Facebook app blog posts

Der einzelne Blog-Beitrag hat eine Klasse mit dem Titel "post" und befindet sich im div mit der Klasse "tab1", da sich diese Registerkarte auf der Standard-Landingpage befindet. Dieses enthält dann mehrere Anker- und Span-Tags, mit denen wir Elemente wie das Datum und den Blog-Autor im nativen Blau a la Facebook stylen können. Sobald dieses 'post'-Div abgeschlossen ist, können wir es einfach kopieren und für den Rest der Posts einfügen. Gehen Sie nicht über Bord und verstopfen Sie Ihren Code. Halten Sie ihn auf drei oder vier, da dies uns eine Vorstellung davon gibt, wie er aussehen und sich anfühlen wird. Ich habe auch eine Spanne mit der Klasse 'line' erstellt, die einfach eine horizontale Linie ist, die wir in der gesamten App verwenden werden.


Schritt 6: Andere Seitenregisterkarten

webdesigntuts Facebook app tabbed pageswebdesigntuts Facebook app tabbed pageswebdesigntuts Facebook app tabbed pages

Unsere anderen Seitenregisterkarten bestehen hauptsächlich aus h3, anchor und paragraph-Tags:


Schritt 7: Der Suchfilter

webdesigntuts Facebook app filter searchwebdesigntuts Facebook app filter searchwebdesigntuts Facebook app filter search

Oben in der Seitenleiste haben wir unsere Site-Filter-Suche - diese besteht aus einem einfachen Formular. Wir werden dies im nächsten Teil des Tutorials mit jQuery betriebsbereit machen. Auf das Formular folgt dann eine weitere horizontale Linie sowie ein Span- und Absatztext, um die Anzahl unserer Likes anzuzeigen.


Schritt 8: Facebook Like und Button

Zum Glück hat Facebook es sehr einfach gemacht, einen Like-Button in unsere App zu integrieren. Sie können den Code für Ihren eigenen Like-Button oder eines der anderen sozialen Plug-Ins bei Facebook Developer Plugins generieren. Sobald Sie den Code generiert haben, bringen Sie ihn in Ihr HTML. Möglicherweise möchten Sie CSS hinzufügen, um es zu positionieren. In diesem Fall ist dies jedoch nicht erforderlich


Schritt 9: Registerkartenüberschriften

Wenn Sie den ersten Teil dieses Tutorials gelesen haben (wenn Sie es bis hierher geschafft haben, haben Sie es vermutlich geschafft), haben Sie mich über Wiederverwendbarkeit sprechen hören. Diese Registerkartenüberschriften definieren dies mehr als jeder andere Teil unseres Codes. Wie bei Facebook können wir diese Tab-Header wiederverwenden und problemlos implementieren. Sie sind sehr praktisch, wenn Sie der Site einen kurzen zusätzlichen Abschnitt hinzufügen möchten.


Schritt 10: Das CSS

Jetzt ist es Zeit, sich mit dem Styling unseres HTML zu befassen. Aufgrund des einfachen Stils von Facebook gibt es nicht zu viel CSS. Ich habe es in Teile zerlegt, damit Sie es sich ansehen können. In diesem Stadium ist es auch wichtig darauf hinzuweisen, dass Facebook beim Testen und Optimieren Ihres CSS beim Zwischenspeichern ärgerlich sein kann. Wenn Sie also eine neue Version Ihres Stylesheets hochladen, wird die alte Version immer noch gerendert. Obwohl nicht perfekt; Die Problemumgehung, die ich verwendet habe, bestand darin, '?version =1' am Ende des enthaltenen Stylesheets in der Indexdatei hinzuzufügen. Jedes Mal, wenn Sie das CSS aktualisieren und hochladen, müssen Sie auch die Versionsnummer in der Indexdatei aktualisieren.


Schritt 11: Setup

Wir starten das CSS, indem wir den Wrapper und einige Klassen erstellen, die ich immer hinzufüge, um Elemente nach links oder rechts schweben zu können.


Schritt 12: Bausteine

Die Bausteine für unseren Hauptinhalt lauten wie folgt:


Schritt 13: Typografie

Wahrscheinlich einer der wichtigsten CSS-Teile unserer Facebook-App. Wenn Sie dies falsch verstehen, wird der native Effekt Ihrer App beeinträchtigt. Schauen Sie sich bei Facebook um und wählen Sie die für Ihre Anforderungen am besten geeigneten Schriftgrößen.


Schritt 14: Registerkarten


Schritt 15: Tasten

webdesigntuts Facebook app buttonswebdesigntuts Facebook app buttonswebdesigntuts Facebook app buttons

Ein weiterer wesentlicher Bestandteil des CSS für Facebook-Apps sind die Schaltflächen. Ich bin sicher, dass Sie einige davon für Ihre Apps verwenden möchten. Wir haben diese nicht mit einer Schaltfläche erstellt, sondern mit einem Ankertag mit einer darin enthaltenen Span-Klasse für das Bild.


Schritt 16: Zusätzliche Komponenten


Abschluss...

Da haben wir es also, wir haben jetzt unsere Facebook-App in HTML/CSS codiert. Ich hoffe, Ihnen hat das Lesen dieses Teils des Tutorials gefallen und Sie haben jetzt ein gutes Verständnis dafür, wie die Stile von Facebook in CSS übersetzt werden können. Wenn wir uns einige der CSS-Eigenschaften von Facebook ansehen und verwenden, können wir wirklich verstehen, wie nur ein paar Codezeilen an den richtigen Stellen unserer App das native Erscheinungsbild verleihen können, das sich bequem in Facebook einfügt und den Designprinzipien von Facebook entspricht.

Im nächsten Teil des Tutorials lernen wir, wie man dies in Facebook implementiert, um eine native Blog-App zu sein. Wir werden dies mit YQL und der Facebook Graph API tun. Ich werde Ihnen auch ein paar Tipps und Tricks zeigen, wie Sie Ihre App mit süßer jQuery-Güte aufpeppen können. Also bis zum nächsten Teil, viel Spaß beim Codieren!


Weitere Links & Ressourcen

  • Design and Code An Integrated Facebook App - Theory
  • Eric Meyer's CSS reset
  • Facebook social plugins
  • Our Webdesigntuts+ app on Facebook
  • 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.