WebdesignloversResources | Webdesignlovers

Facebook Page Template

Webdesignlovers — Wed, 09 Mar 2011 22:17:11 +0000

Ab mitte März werden auf Facebook Pages keine FBML-Anwendungen mehr unterstützt. Das ganze wird ersetzt durch sogenannte iFrame-Anwendungen. Dies hat viele Vorteile, jedoch auch einige Nachteile. Wir haben uns das ganze mal im Detail angeschaut und bieten euch unser Template mit vielen Features zum kostenlosen Download an.

Vor- und Nachteile von Facebook iFrame-Apps

Vorteile:

HTML, CSS und JavaScript können uneingeschränkt genutzt werden. Auch Libraries wie jQuery, Mootools, etc. können problemlos eingebunden werden
Tracking-Tools wie Google Anayltics können problemlos integriert werden. IP-Adressen und Browserinformationen sind nun also auch verwertbar.
Bei den bisherigen FBML Apps konnte in Fan Pages kein Autoplay genutzt werden, was nun funktioniert (YouTube Videos, Flash Animationen, etc.)
Die Nutzung aller Social Media Plugins wird unterstützt (Comment Box, Like Button, Freunde einladen, etc.)
Cookies können beim Benutzer hinterlassen werden, beispielsweise für die Speicherung der Sprachauswahl
Facebook nimmt kein Caching mehr vor, sodass z.B. Bilder keinen Cache Breaker mehr beim Update benötigen.

Nachteile:

Für den Hobby-Facebook-Admin wird es komplizierter, da man “richtige” Website entwickeln muss
Der Traffic wird auf eigenen Servern generiert, so entstehen je nachdem Mehrkosten
Static FBML App war bisher sehr einfach und ohne Hosting einer eigenen Seite möglich
CSS Styles werden nicht mehr von Facebook übernommen, will man also konsistent mit dem Facebook Layout bleiben muss kräftig gestylt werden
Die Standard-Höhe der iFrame Tabs ist auf 800px beschränkt, will man mehr muss man einen Scrollbalken in Kauf nehmen oder sich mit Facebook Funktionen drum kümmern. Beispielsweise mit FB.Canvas.setAutoResize(); und/oder FB.Canvas.setSize({ width: x, height: y });
HTML/CSS und JS kann aus dem Quelltext des IFrames kopiert/geklaut werden.

Trotz einigen Nachteilen überwiegen die Vorteile klar. Die Möglichkeiten sind, abgesehen von der fixen breite von 520px fast unbegrenzt. Natürlich wollten wir das ganze mal testen und haben dafür eine kleine aber feine Facebook iFrame-App umgesetzt.

Das Ergebnis findet ihr hier: http://facebook.com/Webdesignlovers.

Achtung: Falls ihr “sicheres durchstöbern” über https aktiviert habt, wird die App nicht angezeigt, da wir unsere App nicht über https anbieten.

Facebook Page Template

Unser Template mit HTML, CSS, JS und allen Facebook Funktionen stellen wir euch kostenlos zur Verfügung.

Features

HTML, CSS, JS Template
Integrierte Like Buttons
Share Funktion
Invite Friends Funktion
Kommentare
Integriertes Youtube Video
Google Adsense
Google Analytics

DOWNLOAD

Das ganze wurde nur auf Firefox getestet und dient ausdrücklich zum erweitern. Ladet es euch hier herunter und gebt uns Feedback was ihr damit angestellt habt.

Wie lege ich eine iFrame-App an?

Dann gehen wir mal zum praktischen Teil. Um eine iFrame-App zu erstellen sollte als erstes die App erstellt werden. Also eine einfache Website welche dann per iFrame integriert wird. Meine Website habe ich unter http://webdesignlovers.ch/fb erstellt. Wie ihr seht, kein Rocket-Science sondern kurz und knackig umgesetz.

Zu Testzwecken könnt ihr mein Template hier herunterladen und auf eurem Server wieder hochladen. Die Files können auch später noch problemlos eurem Content und Design angepasst werden.

Wie integriere ich die iFrame-App auf meiner Facebook Page?

Das ist etwas umständlicher als bisher mit FBML. Als erstes browst ihr die Developers Seite an: http://www.facebook.com/developers/ . Erstelle dort eine neue Anwendung. Gib der App im nächsten Schritt einen Namen und stimme den AGB’s zu.

Nachfolgend kann nun ein Icon und ein Symbol definiert werden, sowie die Sprache, den Link zu AGB’s, etc. definiert werden.

Die wichtigen Einstellungen findet man im Menüpunkt “Facebook-Einbindung”. Folgendes kann dort definiert werden:

