0

SoccerDash – Fußballstatistiken in C# mit REST und JSON

SoccerDashboard - FußballstatistikenIm heutigen Artikel soll es darum gehen, wie man mittels C# eine REST-API abruft und JSON deserialisiert. Hierzu schreiben wir ein kleines Programm in C#, welches Daten von einem Fußball-Statistik-Webservice per API abruft. Wer direkt loslegen will, überspringt den folgenden Prolog. Wer einen stimmigen Einstieg in das Thema sucht, liest ihn.

Prolog

In den letzten beiden Jahren habe ich bezüglich meines Fußballkonsums eine 180-Grad-Wende hingelegt. Habe ich früher, abgesehen vom selbst spielen und den WM-Spielen, so ziemlich alles rund um Fußball gemieden, so schaue ich mir heute jedes Heimspiel der Fortuna in der Esprit-Arena an.

Und wenn einen das Fußball-Fieber erst einmal gepackt hat, dann sind Tipp-Spiele im Freundes- und Kollegenkreis und der Exkurs richtig Sportwetten nicht mehr fern. Doch wenn es um das richtige Tippen geht, scheiden sich die Geister. Von Bauchgefühl bis hin zur “jahrelangen Erfahrung” gibt es diverse Ansätze zur Festlegung der Tipps. Ich, als Informatiker, vertraue da dann doch lieber Zahlen, Fakten und Statistiken, sodass ich kurzerhand Ausschau nach einer kostenlosen Fußballdaten-API gehalten habe, die mir die passende Datengrundlage zur Entscheidungsfindung bereitstellt.

Um die API herum soll im Rahmen dieses Artikels eine kleine C#-Anwendung entstehen, die Statistiken zu einzelnen Mannschaften diverser Ligen anzeigen kann. Wer den Artikel bis zum Ende durcharbeitet, hat danach eine gute Basis, das passende Handwerkszeug und die nötigen Informationen, um weitere Auswertungen wie z.B. Spielstands-Historien verschiedener Gegner zu visualisieren.

Die football-data.org-API

football-data.org API-ÜbersichtBevor wir mit dem eigentlichen Programm anfangen, noch ein paar Worte zu der verwendeten API. Die Programmierschnittstelle von football-data.org ist eine der wenigen APIs, die Daten rund um diverse Fußballligen kostenlos zur Verfügung stellt und nahezu die einzige kostenlose API, deren Datenbestand auch wirklich aktuell ist.

Die Funktionen der API sind relativ übersichtlich und umfassen das Listing aller verfügbaren Ligen, Informationen über die Vereine der Ligen sowie die jeweiligen Spieler der Vereine. Weiter lassen sich einzelne Spielergebnisse bzw. auch alle Spielergebnisse eines Vereins in einer Saison ausgeben.

Zwar ist die API kostenlos und ohne Anmeldung nutzbar, jedoch ist in dieser Variante die Zahl der Zugriffe auf 50 pro Tag begrenzt. Das reicht um einmal reinzuschnuppern, aber nicht um ernsthaft damit zu arbeiten. Deshalb solltet ihr euch, bevor es mit der Programmierung losgeht, einen API-Schlüssel organisieren. Dieser ist ebenfalls kostenlos und innerhalb weniger Minuten registriert. Mittels des Schlüssels wird das API-Limit von 50 Zugriffen/Tag auf 50 Zugriffe/Minute angehoben.

Referenzen und Design

Ist der API-Schlüssel vorhanden, kann es losgehen. Für diesen Artikel öffnen wir das Visual Studio und legen eine C#-WinForms-Anwendung an. (Ich habe die Anwendung SoccerDashboard genannt.)

Um die Arbeit mit der REST-API zu erleichtern, nutzen wir die kostenlose RestSharp-Library. Neben dem eigentlichen Handling der HTTP-Requests verfügt diese zudem über einen integrierten JSON-Deserializer.

Die Installation der Library erfolgt per Nuget. Der Befehl für die Nuget-Konsole lautet:

Install-Package RestSharp

Ist die Bibliothek eingebunden, wechseln wir in den Form-Designer und fügen die Controls hinzu, welche wir für unsere Applikation benötigen. Hierzu nehmen wir zwei ListViews (eines für die Saison-Auswahl, eines für die Mannschaften) und eine RichTextBox in der wir die Informationen zu den Mannschaften anzeigen. Die Controls habe ich für unser Beispiel wie folgt benannt: listViewSeasons, listViewTeams, richTextBoxInformation.

SoccerDashboard - Layout-DesignDie Anordnung der Controls kann dem nebenstehenden Screenshot entnommen werden. Sind die Controls hinzugefügt, markieren wir die beiden ListViews und setzen im Einstellungsdialog folgende Settings:

  • Enabled = False
  • MultiSelect = True
  • View = List

Anschließend legen wir für das Form den Form_Load-Eventhandler und für die ListViews jeweils einen DoubleClick-Eventhandler an. Dies kann entweder über den “Ereignisse”-Dialog oder direkt per Coding geschehen.

Ermitteln der Fußball-Saisons per REST-Abfrage

Bevor wir die Eventhandler ausprogrammieren, fügen wir im Kopf der Form.cs-Datei noch die using-Anweisung für die RestSharp-Bibliothek ein.

using RestSharp;

Danach legen wir direkt im Kopf der Form-Klasse einen string mit dem API-Key an, da wir diesen an verschiedenen Stellen im Coding benötigen werden.

public partial class Form1 : Form
{
    const string apiKey = "29799fc09ba947ae890711*********";

    //[...] weiterer Code...
}

