Tag Archives: repost.it

Ein etwas anderes Bewertungssystem

Zunächst dachte ich bei repost.it an eine klassisches Sternerating. Nutzer können sich anonym und schnell zwischen meist einem und fünf Sterne entscheiden, um ihr eigenes Feedback direkt an andere Nutzer weiterzugeben. Nachdem Cookie dann aber ein zweidimensionales Bewertungssystem eingeworfen hatte, war ich sofort begeistert von der Idee. Der Ansatz ist simpel. Warum dem Nutzer nur eine Zahl in Form eines Sternes vergeben lassen, wenn man visuell auch in eine andere Richtung gehen kann ohne dabei an eine feste Zahl gebunden zu sein. Das etwas andere Bewertungssystem war geboren!

Das repost.it Bewertungssystem sollte alle Anforderungen eines klassischen (Sterne-)Bewertungssystems erfüllen. Darunter Anonymität, Einfachheit und Sicherheit bei der Bewertung. So entschieden wir uns für ein klassisches Dreieck, welches die Reposts für eine Bewertung in sprichwörtlich alles Richtungen abdeckt. Man sollte nicht nur über “Gut” und “Schlecht” entscheiden können, sondern ob es eventuell einfach zu “Normal” ist und zwar rein visuell ohne eine Note zu vergeben. Auch technisch war ein schneller Weg gefunden dies umzusetzen. Die JQuery Bibliothek lieferte sämtliche Funktionalitäten, die benötigt wurden. Man musste diese lediglich kombinieren. Im Hintergrund nimmt eine Datenbank jedes Rating seperat für jedes Reposting auf, wobei über eine PHP-Funktion die Mehrfacheingabe unterbunden und die X- und Y-Koordinaten weitergegeben wurden.

Lediglich der Platzbedarf des Dreiecks ist höher als bei einer Sternebewertung, auch konnte ich bisher technisch nicht den Knopf zur Bewertung umgehen und die Bewertung direkt auf der Hauptseite war sehr verbuggt… Beides sollte aber sowohl designtechnisch, als auch technisch noch möglich sein. Ihr könnt aber bereits jetzt schon das Bewertungssystem testen, welches bisher als am Interessantesten hervorgehoben wurde. Das freut uns natürlich sehr, weil doch einiges an Arbeit drin steckt und uns euer Feedback besonders wichtig ist – egal über eine Bewertung oder direkt per Mail, etc. :)

Posted in Theory-O-Matic. Tagged with .

Was war. was wird: repost.it

Kurz vor dem Release bleibt immer ein klein wenig Zeit darüber zu resümieren was bereits vorhanden ist und was alles noch geplant ist. Und dies lässt sich immer schön in Listenform präsentieren.

Was wird also zum Release von repost.it bereits alles verfügbar sein:

  • Scrollen was die Datenbank hergibt. Endloses Scrollen auf allen Seiten mit Reposts wurden erfolgreich implementiert. Hierzu gibt es auch ein Artikel im Blog.
  • Die Registrierung ist so einfach wie möglich und kommt lediglich mit einem Minimum an Informationen aus.
  • Unter “Repostastic” findest du momentan alles was es über das Mittelmass geschafft hat (noch unabhängig der Anzahl an Bewertungen)
  • Auf “Neu” dagegen findest du dagegen zeitlich absteigend sortiert alle Reposts.
  • Unter “Upload” kann jeder Benutzer eigene Reposts einstellen, sowohl anonym als auch registriert. Dazu braucht man nur ein Link zum Bild und einen Titel. Idealerweise auch gleich einen Link zum Anbieter für eine Bestellung. Die Kommentarfunktion ist momentan nur registrierten Benutzer vorbehalten. Zudem müssen anonyme Benutzer bis zu 15 Minuten warten bevor sie einen neuen Repost einstellen können.
  • Jeder Repost hat eine Detailansicht, erreichbar über das Produktbild. Hier kann jeder seine Stimme abgeben, den Repost liken, plusen oder tweeten oder registrierte Benutzer auch Kommentare hinzufügen.
  • Zusätzlich hat jeder registrierte Benutzer eine Profilseite mit einer kurzen Info zu seiner Person und darunter alle bisherigen Reposts.
  • Zuletzt noch eine “Bug/FAQ” Seite, welche gerade auch zu Beginn jeden Benutzer die Möglichkeit gibt Bugs zu melden.

Soweit zu den Features, die es bereits mit Release gibt. Nun zu dem was noch geplant ist:

  • Reposts, Reposts und Reposts uploaden. Zumindestens werde ich weiterhin versuchen so viel wie möglich Produkte täglich uploaden, um die Datenbank zu füllen ;)
  • Kritische Bugs so schnell wie möglich ausbessern.
  • Benutzer sollen ein eigenes Profilbild einstellen können.
  • Die Anbieter können kommentiert und bewertet werden.
  • Eine Smartphonetaugliche Webseite bzw. dann später auch eine eigene App für iPhone und Androids. Darüber soll es möglich sein mit der Kamera on-the-fly neue Reposts upzuloaden.