Canvasseite : Hier geben wir eine Adresse ein, über die die Anwendung später direkt aufrufbar ist.
Canvas URL : Dies ist der absolute URL zu dem Anwendungsordner auf unserem Server. In diesem Beispiel also : http://webdesignlovers.ch/fb/
Canvas-Typ : Hier muß in jedem Fall “iFrame” ausgewählt werden.
iFrame-Größe : Die iFrame Grösse soll sich automatisch anpassen. Das funktioniert nur begrenzt, jedoch helfen wir hier mit Facebook Funktionen nach.
Name des Reiters : Hier kommt der Name hinein, den man später auf der Facebookseite im linken Menü sehen wird (neben dem Icon). Man hat hier 16 Zeichen zur Beschreibung zur Verfügung.
URL des Reiters : Dies ist der Name der Datei, die die Inhalte auf unserem Server beinhaltet. In unserem Fall also : index.html

Nach dem Speichern sieht man die Anwendung nochmal im Überblick:

Nun soll diese App natürlich auf unserer Facebook Page angezeigt werden. Das geht nun ganz fix. Einfach die Anwendungs-Profilseite anklicken, dann kommt man auf die Detailseite der Applikation.

Hier kann einerseits getestet werden ob die Facebook-Funktionen korrekt funktionieren (Zur Anwendung anklicken) oder man kann die App einer Facebook Page hinzufügen mit “Zu meiner Seite hinzufügen”.

Und Boom! – das Ding läuft!

Hier der Link zu unserer App: http://facebook.com/Webdesignlovers

Achtung: Falls ihr “sicheres durchstöbern” über https aktiviert habt, wird die App nicht angezeigt, da wir unsere App nicht über https anbieten.

Facebook-Template Download

Tumblr Rumble – Kick-ass Tumblr Themes

Webdesignlovers — Wed, 05 Jan 2011 08:01:18 +0000

Tumblr ist ein echtes Leichtgewicht unter den Blogging-Plattformen. Die Einfachheit wie man Texte, Photos, Zitate, Links, Musik und Videos direkt aus dem Browser, Phone, Desktop oder per E-Mail veröffentlichen kann, lässt unser Web 2.0 Herz höher schlagen.

Der grosse Unterschied zu Plattformen wie LiveJournal oder Blogger liegt in der extremen Einfachheit. Sobald ein Benutzer etwas interessantes im Web-Dschungel entdeckt kann er lediglich auf das “Share on Tumblr” Bookmarklet klicken und schon wird das ganze getumblet. Das Resultat ist ein Webblog welcher mit wenig Zeitaufwand mit Text, Links und Multimedia gefüttert werden kann.

Die Lernkurve ist steil und der Einstieg fällt einfach, hier ein Einführungs-Video um euch den Einstieg schmackhaft zu machen:

Grossartig ist auch die grosse Auswahl an Tumblr-Themes, schnell & einfach lässt sich der Blog seinen kreativen Ansprüchen anpassen. Wir haben gesucht, gefiltert und euch eine Liste von Tumblr-Themes zusammengestellt die rocken!

@font-face Typekits

Webdesignlovers — Wed, 12 May 2010 20:19:22 +0000

Standardschriften begleiten uns seit dem Urknall des Internets. Schriften wie Arial und Helvetica sind Norm, wer auf den Putz hauen will probierts mit Verdana oder Georgia. Das ist die ernüchternde Realität beim browsen durchs Web. Kreative verwenden Bilder um andersweitige Schriften zu nutzen, dies jedoch zu lasten von Performance, Suchmaschinenfreundlichkeit und Flexibilität. So genannte Webfonts versprechen einen Ausweg aus diesem Dilemma.

@font-face

Eine neue Möglichkeit der Einbindung von Schriften ist der Einsatz spezieller Schriftdateien über Stylesheets. Theoretisch besteht diese Möglichkeit schon seit langem, aufgrund von fehlender Browserunterstützung hat sich dies jedoch nie wirklich durchgesetzt. Mit CSS3 wurde dieses Thema nun wieder neu aufgegriffen und die Sterne stehen gut, dass zukünftig eine grössere Schriftenvielfalt im Web entsteht. Welche CSS3-Properties von den gängigen Browsern unterstützt werden, könnt ihr in der Web Design Checklist von findmebyIP.com nachlesen.

EOT und WOFF

Wie bei jeder neuen Web-Technologie fehlen Standards welche von den Browsern eingehalten werden. Somit müssen zwei verschiedene Schriftformate eingebunden werden damit die Schrift korrekt in allen Browsern angezeigt wird, das EOT-Format (»Embedded Open Type«) das der Internet Explorer schon seit Version 4 unterstützt sowie das WOFF-Format für Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+.

Wie binde ich die Schriften ein?

Das Einbinden der Web-Schriften erfolgt über CSS. Aufgrund der unterschiedlichen Formate muss die Schrift zweimal eingebunden werden, damit sowohl der Internet Explorer als auch Firefox die Schrift anwenden können:

/* Internet Explorer */ @font-face { font-family: MyFont; src: url("/fonts/MyFont.eot"); }

/* Firefox, Safari, Opera */ @font-face { font-family: MyFont; src: url("/fonts/MyFont.woff") format("woff"); }

Danach kann die Schrift wie üblich im CSS verwendet werden.