Jetzt geht es an die Ausprogrammierung der Eventhandler. Zu Beginn nehmen wir uns die Form_Load-Methode vor. Nachfolgend seht ihr den gesamten Quelltext der Methode. In den einzelnen Zeilen habe ich dem Code Kommentare angefügt, sodass dessen Funktionsweise verständlich sein sollte. (Wenn dennoch Fragen aufkommen, schreibt mir einen Kommentar unter den Artikel.)

private void Form1_Load(object sender, EventArgs e)
{
    //Initialisierung des RestClients mit der Basis-Url der API
    var rClient = new RestClient("http://api.football-data.org");

    //Erstellung eines Requests auf die Ressource/URI mit den Spielsaison & Ligen
    var rRequest = new RestRequest("alpha/soccerseasons", Method.GET);

    //Hinzufügen des "X-Auth-Token"-Headers um den vollen API-Zugriff zu erlangen
    rRequest.AddHeader("X-Auth-Token", apiKey);

    //Asynchrones abfragen der API mit gleichzeitigem deserialisieren der JSON-Response
    rClient.ExecuteAsync<List<Season>>(rRequest, response =>
    {
        //Iterieren über alle Saesons
        response.Data.ForEach(season =>
        {
            //Erstellung eines neuen ListView-Eintrags mit dem Saison-Titel
            ListViewItem lvi = new ListViewItem(season.caption);
            //Hinterlegung der Mannschaften-URI am ListView-Eintrag
            lvi.Tag = season._links.teams.href;
            //Hinzufügen des ListView-Eintrags
            listViewSeasons.BeginInvoke((Action)delegate { listViewSeasons.Items.Add(lvi); });
        });
        //Aktivierung des ListViews
        listViewSeasons.BeginInvoke((Action)delegate { listViewSeasons.Enabled = true; });
    });
}

In der Form_Load-Methode wird also das erste ListView mit einer Liste, aller über die API verfügbaren Seasons/Ligen, befüllt.

C#-Klassen aus JSON-Objekten erstellen

Wer den obigen Quelltext aufmerksam gelesen hat, wird feststellen, dass bei der REST-Abfrage eine Liste vom Typ Season verwendet wird. Diese Klasse ist jedoch kein Bestandteil des Frameworks, sondern eine Abbildung der Seasons-Datenstruktur der API. Sie wird im Befehl angegeben, damit RestSharp weiß, in welches Format die JSON-Daten deserialisiert werden sollen.

Wer wie ich, ungerne leere Klassen von Hand nach vorgegebener Datenstruktur abtippt, kann z.B. das kostenlose json2csharp-Tool nutzen, welches aus bestehendem JSON-Code die passenden C#-Klassen generiert.

Da wir in diesem Artikel mehrere Funktionen der API-Nutzen, die teilweise gleichnamige JSON-Objekte enthalten, die wiederum verschiedene Inhalte haben und man deshalb dennoch ein wenig Hand anlegen muss, habe ich euch die Klassen nachfolgend einmal kopiert.

/**************************************************
    * Nachfolgend stehen die Klassen, die zur        *
    * Deserialisierung der JSON-Responses nötig sind *
    **************************************************/
public class Self
{
    public string href { get; set; }
}

public class Teams
{
    public string href { get; set; }
}

public class Fixtures
{
    public string href { get; set; }
}

public class LeagueTable
{
    public string href { get; set; }
}

public class Links
{
    public Self self { get; set; }
    public Teams teams { get; set; }
    public Fixtures fixtures { get; set; }
    public LeagueTable leagueTable { get; set; }
}

public class SeasonsList
{
    public List<Season> Seasons { get; set; }
}

public class Season
{
    public Links _links { get; set; }
    public string caption { get; set; }
    public string league { get; set; }
    public string year { get; set; }
    public int numberOfTeams { get; set; }
    public int numberOfGames { get; set; }
    public string lastUpdated { get; set; }
}

public class Link
{
    public string self { get; set; }
    public string soccerseason { get; set; }
}

public class Players
{
    public string href { get; set; }
}

public class LinksTeam
{
    public Self self { get; set; }
    public Fixtures fixtures { get; set; }
    public Players players { get; set; }
}

public class Team
{
    public LinksTeam _links { get; set; }
    public string name { get; set; }
    public string code { get; set; }
    public string shortName { get; set; }
    public string squadMarketValue { get; set; }
    public string crestUrl { get; set; }
}

public class TeamList
{
    public List<Link> _links { get; set; }
    public int count { get; set; }
    public List<Team> teams { get; set; }
}

public class TeamLink
{
    public string href { get; set; }
}

public class Self2
{
    public string href { get; set; }
}

public class Soccerseason
{
    public string href { get; set; }
}

public class HomeTeam
{
    public string href { get; set; }
}

public class AwayTeam
{
    public string href { get; set; }
}

public class Links2
{
    public Self2 self { get; set; }
    public Soccerseason soccerseason { get; set; }
    public HomeTeam homeTeam { get; set; }
    public AwayTeam awayTeam { get; set; }
}

public class Result
{
    public int goalsHomeTeam { get; set; }
    public int goalsAwayTeam { get; set; }
}

public class Fixture
{
    public Links2 _links { get; set; }
    public string date { get; set; }
    public string status { get; set; }
    public int matchday { get; set; }
    public string homeTeamName { get; set; }
    public string awayTeamName { get; set; }
    public Result result { get; set; }
}

public class FixtureList
{
    public TeamLink _links { get; set; }
    public int count { get; set; }
    public List<Fixture> fixtures { get; set; }
}

Fügt diese Klassen am Ende des Namespace-Blocks (aber außerhalb der Form-Klasse) in eurer Form.cs-Datei ein.

Mannschaften einer Saison anzeigen

Im nächsten Schritt nehmen wir uns den DoubleClick-Eventhandler des ersten ListViews vor. Dieser löst aus, wenn ein Doppelklick auf die Liste (idealerweise auf ein Listenelement) erfolgt. Bei Auslösen des Events sollen alle zur Saison zugehörigen Mannschaften in das zweite ListView geladen werden. Der Code hierfür sieht wie folgt aus:

private void listViewSeasons_DoubleClick(object sender, EventArgs e)
{
    //Sicherstellen, dass der Doppelklick auf einen Eintrag getätigt wurde
    if (listViewSeasons.SelectedItems.Count > 0)
    {
        //Auslesen der Mannschaften-URI aus dem Tag des geklickten Eintrags
        var teamUrl = listViewSeasons.SelectedItems[0].Tag.ToString().Replace("http://api.football-data.org/","");

        //Erstellung des Clients, des Requests und des Auth-Headers wie im Load-Event
        var rClient = new RestClient("http://api.football-data.org");
        var rRequest = new RestRequest(teamUrl, Method.GET);
        rRequest.AddHeader("X-Auth-Token", apiKey);

        //Asynchrone Abfrage der Mannschaften der gewählten Saison inkl. Deserialisierung
        rClient.ExecuteAsync<TeamList>(rRequest, response =>
        {
            var teams = response.Data;
            //Leeren des Team-ListViews
            listViewTeams.BeginInvoke((Action)delegate { listViewTeams.Items.Clear(); });

            //Iterieren über alle Mannschaften/Teams
            teams.teams.ForEach(team =>
            {
                //Erstellen eines neuen ListView-Eintrags mit dem Namen der Mannschaft
                ListViewItem lvi = new ListViewItem(team.name);
                //Speichern aller Mannschaftsinformationen am Eintrag
                lvi.Tag = team;
                //Anfügen des Eintrags an das Mannschafts-ListView
                listViewTeams.BeginInvoke((Action)delegate { listViewTeams.Items.Add(lvi); });
            });
            //Aktivieren des Mannschafts-ListViews
            listViewTeams.BeginInvoke((Action)delegate { listViewTeams.Enabled = true; });
        });
    }
}

Statistiken einer Fußballmannschaft anzeigen

Nun haben wir also eine Übersicht aller vorhandenen Saisons und können uns zu jeder Saison/Liga auch die Mannschaften anzeigen lassen. Im nächsten Schritt befüllen wir den DoubleClick-Eventhandler des listViewTeams mit Leben. In diesem ListView werden die verfügbaren Mannschaften angezeigt. Macht der Nutzer einen Doppelklick auf eine Mannschaft, sollen Informationen zur Mannschaft in der RichTextBox angezeigt werden. Nachfolgend der Code inklusive erläuternder Kommentare:

private void listViewTeams_DoubleClick(object sender, EventArgs e)
{
    //Sicherstellen, dass der Doppelklick auf einen Eintrag getätigt wurde
    if (listViewTeams.SelectedItems.Count > 0)
    {
        //Auslesen des Mannschaftsobjekts
        var team = (Team)listViewTeams.SelectedItems[0].Tag;

        //Ausgabe der Mannschaftsinformationen "Name", "Kürzel" und "Marktwert" auf Basis
        //der Informationen aus dem Mannschaftsobjekt
        richTextBoxInformation.Text = "===================================\r\n"
                                    + "Name: " + team.name + "\r\n"
                                    + "Kürzel: " + team.code + "\r\n"
                                    + "Gesamtmarktwert: " + team.squadMarketValue + "\r\n"
                                    + "===================================\r\n"
                                    + "\r\n\r\n";

        //Auslesen der Spiel-Informations-URI (Fixtures)
        var fixtureUrl = team._links.fixtures.href.Replace("http://api.football-data.org/","");

        //Erstellung von Client, Anfrage und setzen des Auth-Headers
        var rClient = new RestClient("http://api.football-data.org");
        var rRequest = new RestRequest(fixtureUrl, Method.GET);
        rRequest.AddHeader("X-Auth-Token", apiKey);

        //Synchrone Abfrage der API
        var response = rClient.Execute<FixtureList>(rRequest);
        var fixtures = response.Data;

        //Absteigendes sortieren der Spieltage und anschließendes iterieren über die Spieltage
        fixtures.fixtures.OrderByDescending(x => x.matchday).ToList().ForEach(fixture =>
        {
            //Ausgabe von "Spielpartner", "Location", "Spielergebnis" und "Spieltag"
            richTextBoxInformation.Text += fixture.homeTeamName + " vs. " + fixture.awayTeamName + "\r\n"
                                        + "Location: " + (fixture.homeTeamName == team.name ? "Heimspiel" : "Auswärtsspiel") + "\r\n"
                                        + "Ergebnis: " + (fixture.status != "FINISHED" ? "Spiel noch nicht ausgetragen"
                                                                                        : fixture.result.goalsHomeTeam + ":"
                                                                                        + fixture.result.goalsAwayTeam) + "\r\n"
                                        + "Spieltag: " + fixture.matchday + " (" + fixture.date + ")\r\n\r\n";

        });
    }
}

An dieser Stelle ist unser Tutorial bereits beendet. Die grundlegende Funktionsweise der API sowie das Absetzen von REST-Abfragen inkl. JSON-Deserialisierung sollte nun klar sein. Wer mag kann nun beliebig weitere Statistiken und Auswertungen erstellen. Auch an der Visualisierung der Daten mit optisch ansprechenden Graphen könnte weitergearbeitet werden.

Projektdateien und Download

Wer sein Projekt nicht zum Laufen bekommt oder keine Lust hat den Code selber zu schreiben, kann unter folgendem Link das Visual-Studio-Projekt herunterladen.

Download: SoccerDashboard – Visual-Studio-Projekt

Fazit

