WebdesignloversTutorial | Webdesignlovers

Order by Rating like a Superhero

Webdesignlovers — Mon, 24 Oct 2011 05:37:46 +0000

Viele Websites benutzen Bewertungen, um die Wichtigkeit oder die Beliebtheit eines Artikels oder Produkts zu messen. Beliebte jQuery Plugins wie das 5 Star-Rating sind schnell und einfach integriert. Die Schwierigkeit liegt eher an der Ausgabe der Daten und dabei wollen wir helfen!

Bei unserem neusten Projekt Stokedcamps geht es darum, dass sich einerseits Surfcamps mit einem Profil präsentieren können und anderseits dass Besucher diese bewerten können. Wir haben ebenfalls das verbreitete 5 Star-Rating eingesetzt. Folgendes Problem ergibt sich:

Problem

Surfcamp 1 erhält 23 Bewertungen:
20 x 5
3 x 4
ergibt eine durchschnittliche Bewertung von 4.8

Surfcamp 2 erhält 1 Bewertung:
1 x 5
ergibt eine durchschnittle Bewertung von 5

Was läuft hier falsch?

Sortiert man nun die Surfcamps nach ihrer durchschnittlichen Bewertung wird das zweite Surfcamp besser gelistet als das erste. Rein mathematisch macht dies Sinn, allerdings ist das zweite Surfcamp aufgrund der vielen Besucher und der überdurchschnittlichen Bewertung natürlich als besser einzustufen.

Demo mit falscher Sortierung

Wir haben das ganze mal veranschaulicht mit einem Bewertungssystem für Superheroes, schaut es euch an, setzt Bewertungen und erkennt wie es sich verhält:

Wie kann das Problem gelöst werden?

Um das Problem zu lösen muss also eine Gewichtung geschaffen werden, möglichst eine organische welche sich an der Höhe der Gesamtbewertungen und der durchschnittlichen Bewertung orientiert. Wir haben gesucht und sind auf den Bayes’schen Durchschnitt gestossen. Der nach dem englischen Mathematiker Thomas Bayes benannte bayessche Wahrscheinlichkeitsbegriff interpretiert Wahrscheinlichkeit als Grad persönlicher Überzeugung. Genau das suchen wir!

Auf der Seite von The Broth haben wir folgende Formel dazu entdeckt:

bayesian = ( (avg_num_votes * avg_rating) + (this_num_votes * this_rating) ) / (avg_num_votes + this_num_votes)

Legende:

avg_num_votes: Die durchschnittle Anzahl an Bewertungen von allen Objekten die mehr als 0 Bewertungen haben
avg_rating: Die durchschnittliche Bewertung jedes Objekts (wieder alle mit mehr als 0 Bewertungen)
this_num_votes: Anzahl der Bewertungen für dieses Objekt
this_rating: Die Bewertung dieses Objekts

Wir haben also das ganze bei der Superhero-Bewertung eingebaut und Boom! Genau so wie es sein soll, die Bewertung wird aufgrund der Menge an Bewertungen und der durchschnittlichen Bewertung gemessen, wenn es viele Stimmen gibt können wir also darauf vertrauen, dass das die öffentliche Meinung vieler ist.

Demo mit Bayes’schen Bewertung

Vielen Entwicklern wird die oben erwähnte Formel reichen um das in ihre Projekte zu integrieren, wer noch eine Code-Beispiel benötigt helfen wir natürlich gerne.

PHP-Beispiel

 array ('id' => '1', 'name' => 'dark_knight', 'num_votes'   => 5, 'avg_rating' => 4.8),
'green_lantern' => array ('id' => '2', 'name' => 'green_lantern', 'num_votes' => 1, 'avg_rating' => 5  ),
'robin'         => array ('id' => '3', 'name' => 'robin', 'num_votes'         => 1, 'avg_rating' => 5  ),
'superman'      => array ('id' => '4', 'name' => 'superman', 'num_votes'      => 1, 'avg_rating' => 5  ),
'flash'         => array ('id' => '5', 'name' => 'flash', 'num_votes'         => 1, 'avg_rating' => 5  ),

);