body { font-family: MyFont, Arial, Verdana }

Für ältere Browser sollte, wie im oberen Beispiel, eine Alternativschrift angegeben werden, sofern das Format nicht korrekt intepretiert werden kann.

@font-face { font-family: MyFont; src: url("/fonts/MyFontItalic.woff") format("woff"); font-style: italic; }

em { font-family: MyFont, Arial font-style: italic; }

Im obigen Beispiel wird eine Italic Schrift eingebunden, welche nun wie jede andere Systemschrift verwendet werden kann, bitte beachtet, dass verschiedene Schriftstile einer Schrift nur vom WOFF-Format unterstützt werden.

ClearType

Webschriften sind für ClearType optimiert. ClearType ist erst ab Windows Vista standardmässig eingeschaltet. Wenn andere Schriftglättungsmethoden eingesetzt werden, sind die Webschriften nicht mehr optimal lesbar. Am besten die verwendet Schriften auf verschiedenen Betriebssystemen und Browser austesten, beispielsweise mit Adobe Browserlabs.

20 Fonts im EOT und WOFF Format

Wir haben euch nun nachfolgend 20 neue Schriftarten von FontSquirrel zusammengestellt, welche direkt als Webkit im EOT und WOFF Format heruntergeladen werden können. Die Schriften sind lizenzfrei und können frei verwendet werden.

Marketing Script

Preview
Download Typekit

Sansation

Preview
Download Typekit

Walkway

Preview
Download Typekit

Ubuntu-Title

Preview
Download Typekit

Monika

Preview
Download Typekit

ChunkFive

Preview
Download Typekit

PT Sans

Preview
Download Typekit

ArtBrush

Preview
Download Typekit

Ballpark

Preview
Download Typekit

NeoRetroDraw

Preview
Download Typekit

Bebas

Preview
Download Typekit

Existence Light

Preview
Download Typekit

UglyQua

Preview
Download Typekit

Creampuff

Preview
Download Typekit

Dubtronic

Preview
Download Typekit

Candela

Preview
Download Typekit

Latin Modern Roman

Preview
Download Typekit

Lilly

Preview
Download Typekit

Lacuna Regular

Preview
Download Typekit

Giant Head OT

Preview
Download Typekit

40 Kick-Ass WordPress Themes

Webdesignlovers — Wed, 17 Mar 2010 06:00:50 +0000

Wordpress ist eines der benutzerfreundlichsten, und mit rund 6.5 Millionen Downloads auch eines der meist eingesetzten CMS der Welt. Ursprünglich als Blogging CMS gedacht, kann jedoch aufgrund einer offenen API und einfach zu integrierenden Themes grundsätzlich jede Art von Website damit umgesetzt werden.

Wordpress Themes gibts wie Sand am Meer, jedoch ist es schwierig wirklich schöne und sauber programmierte Themes zu finden. Wir haben euch deshalb eine Auswahl von 40 WordPress Themes zusammengestellt welche euch umhauen und gratis zum Download zur Verfügung stehen.

Falls ihr weitere Informationen zu WordPress sucht, findet ihr diese hier.
Informationen zur Installation eines Themes findet ihr hier.

Structure Theme

WebdesignloversResources | Webdesignlovers

Facebook Page Template

Vor- und Nachteile von Facebook iFrame-Apps

Facebook Page Template

Wie lege ich eine iFrame-App an?

Wie integriere ich die iFrame-App auf meiner Facebook Page?

Tumblr Rumble – Kick-ass Tumblr Themes

langer.tumblr

Inkhorn

Pink Touch

Cmpndm

Atonement

Xtreme Minimalism

Black Diamonds

Revista

Boundless

Sarah’s Theme

Mstly

Boston Polaroid

Callisto

Chunk

Random Daze

Frontier Mustard

Cuddle Fuddle

Rockstar

Adaptation

The Fisherman’s Friend

@font-face Typekits

Marketing Script

Sansation

Walkway

Ubuntu-Title

Monika

ChunkFive

PT Sans

ArtBrush

Ballpark

NeoRetroDraw

Bebas

Existence Light

UglyQua

Creampuff

Dubtronic

Candela

Latin Modern Roman

Lilly

Lacuna Regular

Giant Head OT

40 Kick-Ass WordPress Themes

Structure Theme

Ulap Theme

Envoze Theme

Aparatus Theme

FolioGrid Theme

Hipsterist Theme

Enkelt Theme

SimpleFolio Theme

Traction Theme

The Standard Theme

Brave Zeenat Theme

Kelontong Theme

Punchcut Theme

Cumulus Theme

SimpleBlog

FreeStyle Theme

Satoshi Theme

Equilibrium Theme

BizzFolio Free

WPTypo

Magazeen Theme

Franklin Street

Bueno Theme

Inuit Type Theme

Stylissimo Theme

AppCloud Theme

SimpleCart Theme

LiveTwit Theme

BrightSky Theme

Work-A-Holic Theme

Seven Five Theme