Mittels RestSharp lassen sich REST-APIs ohne großen Aufwand in C# nutzen. Sollte es einmal zu Problemen mit der JSON-Deserialisierung kommen oder der Wunsch bestehen, JSON dynamisch zu deserialisieren, gebe ich an dieser Stelle noch den Tipp, zusätzlich mit der Json.NET Library zu arbeiten und mittels RestSharp nur den Content abzufragen. Für das Deserialisieren wäre dann die Json.NET-Library zuständig, die noch etwas flexibler und mächtiger als die in RestSharp implementierte Logik ist.

Solltet ihr aufbauend auf SoccerDashboard bzw. den Infos aus diesem Artikel eine eigene Anwendung aufsetzen, würde ich mich freuen von euren Resultaten in den Kommentaren zu lesen. Welche Features, Statistiken und Auswertungen würdet ihr mit der gezeigten API erstellen wollen?

6

Wildcards in Google Suggest nutzen

Was ist Google SuggestDen regelmäßigen Nutzern meines Blogs sollte “Google Suggest” bereits ein Begriff sein. Jene können gerne zum Abschnitt “Wildcard-Operator in Google Suggest” vorspringen, für alle anderen folgt nun der Schnelleinstieg. Google Suggest (suggest = vorschlagen) ist der Name der Google Funktionalität, welche dafür zuständig ist, dass einem schon während des Tippens der Suchanfrage mögliche Suchanfragen vorgeschlagen werden. Tippt man also “Was sind die beliebtesten” so schlägt mir Google zum Beispiel vor “Was sind die beliebtesten Sportarten in Australien”. Die Vorschläge wiederum setzen sich zum einen aus dem eigenen Google-Suchprofil und zum anderen aus den derzeit häufigsten Suchanfragen anderer Nutzer an Google zusammen.

Für Webmaster, SEOs (Suchmaschinenoptimierer) und Internet-Marketer hat das Google Suggest Feature jedoch noch einen ganz anderen Nutzen als die reine Unterstützung bei der Suche. Da sich die Vorschläge, wie bereits erklärt, unter anderem aus den häufigsten Suchanfragen anderer Nutzer ergeben, lassen sich aus den Vorschlägen also Rückschlüsse über die Interessen und Fragen anderer Nutzer ziehen. Gebe ich also ein “Was ist die beste”, so komplettiert Google Suggest mit “Was ist die beste E-Zigarette”, “Was ist die beste Krankenkasse”, etc..

Google Suggest - Was ist die beste

Ich kann hieraus also darauf schließen, dass Nutzer besonderes Interesse an einer Auskunft bzw. einem Vergleich von E-Zigaretten haben. Hier könnte ich als geschickter Marketer nun ansetzen und Inhalte generieren, die genau auf diese Frage Antwort geben und so möglichst viel Traffic von Google abschöpfen. (Ganz so einfach ist es in der Praxis dann doch nicht, aber dennoch ist Google Suggest ein wertvolles Werkzeug.)

Wildcard-Operator in Google Suggest

Bisher ließen sich jedoch nur Sätze/Fragen vervollständigen. Das klappt für obiges Beispiel “Was ist die beste” oder für Fragen wie “Was sind die günstigsten”. Möchte ich jetzt aber wissen, für welche Musikalben sich die Nutzer besonders interessieren müsste ich eine Frage wie “Wann erscheint [KünstlerXYZ’s] neues Album”.

Das war bisher jedoch nicht möglich. Vor kurzem wurde nun aber bekannt, dass der Unterstrich “_” (underscore) als Wildcard-Operator genutzt werden kann. Für obiges Beispiel würde die Anfrage mit dem Google Suggest Platzhalter also wie folgt aussehen: “Wann erscheint _ neues Album”.

Google Suggest mit Wildcard

Die Verwendung der Wildcard funktioniert übrigens auch einwandfrei mit meinem Bulk Suggest-Tool, welches euch die Arbeit mit der Google Suggest Funktion noch ein Stück leichter macht.

Mit diesem “Trick” ergeben sich völlig neue Anwendungszenarien und zumindest ich, für meinen Teil, halte diese neue Erkenntnis für goldwert. Wie seht ihr das? Nutzt ihr das Google Suggest Feature selbst und wenn ja, wofür?

0

Test: WIX – Kostenloser Homepage-Baukasten

WIX Editor - Elemente verschieben

In folgendem Artikel möchte ich euch den Homepage-Baukasten von Wix.com vorstellen. Doch bevor es losgeht, noch ein paar Worte, wie es dazu kam…

Als Informatiker in der Familie hat man es nie ganz leicht. Auch wenn mein Bruder mittlerweile mit seiner Ausbildung zum Fachinformatiker Anwendungsentwicklung nachzieht, so ist dennoch klar, dass alle Fragen, die auch nur im entferntesten mit den Themen PC, Internet, Smartphone zutun haben, bei mir bzw. uns landen.

Dabei kommen die Fragen nicht nur aus der direkten Verwandschaft, sondern gerne auch mal von deren Freunden oder den Freunden der Freunde.

Eine der Top-Fragen ist folgende: “Ich hätte gerne eine Homepage, möchte aber nichts bezahlen. Wir kennen uns doch, kannst du da nicht was machen? Für dich als Informatiker sind das doch nur ein paar Klicks…”

Dann ist es mal wieder soweit die “Aufklärungskeule” zu schwingen und zu erklären, dass eine 100% individuelle, professionelle und handgefertigte Website auch ein Haufen Arbeit ist, der bezahlt werden will. Manchmal folgt die Einsicht, manchmal kommt aber auch die Frage, nach dem “Selbstbau-Baukasten”. Und genau hier möchte ich heute ansetzen.