// Loop array and count data

foreach ($superheroes as $k => $v) {
$total_votes           += $v['num_votes'];
$total_rating          += $v['avg_rating'];
$number_of_superheroes += 1;
}

// Do the math

$avg_num_votes = $total_votes/$number_of_superheroes; // Average number of votes
$avg_rating    = $total_rating/$total_votes; // Average rating for all superheroes

// Bayes it and write output

foreach ($superheroes as $k => $v) {
$karma = ( ($avg_num_votes * $avg_rating) + ($v['num_votes'] * $v['avg_rating']) ) / ($avg_num_votes + $v['num_votes']);
echo $v['name'] . ': ' . round(($karma*2*10)) . '
';
}

?>

Wie verwendet ihr dieses Beispiel?

Kopiert euch dieses PHP-Script in ein Textfile, speichert es beispielsweise unter superheroes.php und kopiert es auf den Server eures Vertrauens. Ruft das PHP im Browser auf und ihr seht die Ausgabe der Berechnung. Nun könnt ihr Werte im Array anpassen und schauen wie sich dies auf das Karma auswirkt. Das Script ist bestimmt eine gute Grundlage um die Bayes’schen Bewertung zu verstehen und anzuwenden. Als Live-Beispiel könnt ihr euch auch die Bewertungen auf Stokedcamps.com anschauen.

Habt ihr diese Bewertung auf eurer Seite integriert oder habt ihr Fragen? Meldet euch in den Kommentaren.

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

CodeIgniter rules!

Webdesignlovers — Thu, 19 Aug 2010 06:40:26 +0000

Wir lieben CodeIgniter! Das schlanke PHP Framework, welches lediglich 1.6 MB auf die Waage bringt ist ausserdordentlich gut dokumentiert und bietet mit seiner Technologie gar die Grundlage des erfolgreichen CMS Expression Engine. Wenn ihr auf PHP programmiert, objektorientiert oder nicht – wir können euch dieses Open Source Framework wirklich nur ans Herz legen. Neben der Dokumentation stehen viele Tutorials und Plugins zur Verfügung, diese möchten wir euch nachstehend vorstellen, damit ihr einen flüssigen Start in die Welt von CodeIgniter findet.

Official Links
Offizielle CodeIgniter Website
User Guide
Wiki

Offizielle Codeigniter Tutorials

Diese offiziellen CodeIgniter Video Tutorials bieten eine optimale Einführung in die Welt von CodeIgniter. Anhand von einfachen Beispielen wird das MVC Prinzip erklärt und Datenbankabfragen und Scaffolding vorgestellt.

Hello World! Introduction to CodeIgniter
Create a Blog in 20 minutes

Nettuts Codeigniter Tutorials

Nettuts haben eine imposante Serie von CodeIgniter-Tutorials ins Netz gestellt. Sie bieten eine umfassende Einführung in das Framework und gehen Stück für Stück ins Detail. Wirklich sehr empfehlenswert.

Day 1: Getting Started With the Framework
Day 2: Database Selecting Methods
Day 3: Sending Emails
Day 4: Newsletter Signup
Day 5: CRUD
Day 6: Login
Day 7: Pagination
Day 8: AJAX
Day 9: File Uploading and Image Manipulation
Day 10: The Calendar Library
Day 11: File and Directory Operations
Day 12: Shopping Cart
Day 13: Extending the Framework
Day 14: Security
Day 15: Profiling, Benchmarking & Hooks

Social Media mit Codeigniter

Elliot Haughin liebt CodeIgniter und hat bereits mehrere Anleitungen und Libraries in CodeIgniter geschrieben damit auf einfachste Weise Social Media Plattformen wie Facebook Connect, Twitter, Vimeo und Flickr integriert werden können.