Und natürlich alle weiteren Ideen in naher Zukunft, die uns einfallen bzw. wir eventuell auch als Feedback erhalten.

Posted in News-O-Matic. Tagged with .

repost.it Release

Science-O-Matics freut sich über den Release von repost.it am 24.02.2018

Posted in News-O-Matic. Tagged with , .

JavaScript debuggen

Man mag nicht viel vom Internet Explorer halten, aber momentan ist mein liebster Browser zum Debuggen. In der neusten Version findet man bei dem Zahnrad die “Internetoptionen”, “Erweitert” und “Browsen” folgende drei Checkboxen:

  • “Sktipdebugging deaktivieren (Andere)”,
  • “Skriptdebugging deaktivieren (Internet Explorer)” und
  • “Skriptfehler anzeigen”.

Deaktiviert man die ersten beiden Checkboxen und aktiviert die letzte Checkbox, dann meldet der Internet Explorer sofort Skriptfehler und bietet ein Debugging an.

Posted in Code-O-Matic. Tagged with .

How-To: Endloses Scrollen mit jQuery

Da es nur sehr wenige How-Tos im Internet gibt, welche mal eine funktionierende Variante des endloses Scrollen zeigen, bietet sich hierzu ein Tutorial geradezu an. Basierend auf http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/ habe ich eine modifizierte Variante geschrieben, welche beim Scrollen einen DIV-Container an die Seite anfügt.

Zunächst benötigt man in jedem Fall die jQuery Library, welche man direkt unter der jQuery Homepage stets in einer aktuellen Version herunterladen kann.

Vorbereitungen für die Webseite. Einerseits zunächst das Einbinden der Library in den Header. Anschließend fügen wir folgenden Codeblock ein (ebenfalls JavaScript)

var n = 9;

function pageLoad() {
	$.ajax({
		url: "getReposts.php?n="+n,
		success: function(data){
					if(data){
						var html = $.parseJSON(data);
						$("#contentwrap").append(html);
					}
				}
	});
}

Und noch folgenden Aufruf in den BODY-Tag der Webseite.

onLoad="pageLoad();"

Beim Laden der Seite wird zunächste der Content initialisiert, welcher anfangs zu sehen ist. Dies geschieht mittels Ajax-Aufruf der PHP-Datei “getReposts.php” dessen zurückgegebener Inhalt an das DIV “contentwrap” hinzugefügt wird. Nun ein Blick in die PHP-Datei

$n = $_GET["n"];
	$response = ""; 

	$page_idx = ( $n / 9 ) - 1 ;
	$from = $page_idx * 10;
	$to = 9;

	$query = "SELECT * FROM repost as A ORDER BY date DESC LIMIT ".$from.", ".$to;						
	$result = $mysql->query($query);

	while($row = mysqli_fetch_assoc($result)){										
		$response = $response . '

‘; } $mysql->close(); die(json_encode(utf8_encode($response))); exit;

Im Prinzip ist das PHP ganz simpel aufgebaut. Wir bekommen den zuvor definierten Wert “n = 9″ an die PHP-Datei übergeben. Diese verwenden wir, aufbereitet, für eine “FROM…TO”-Bedingung an die Datenbank. Die Antwort fügen wir in einem LOOP-Befehl an den $response-String. Am Ende übergeben wir den String im JSON-Format. Dies ist genau der Teil, welcher per Append-Befehl an das DIV “contentwrap” gehängt wird. So hätte wir die ersten neun Tabelleneinträge als initialien Inhalt beim Seitenaufruf. Nun zum “nachfüllen” auf der eigentlichen Webseite

$(window).scroll(function(){		
	if($(window).scrollTop() == $(document).height() - $(window).height()){
		n += 9;
		$('div#loadmore').show();
		$.ajax({
			url: "getReposts.php?n="+n,
			success: function(data){
						if(data){
							var html = $.parseJSON(data);
							$("#contentwrap").append(html);
							$('div#loadmore').hide();
						} else {
							$('div#loadmore').html('

No more posts to show.

');
						}
					}
		});
	}
});

Sobald wir das untere Ende erreicht haben (nach dem neunten Container) wird dieses JavaScript ausgelöst. Es erhöht die Variable “n=9″ um weitere 9 und sendet die gleiche Anfrage erneut an die PHP-Datei. Die PHP-Datei führt genau den gleichen SELECT aus, aber dieses mal mit der entsprechenden “FROM…TO”-Bedingung für die nachfolgenden 9 Einträge. Und das war es auch schon. Das DIV “loadmore” etc. wurde aus der zu Anfang genannten Quelle übernommen.

Posted in Code-O-Matic. Tagged with , .