Homepage-Baukästen gibt es eine ganze Menge am Markt. Da ich immer wieder mal nach einer Empfehlung gefragt werde, habe ich mir in den letzten Wochen einige der größeren Wettbewerber angeschaut und meinen derzeitigen Favoriten gefunden. Diesen möchte ich euch heute vorstellen und begründen, warum ich diesen von nun an empfehle, wenn es eine Homepage im Selbstklick-Verfahren werden soll.

Der Kandidat

Bei dem Homepage-Baukasten, den ich nachfolgend vorstellen möchte handelt es sich, wie bereits gesagt, um Wix.com. Noch nie etwas davon gehört? So ging es mir bis zum Zeitpunkt meiner Recherche auch. Dabei existiert Wix schon seit 2006, ist an der NASDAQ-Börse gelistet und hatte 2013 einen Jahresumsatz von über 80 Millionen Dollar. Es handelt sich somit wahrlich um keinen Anfänger/Neueinsteiger in der Szene.

Nachfolgend werde ich erst auf die Anmeldung, die Erstellung der Webseiten und den Editor eingehen, dann einmal die technische Qualität der Seiten beleuchten und abschließend ein Fazit ziehen.

Registrierung und Start

WIX AnmeldungDie Anmeldung bei Wix kann schnell und unkompliziert über die Hauptseite des Anbieters vorgenommen werden. Zur Anmeldung genügt die Eingabe einer E-Mail-Adresse sowie eines Passwortes. Mehr persönliche Informationen müssen nicht preisgegeben werden.

Zwar erhält man kurz nach der Anmeldung eine Begrüßungsmail, jedoch enthält diese keinerlei Bestätigungs- oder Aktivierungslinks. Es kann also direkt nach der Eingabe der Anmeldedaten losgehen.

Nach Eingabe der Anmeldedaten wird man nach der Kategorie bzw. Branche der zukünftigen Webseite gefragt. Die hier getroffene Auswahl schränkt die Design-Vorlagen ein, die man im nächsten Schritt wählen kann. Hierbei ist die Wahl keinesfalls verbindlich. Wenn man sich später für eine andere Kategorie entscheidet, stehen zu jeder Zeit wieder alle Vorlagen zur Auswahl. Die Kategoriewahl soll somit lediglich die Entscheidung für ein passendes Theme erleichtern.

WIX KategoriewahlHat man die Kategorien gewählt, gelangt man zur Themewahl. Hier stehen sowohl kostenlose als auch Premium-Vorlagen zur Auswahl. Zu Gute halten muss man, dass die Auswahl bei den kostenlosen Vorlagen sehr groß ist. Somit sollte man definitiv auch eine kostenlose Vorlage finden, die dem eigenen Gusto entspricht. Jede Vorlage ist dabei klar gekennzeichnet, ob sie kostenlos verfügbar ist und ob die Vorlage in deutscher Sprache zur Verfügung steht.

Für diesen Artikel habe ich eine Vorlage aus der Kategorie Restaurant & Gastronomie gewählt. Nach der Wahl des Themes (welche über einen Klick auf den Button “Bearbeiten” geschieht – hier wäre ein Text wie “Homepage mit dieser Vorlage anlegen” vielleicht noch besser) findet man sich im Editor wieder.

Der Editor

Der Editor ist das Werkzeug mit dem die komplette Homepage gestaltet werden kann. Dabei handelt es sich um einen WYSIWYG-Editor – man kann also direkt in der visuellen Vorlage herumeditieren, ohne auch nur eine Zeile Code zu schreiben. Prinzipiell lassen sich alle Seiteninhalte per Doppel-Klick bearbeiten und per gedrückter Maustaste verschieben.

Der Editor selbst ist in zwei Sektionen aufgeteilt – die obere Menüleiste und die seitliche Menüleiste (am linken Bildschirmrand).

WIX Editor - Menüleisten

Um euch einmal die Mächtigkeit dieses Werkzeugs darzustellen, möchte ich nachfolgend kurz auf die einzelnen Elemente des Editors eingehen. In nebenstehenden Screenshot seht ihr die Zahlen der einzelnen Menüpunkte auf die ich mich im Folgenden beziehe.

(1) Das WIX-Menü enthält Links zu den Account-Einstellungen und zur Liveansicht der Website.

(2) Mit diesen Buttons lässt sich zwischen Desktop- und Mobil-Ansicht umher schalten. Somit kann man direkt am Computer während der Seitenerstellung überprüfen wie die Webseite auf mobilen Endgeräten aussieht.

(3) Hier kann gewählt werden, welche Unterseite der Webseite bearbeitet werden soll. (z.B. Startseite, Impressum, Kontakt, etc.)

(4) Die klassischen Funktionen zum Rückgängig machen und Wiederherstellen von Aktionen.

(5) Kopieren und Einfügen von Inhalten aus der bzw. in die Webseite.

(6) Anzeige eines Rasters, welches bei der symetrischen als auch gleichmäßigen Ausrichtung der Webseiteninhalte unterstützen soll.

(7) Automatisches andocken. Wenn diese Funktion aktiviert ist, werden Elemente beim Verschieben automatisch am Raster ausgerichtet. Im Normalfall sollte diese Funktion aktiviert bleiben, sodass die Elemente unter sich an einheitlichen Linien ausgerichtet sind.

(8) Anzeigen eines Lineals, welches, wie die Rasterlinien auch, der harmonischen Anordnung der Webseiteninhalte dienlich sein soll.

(9) Vorschau zur Betrachtung der Änderungen (ohne Liveschaltung der Änderungen). Speichern der Änderungen (ohne Liveschaltung der Änderungen). Veröffentlichung (=Liveschaltung) der Änderungen und Verweis auf die Premiumpakete (welche nicht zwingend nötig sind).

(1b) WIX Editor - Seiten bearbeitenÜber das “Seiten-Menü” können die einzelnen Seiten der Homepage zueinander angeordnet werden. Hierbei lässt sich nicht nur die Reihenfolge, sondern auch die Hierarchie der einzelnen Seiten festlegen.