Facebook Connect CodeIgniter Library
Twitter API CodeIgniter Library
Flickr CodeIgniter Library
CodeIgniter Vimeo API Library

Pynotech Codeigniter Tutorials

Pynotech ist bekannt für seine umfassenden Tutorials im Bereich CodeIgniter und Kohana. Sie bieten eine breite Palette von Themen rund um CodeIgniter.

Helpful CodeIgniter Libraries
Pagination with CodeIgniter
CodeIgniter and The HTML Base Tag
Automatically Get the Base URL for CodeIgniter
CodeIgniter: Route Everything, except these Controllers
Code Completion with Codeigniter using Netbeans
Does CodeIgniter Automatically Prevent SQL Injection?
How to Debug Queries with CodeIgniter
How to Rename when File Uploading using CodeIgniter
How To Set-Up CodeIgniter
CodeIgniter FAQ: Loading a View within a View
CodeIgniter AJAX Helper
CodeIgniter Image Manipulation Class: How to Resize
Using Mercurial to Get CodeIgniter 2.0
How To Turn Off Displaying of MySQL Errors in CodeIgniter
Multiple Applications with Codeigniter with one installation
How to put an Image in an Anchor in CodeIgniter
Add SESSIONS to Profiler in CodeIgniter
Using strings for URI Segments in CodeIgniter

99 Points Codeigniter Tutorials

99 Points bieten ebenfalls eine Vielzahl von Tutorials zu CodeIgniter mit jeweils sehr interessanten Themen, unbedingt reinschauen.

How To check Username/Email availablity using jQuery in CodeIgniter?
Upload and Convert video to FLV using FFmpeg.
Simple class to encrypt url data
How to Create Ajax Pagination using CodeIgniter?
How can We Integrate the Authorize.Net Payment Gateway in CodeIgniter?
30 Top CodeIgniter best Tutorials You must want to know.
How To: Use Re-Captcha in CodeIgniter based website?
CodeIgniter 2.0 ?? Whats Great in New version
How can We verify Captcha with Ajax in CodeIgniter?
Send Email from your Gmail account Using CodeIgniter.
MySQL, PHP, CodeIgniter, CSS and JQuery working tips.
How to Upload files in CodeIgniter. A simple way for beginner of CI
Learn CodeIgniter PHP framework: Basic working Structure
Configuring CodeIgniter framework on your localhost.

Okada Design Blog Tutorials mit Codeigniter

Auf dem Okada Design Blog erhaltet ihr ein aufwendig produziertes Tutorial wie ihr ein Portfolio CMS auf der Grundlage eines Templates programmiert, wirklich sehr gelungen, sowie einen Eventkalender der nicht nur chic aussieht, sondern auch funtkional ist.

Creating a Portofolio CMS with CodeIgniter
Create an Event calendar using Codeigniter and jQuery
jQuery Quicksand on CodeIgniter
Ajax Todo List system with CodeIgniter
Zend framework Flickr class on CodeIgniter with jquery
Zend Framework on CodeIgniter: Youtube
How to implement Zend Framework with CodeIgniter
How to delete index.php from CodeIgniter in localhost
Automatically Loaded Class/Library List of CodeIgniter
Naming conventions for CodeIgniter

@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.

WebdesignloversTutorial | Webdesignlovers

Order by Rating like a Superhero

Problem

Was läuft hier falsch?

Demo mit falscher Sortierung

Wie kann das Problem gelöst werden?

Demo mit Bayes’schen Bewertung

PHP-Beispiel

Wie verwendet ihr dieses Beispiel?

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?

CodeIgniter rules!

Offizielle Codeigniter Tutorials

Nettuts Codeigniter Tutorials

Social Media mit Codeigniter

Pynotech Codeigniter Tutorials

99 Points Codeigniter Tutorials

Okada Design Blog Tutorials mit Codeigniter

@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

jQuery – Einstieg für Anfänger

Setup

Hello jQuery

Selektoren und Events

Effekte