Des Weiteren können in diesem Menüpunkt neue Seiten angelegt als auch bestehende Seiten gelöscht werden.

Jede Seite für sich kann in einem Untermenüpunkt noch weiter adjustiert und mit grundlegenden SEO-Merkmalen versehen werden.

WIX Editor - Design bearbeiten(2b) Im “Design-Menü” lassen sich seitenübergreifende Design-Einstellungen treffen. So können Hintergrund-Bild, Hintergrund-Farbe, Schriftarten und andere Farbelemente der Webseite festgelegt werden.

Die Einstellungen, die in diesem Menüpunkt getroffen werden, sind im Normalfall seitenweit. Sollen nur bestimmte Seiten eine andere Farbe bekommen, so ist dies über die speziellen Seiteneinstellungen vorzunehmen.

(3b) Über das “Hinzufügen-Menü” lassen sich standardisierte Bausteine in die Webseite einfügen. Zur Auswahl stehen diverse Elemente von Basics wie Textbausteinen und Bildern, bis hin zu interaktiven Elemente wie der Verknüpfung mit sozialen Netzwerken oder einem Blog.

WIX Editor - App Market(4b) Über den “Wix App Market” lassen sich weitere Bausteine hinzufügen. Dies ist zugleich der erste Punkt im Editor, der nicht ausschließlich kostenfreie Elemente enthält.

Konkret heißt das, dass neben vielen kostenlosen Apps/Bausteinen auch einige bezahlte Bausteine Bestandteil des Markets sind.

Dennoch lohnt sich der Blick in der Market, da viele gute Bausteine (z.B. Google Adsense) als kostenlose Apps zur Verfügung stehen.

(5b) Über das “Einstellungsmenü” lässt sich die seitenweite Konfiguration vornehmen. Unter anderem finden sich hier die SEO- als auch URL-Einstellungen.

Die technische Qualität

Ein bekanntes Problem von WYSIWYG-Editoren ist der HTML-Code, den solche Editoren produzieren. Die Übersetzung der Klicks und Aktionen des Nutzers endet oftmals in chaotischem, falsch strukturierten bzw. falsch verschachteltem Code.

Schlimmer noch ist, dass die Webseiten nach “vorne hin” meistens dennoch gut aussehen, sodass diese Problematik den meisten Nutzern gar nicht bewusst ist. Suchmaschinen hingegen, Strafen den schlechten Code ab und die Nutzer sind enttäuscht, weil sich keine guten Rankings einstellen wollen. (Nein, die technische Seite allein macht keine guten Rankings, aber sie ist Komponente des komplexen Gebildes aus welchem die Rankings ermittelt werden.)

Aus diesem Grund gibt es nun noch einen kleinen technischen Anriss. Betrachtet habe ich die “Team”-Seite meiner Test-Homepage zum einen im W3C-Validator und zum anderen in Googles Pagespeed-Test.

WIX W3C ValidatorDer W3C-Validator spuckt insgesamt 8 Fehler und eine Warnung aus. Verglichen mit manch anderer Seite ist das schon mal ganz akzeptabel. Das Optimum sieht jedoch anders aus.

Betrachten wir die 8 Fehler genauer, sehen wir, dass sich die Fehler in zwei Kategorien aufteilen lassen. Da wäre einmal der “Bad value fbadminsmetatag for attribute name on element meta: Keyword fbadminsmetatag is not registered.“-Fehler, welcher aus der Facebook-Einbindung stammt. Hier hat WIX keinen Einfluss, sondern ausschließlich Facebook. Und da Facebook den Fehler seit langem in Kauf nimmt, ist diese Fehlermeldung schon einmal zu vernachlässigen.

Die zweite Kategorie von Fehler entspricht folgendem Muster: “Bad value […] for attribute http-equiv on element meta.” Diese Fehler stammen aus der Tatsache, dass der HTML5-Standard bisher nur wenige META-Attribute definiert hat. Und was der Standard nicht kennt, wird per se als Fehler deklariert. In diesem Fall sind also auch diese Fehlertypen nur bedingt kritisch, sodass wir als Fazit ziehen können, dass der W3C-Validator keine ernsthaften Fehler meldet.

WIX PagespeedDen zweiten Test habe ich mit Googles Pagespeed-Tool durchgeführt. Hier wird zum einen die Geschwindigkeit und zum anderen die Nutzerfreundlichkeit getestet.

Für die Desktopdarstellung liefert der Test ordentliche 81%. Für die Mobile Darstellung 72%, jedoch mit 96% Nutzererfahrung.

Bemängelt wird unter anderem, dass Grafiken und Skripte besser komprimiert sein könnten. Hier könnte WIX definitiv noch nachbessern. Alles in allem sind aber auch diese Ergebnisse ordentlich.

Die Grenzen – Premiumpakete

Wer mit den bisher beschriebenen Funktionen nicht auskommt, kann auf die sogenannten Premiumpakete zurückgreifen. Diese gibt es in 4 Preisklassen von ca. 4-16€ pro Monat.

Mit dem Erwerb eines Premiumpakets wird z.B. der Speicherplatz für eigene Bilder vergrößert oder die Aufschaltung einer externen Top-Level-Domain erlaubt. Eines der stärksten Argumente für ein Premiumpaket dürfte jedoch der Support sein. Denn ein Premiumpaket beeinhaltet in jedem Falle den sogenannten Premium-Support. Hält man sich die Zielgruppe für einen Homepage-Baukasten vor Augen, so dürfte dies ein gern angenommenes Feature sein.

Fazit

Wer Programmieren bzw. Skripten kann, schreibt sich seine Webseite selber. Wer genug Geld auf der hohen Kante hat, lässt eine Agentur an die Erstellung der eigenen Webseite. Wer weder das eine noch das andere hat, greift auf einen Homepage-Baukasten zurück.

Mit dem WIX-Baukasten kann man nicht viel verkehrt machen. Die Lernkurve ist steil und schon nach kurzer Einarbeitungszeit gelingen passable Ergebnisse. Zudem gibt es zum Editor das ein oder andere Hilfe-Video. Auch der erzeugte Code ist nicht zu beanstanden (siehe Abschnitt: “Die technische Qualität”).

Wer mit den kostenlosen Funktionen nicht auskommt, muss jedoch in die Tasche greifen. Günstiger als eine Agentur ist es dennoch in den meisten Fällen. Wer Premiumfunktionalitäten haben möchte und dennoch kein Geld ausgeben will, der sollte grundsätzlich noch einmal die Priorität der eigenen Webseite überdenken – oder Programmieren lernen.

5

Update: Cloud Downloader 2.5

Cloud Downloader 2.5 - DownloadSeit wenigen Minuten steht der neue Cloud Downloader zum Download bereit. Neben ein paar Bugfixes sind in der aktuellen Version 2.5 auch ein paar neue Features hinzugekommen.

An dieser Stelle noch einmal vielen Dank für das Feedback aus der Community und eure Mails mit Vorschlägen und Ideen.

Neuerungen und Fixes in Version 2.5:

  • Fix: Likes/Like-Pages werden in der Suche nun wieder gefunden.
  • Upgrade: Suchalgorithmus verbessert.
  • Feature: Während der Suche wird ein genauerer Status angezeigt, sodass Wartezeiten besser überbrückt werden
  • Feature: Ein Tab mit Einstellungen ist hinzugekommen. Der “Download fertig”-Sound als auch das Pop-up nach Fertigstellung aller Downloads können wahlweise deaktiviert werden. Es kann ein Standard-Downloadordner festgelegt werden.
  • Feature: Ein Selbstdiagnose-Test beim Starten der Anwendung wurde implementiert. Somit kommen wir den Startabbrüchen, die einige wenige User haben, hoffentlich auch noch auf die Schliche.

 

Zum Download: Cloud Downloader 2.5

 

Cloud Downloader 2.5 - Search songs  Cloud Downloader 2.5 - Search load header information  Cloud Downloader 2.5 - Song list

Cloud Downloader 2.5 - Download  Cloud Downloader 2.5 - History  Cloud Downloader 2.5 - Settings

3

Entscheidungshilfe: Was ist der richtige vServer für mich?

vServer RackHeute soll es darum gehen, welches der geeignete vServer für das eigene Projekt ist. Welche Merkmale machen einen vServer aus und auf welche Specs sollte man achten?

Weiter soll es darum gehen, wann es überhaupt Sinn macht einen vServer zu mieten. Denn in manchen Fällen ist ein vServer vielleicht gar nicht nötig oder andersherum “zu schwach” auf der Brust.

Webspace, vServer, Root-Server, Managed Server, Cloud Server – welcher ist der richtige?

Bevor wir auf die Eigenschaften und wichtigen Faktoren eines vServer eingehen, sollten wir zuerst klären, für wen und für welche Zwecke sich ein vServer eignet.

Nehmen wir als die beiden Grundwerte einmal Flexibilität und Leistung, so kann man sagen, dass sich ein vServer in der Mitte zwischen Webspace (wenig Flexibilität / Leistung) und einem Root-Server (viel Flexibilität / Leistung) befindet. Das Gleiche gilt für die preisliche Einordnung. (Zu beachten ist hierbei, dass dies den Normalfall betrifft. Sicherlich gibt es auch vereinzelt Angebote, in denen ein Webspace mehr Leistung hat als ein vServer oder ein Root-Server weniger Leistung hat als ein vServer. Dies sind aber eher die Ausnahmen.)

Was macht nun einen vServer aus und wo sind die Unterschiede zum Webspace und zum Root-Server? Bei einem Webspace bekommt, vereinfacht gesagt, ein Verzeichnis auf einem (Web-)Server zu Verfügung gestellt, in dem man seine Webseite(n) ablegen kann. Zusätzlich gibt es meist noch Zugriff auf eine Datenbank und einen FTP-Zugang, mit dem man das Verzeichnis leichter bespielen kann. Versteht man den Server als “ein Stück Hardware” und führt sich vor Augen, dass je nach Anbieter bis zu 200 Webspace auf einem Server angelegt und vermietet werden, wird schnell klar, warum ein Webspace nicht die performanteste Lösung ist. Hinzu kommt, dass der Webspace-Betreiber Fakten wie den verwendeten Webserver (Apache, Nginx, etc.) und das/die Datenbanksysteme vorgibt. Somit ist man in der Flexibilität auch etwas eingeschränkt.

Bei einem vServer bekommt man eine virtuelle Maschine auf einem Server (Server analog zu “ein Stück Hardware”). Je nach Leistung des ausgewählten vServer und der Leistung der Server-Hardware werden 2-10 virtuelle Maschinen (=vServer) auf einem System verwaltet. Es wird also schon klar, dass man sich im Vergleich zum Webspace mit weniger Leuten die Leistung teilen muss und man zudem zugesicherte Ressourcen hat.
Was die Flexibilität angeht, kann man hier nahezu “walten und schalten” wie man will. Da es sich um eine virtuelle Maschine handelt, kann man von der Wahl des Betriebssystems bis hin zur Installation beliebiger Software alles vornehmen.

Der Root-Server ist quasi “die Krone der Schöpfung”. Hier bekommt man Vollzugriff auf die Server-Hardware und ist der einzige Kunde auf dem System. Die Vorteile liegen klar auf der Hand: Uneingeschränkter Zugriff auf die Server-Ressourcen. In der Flexibilität nehmen sich ein Root-Server und ein vServer in der Praxis meistens nichts. Der Unterschied liegt wirklich nur in der höheren Performance.

Und was ist mit Cloud-Servern und Managed-Servern? Bei Cloud-Servern lassen sich Hardware-Parameter wie CPU und RAM dynamisch ändern. Kommt ein Besucheransturm, dann skaliere ich meine Maschine eben für zwei Tage hoch. Ist er vorbei, nehme ich wieder Ressourcen weg. Dies ist zwar einerseits eine schöne Sache, andererseits lassen sich die Anbieter dies aber bisher auch fürstlich bezahlen. Ein Cloud-Server mit vergleichbaren Specs wie ein vServer kostet im Normalfall mehr. Weiß man, dass man eine einigermaßen konstante Auslastung hat, so sollte man sich also eher für den vServer entscheiden.

Ein Managed-Server kann sowohl ein vServer als auch ein Root-Server sein. Das Wort “Managed” beschreibt lediglich die Dienstleistung eines Anbieters, den Server zu warten. Denn: Ein Server bringt grundsätzlich Verantwortung mit sich! Im Gegenteil zum Webspace liegt die Verantwortung für das Einspielen von Updates und sicherheitsrelevanten Patches auf seinen des Mieters. Wer nur Performance und Flexibilität haben will, sich aber nicht um die Wartung kümmern möchte, der entscheidet sich für einen Managed-(v)Server.

Worauf muss ich bei der Wahl eines vServers achten?

Ist die Entscheidung für die Nutzung eines vServer einmal getroffen, gilt es den passenden Anbieter zu finden. Um sich einen Überblick über die aktuellen Angebote am Markt zu verschaffen, eignen sich Portale zum vServer Vergleich. Hat man sich dort für seine Favoriten entschieden, sollten folgende Kriterien bei der endgültigen Auswahl beachtet werden.

CPU; Wie viel Rechenleistung brauche ich? Habe ich eher rechenintensive Aufgaben (z.B. komplexe Scripte und Berechnungen) vor oder muss mein vServer eher mehr für die Datenhaltung (z.B. Backupserver) geeignet sein. Welche CPU hat der Anbieter verbaut? Ist es eine Server CPU (z.B. XEON) oder eine Desktop CPU (z.B. Intel i7). Desktop CPUs sind nicht per se schlecht, jedoch verbauen manche Anbieter auch CPUs wie Intel Atom, die im Normalfall völlig ungeeignet sind. Weiter gilt es zu beachten, ob eine bestimmte Anzahl an Kernen und MHz fest zugesichert wird oder die Leistung dynamisch verteilt wird. (Eine explizite Zusicherung ist immer zu bevorzugen.)

RAM; Hier gilt das Gleiche wie im letzten Abschnitt zu den CPUs. Wird der Arbeitsspeicher fest zugesichert oder erfolgt eine dynamische Verteilung? Oftmals werden auch Kombinationen wie 2 GB fest zugesichert und 4 GB optional/dynamisch angeboten. Von angeboten ohne Zusicherung ist in jedem Fall abzusehen.

SSD oder HDD; Hier stellt sich wieder die Frage nach dem Einsatzzweck. So gibt es zum Beispiel Angebote bei denen es zum gleichen Preis entweder 80 GB SSD oder 400 GB HDD gibt. Möchte ich den vServer als Backup-Speicher oder als Datenspeicher zum Anbieten von Downloads nutzen, sollte ich lieber die HDD wählen. Möchte ich zum Beispiel eine Datenbank-lastige Anwendung laufen lassen, so wähle ich die SSD um einen Performancegewinn bei den Datenbankzugriffen durch die SSD zu erreichen.

Betriebssystem und Images; Mit welchem Betriebssystem möchte ich arbeiten? Linux, Unix, BSD oder Windows? Vor der Miete eines vServers sollte abgeklärt werden, welche Betriebssysteme der Anbieter zur Verfügung stellt. Meist sind Windows vServer etwas teurer als ihre Linux-Pendante, da für den Anbieter noch Lizenzgebühren fällig werden. Wer noch eine Windows-Lizenz über hat, sollte sich am besten einen Anbieter suchen, der das Hochladen von Images erlaubt. So kann man ein Windows-Image hochladen und mit seiner eigenen Lizenz betreiben.

Backups; Bietet der Anbieter an Backups vom vServer zu machen? Wenn ja, ist der Speicherplatz kostenlos oder muss dafür extra gezahlt werden? Werden Backups im laufenden Betrieb angeboten?

Control-Panel; Welche Möglichkeiten zur Steuerung und Wartung bietet der Anbieter an? Kann ich meinen vServer selbst neu starten oder ein Hardreset durchführen oder bedarf es dazu eines Servicetechnikers? Gibt es eine Remotekonsole über die ich direkt auf den Server zugreifen kann?

Fazit

Die obige Liste ist nun doch etwas länger geworden, als ich zu Eingang des Artikels gedacht hatte. Dennoch sollte man sich davon nicht abschrecken lassen. Schließlich lassen sich die richtig guten Preise erst bei Vertragslaufzeiten ab 6-12 Monaten erzielen. Und bevor man sich solch lange Zeit bindet, sollte man vorher genau überlegen, ob der Anbieter bzw. dessen Angebot wirklich auf die eigenen Bedürfnisse passt.

Wenn man die obige Checkliste gewissenhaft abarbeitet, kann im Endeffekt nicht mehr viel schief gehen.

Wie sind eure Erfahrungen? Habt ihr auch einen vServer und wenn ja, welche Kriterien habt ihr in die Wahl eures Servers mit einbezogen?

 

Das Artikelbild steht unter CC-Lizenz und stamm von Bob Mical.

Seite 1 von 57