Ihr sollt natürlich am ebsten noch alle Änderungen nachvollziehen, könnt aber ab jetzt auch gerne zusätzlich den Updater nutzen. Dieser ist als Plugin angelegt und in diesem Artikel werde ich die grundsätzliche Funktionsweise (des Clients) erklären.

Für den Updater werden einige Komponenten von ContentLion als Pakete eingeteilt. So ist zum Beispiel ein Paket der Contentlion-Core. Andere Packete sind Plugins oder Skins. Diese Pakete werden mit der aktuellen Version in der neuen Tabelle cl_packages gespeichert:

CREATE TABLE `cl_packages` (
  `name` varchar(50) NOT NULL,
  `version` int(11) NOT NULL,
  PRIMARY KEY (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Derzeit haben wir bereits einige Pakete. Diese werden so registriert:

INSERT INTO `cl_packages` (`name`, `version`) VALUES
('contentlion-core', 1),
('plugin_lookaround', 1),
('plugin_updater', 1),
('plugin_filelistwidget', 1),
('plugin_menulistwidget', 1),
('plugin_pagelistwidget', 1),
('skin_default', 1),
('skin_backaenddefault', 1);

Für Plugins möchte ich gerne die Präfix plugin_ und für Skins skin_ verwenden. Die Paketnamen werden später bei der Installation von Plugins und Co eingebaut.

Die einzelnen Pakete werden über einen Get-Parameter mit der Version an die Adresse http://connect.contentlion.org/update.php?format=xml übergeben. Zurück kommt eine XML-Datei mit den einzelnen Update-Paketen. Diese Update-Pakete haben den gleichen Namen wie das normale Paket und eine Url über welcher die einzelnen Update-Befehle heruntergeladen werden können.

Befehle

Die einzelnen Änderungen werden pro Paket über eine Datei übergeben. Die Datei ist eine einfache Text-Datei, welche pro Zeile einen Befehl enthält. Am Anfang steht immer der Name des Befehls, danach ein Doppelpunkt und dann die Parameter in einem freien Format.

Für die ersten Tests habe ich 2 Befehle erstellt:

• FileTransfer  – lädt eine Datei herunter
• SqlCommand – Führt einen Sql-Query aus.

In Kürze werden wahrscheinlich die folgenden Befehle folgen:

• Delete – Löscht eine Datei
• Include – Included eine PHP-Datei
• AddLanguageToken – Fügt eine neue Übersetzung hinzu

weitere Vorschläge könnt ihr gerne einreichen.

Oberfläche

Der Updater ist erstmal ein Widget. Später könnten wir noch weitere Anzeigemöglichkeiten hinzufügen. Bei jedem öffnen des Widgets wird nach neuen Updates gesucht. Sollten Updates vorhanden sein, werden Paket-Name und Install-Link angezeigt.

Die Datei /system/plugins/updater/widget.php hat folgenden Code:

<?PHP
  class Updater extends WidgetBase{
    public function load(){
	  $this->headline = "Updater";
      include('interfaces/iupdateimporter.php');
      include('interfaces/iupdatecommand.php');
      $installedPackages = Plugin_Updater_Package::readFromDB();
      $path = "http://connect.contentlion.org/update.php?format=xml";
      $i = 0;
      foreach($installedPackages as $package){
        $path .= "&".$package->getUpdateToken($i);
        $i++;
      }
      $importer = new Plugin_Updater_UpdateXmlImporter();
      $importer->importPath($path);
      if($importer->areUpdatesAvailible()){
        $host = getSetting("global","global","host");
        foreach($importer->getUpdates() as $update){
          if(isset($_GET['update']) && $_GET['update'] == $update->getName()){
            $this->content .= "<br />Installiere ".$update->getName()."...";
            $update->runUpdate();
            $this->content .="<br />Installation abgeschlossen";
          }
          else{
            $this->content .= "<br />".$update->getName()." - <a href='".$host."admin/home.html?update=".$update->getName()."'>Installieren</a>";
          }
        }
      }
      else{
        $this->content =  "Keine Updates vorhanden!";
      }
	}
  }
?>

Wie ihr vielleicht erkennen können, habe ich hier unser Plugin-Klassenformat benutzt. So können die Klassen zum Updater unter /system/plugins/updater/classes abgelegt werden. Neben den Klassen gibt es auch einige Interfaces, welcher hier  liegen: /system/plugins/updater/interfaces.

Zu guter letzt noch der SQL-Code, der das Widget aktiviert:

INSERT INTO `cl_dashboards` VALUES ('admin/home', 1, 2, 'updater/widget.php');
INSERT INTO `cl_widgets` VALUES ('updater/widget.php', 'Updater', 'Updater');
INSERT INTO `cl_activated_plugins` VALUES ('updater');

Update Import

Ich möchte euch jetzt nochmal kurz die Klasse Plugin_Updater_UpdateXmlImporter vorstellen. Das ist die Klasse, die prüft, ob Updates vorhanden sind. Diese implementiert das Interface IUpdateImporter. Ich habe ein Interface benutzt, damit man später das Format zum Beispiel auf CSV o.Ä. umstellen könnte.

Das XML lese ich über XPath aus. Einzelne Updates werden der Eigenschaft $updates hinzugefügt. Mit areUpdatesAvailible kann geprüft werden, ob Updates vorhanden sind. /system/plugins/classes/updatexmlimporter.php:

<?PHP
  class Plugin_Updater_UpdateXmlImporter implements IUpdateImporter{
    protected $updates = array();

    public function getUpdates(){
      return $this->updates;
    }

    public function importPath($path){
      $source=fopen($path,"r");
      while ($a=fread($source,1024)){
        $text .= $a;
      }
      fclose($source);
      return $this->importCode($text);
    }

    public function importCode($code){
      $xml = new SimpleXMLElement($code);
      foreach($xml->xpath('/contentlionupdates/update') as $update){
        $package = Plugin_Updater_UpdatePackage::get($update->path);
        $package->setName($update->name);
        $this->updates[] = $package;
      }
      return $this;
    }

    public function areUpdatesAvailible(){
      return sizeof($this->updates) > 0;
    }
  }
?>

Weitere Änderungen stehen selbstverständlich wieder bei Google: Revision 19.

Um das Ganze einmal zu testen, habe ich euch bereits ein kleines Update zur Verfügung gestellt. Dieses lädt einfach eine Testdatei herunter. Viel Spaß damit!

Mit dem Wiki möchte ich unter anderem meine Artikel besser miteinander Verknüpfen. So können zu manchen Begriffen schnell auch die passenden Artikel als Links angezeigt werden. Selbstverständlich werde ich auch andere interessante Seiten verlinken.

Um zu analysieren, welcher dieser Teaser die meiste Aufmerksamkeit auf sich zieht, sprich welcher Teaser die meisten Klicks bekommt, habe ich eine kleine Analysetechnik eingebaut, die ich euch jetzt gerne vorstellen möchte.

Anzeige der Teaser

In meinem Teaserpool sind derzeit 8-9 verschiedene Teaser. Diese werden per Zufall auf verschiedenen Seiten angezeigt. Im Blog gibt es 4 Teaser und auf der Startseite 3. Off Topic: Für die Teaser hab ich extra meinen 300×250 Banner entfernt.

Die Teaser sehen immer gleich aus. Links das Bild, rechts ein kleiner Text mit Link. Beispiele könnt ihr euch am rechten Seitenrand ansehen.

Brückenseite

Um die Klicks am besten zu zählen habe ich etwas kleines gebastelt: Eine Brückenseite. Diese bekommt der normale User gar nicht zu sehen, da er über PHP-Redirects direkt weitergeleitet wird.

Dieser Brückenseite wird die eigentliche Url sowie die ID des Teasers übergeben. Es ist auch möglich externe Urls anzugeben, wie ich es zum Beispiel beim LiveEditor gemacht habe.

Datenbank

Alle Teaser sind in einer kleinen Tabelle registriert. Diese besteht bei mir aus 3 Spalten:

• TeaserID
• Anzahl Views
• Anzahl Klicks

Bei jeder Einblendung werden die Views hochgezält und beim Klick wird auf der Brückenseite die Anzahl der Klicks erhöht.

Auswertung

Da ich einige Teaser erst später eingesetzt habe weichen die View-Zahlen etwas ab. Für die eigentlichen Auswertung ist aber nur die Klickrate entscheident. Hier möchte ich euch einfach mal die einzelnen Teaser mit den jeweiligen Daten auflisten. So könnt ihr vielleicht auch selbst mal überlegen, warum ein Teaser jetzt besser geklickt wurde als der andere.

Die Klickraten sehen im ersten Augenblick etwas klein aus, aber man muss beachten, das zum großem Teil 4 Teaser gleichzeitig angezeigt werden, so dass die max. Klickrate 25% wäre.

Die höchste Klickrate haben die Blog-Tutorials. Das könnte mal abgesehen vom Thema daran liegen, dass dort der Text etwas kürzer ist. Außerdem ist die Überschrift nicht komplett Sachlich, sondern ein bisschen “angeberisch” (was ich natürlich nicht damit ausdrücken wollte).

Das “Eigenes CMS schreiben” wird wahrscheinlich bei den Stammlesern häufig geklickt. Das war früher der einzige Weg von der Startseite zur Artikelübersicht – Etwas riskant von mir diese Liste nicht mehr immer anzuzeigen, aber im Menü hat sie einen eigenen Punkt bekommen.

Auf dem letzten Platz landet der Webanalyse-Teaser. Ich denke, dass die Überschrift einfach zu allgemein gefasst ist. Außerdem sagt der Satzteil “So wirds gemacht” nicht wirklich etwas aus.

Änderungen

Mit dem Wissen aus dieser Analyse werde ich die Teaser nochmal überarbeiten und erneut messen und die Ergebnisse vergleichen. Ich werde versuchen die Texte ein wenig kürzer zu fassen

Erweiterte Analyse

Neben den einzelnen Teasern könnte man auch noch weitergehen und zum Beispiel die Positionierung miteinander vergleichen: Wie oft wird ein Teaser der oben ist mehr geklickt als einer der unten ist. Oder bringt es was, einige Teaser von Hand an bestimmte Positionen zu binden.

• Datei
  • Dashboard
  • Neu
    • Ordner
    • Seite
    • Menü
    • Upload
  • Schließen
• Benutzer
  • Verwalten
  • Rollen
• Einstellungen
  • Global
  • Plugins
  • Skins
• ?
  • Hilfe
  • Issue Tracker
  • Blog
  • Über

Das habe ich natürlich in den Installer eingebaut. Allerdings existieren die meisten Seiten noch nicht (das kommt bald ). Hier ist der SQL-Query für die Menüs:

DELETE FROM cl_menu;
INSERT INTO `cl_menu` (`id`, `menuID`, `title`, `href`, `type`) VALUES
(1, 1, 'Datei', '3', 3),
(2, 1, 'Benutzer', '4', 3),
(3, 1, 'Einstellungen', '5', 3),
(4, 1, 'Extras', '6', 3),
(5, 1, '?', '7', 3),
(6, 2, 'Startseite', '1', 0),
(7, 2, 'Login', '2', 0),
(8, 3, 'Dashboard', '7', 0),
(9, 3, 'Neu', '8', 3),
(10, 3, 'Schließen', 'javascript:window.close()', 1),
(12, 8, 'Ordner', '13', 0),
(13, 8, 'Seite', '12', 0),
(14, 8, 'Menü', '18', 0),
(15, 8, 'Upload', '19', 0),
(16, 4, 'Verwalten', '11', 0),
(17, 4, 'Rollen', '14', 0),
(18, 5, 'Global', '9', 0),
(19, 5, 'Plugins', '15', 0),
(20, 5, 'Skins', '16', 0),
(21, 6, 'Plugins', '4', 0),
(22, 7, 'Hilfe', 'http://wiki.contentlion.org', 1),
(23, 7, 'Issue Tracker', 'http://code.google.com/p/contentlion/issues/list', 1),
(24, 7, 'Blog', 'http://blog.stevieswebsite.de', 1),
(25, 7, 'Über', '17', 0);

Fehlen dürfen auch nicht die Namen der Menüs:

DELETE FROM cl_menu_names;
INSERT INTO `cl_menu_names` (`id`, `name`, `dir`) VALUES
(1, '{admin}', '/admin'),
(2, '{mainmenu}', ''),
(3, 'Datei', '/admin'),
(4, 'Benutzer', '/admin'),
(5, 'Einstellungen', '/admin'),
(6, 'Extras', '/admin'),
(7, '?', '/admin'),
(8, 'Datei - Neu', '/admin');

Für die Unter-Untermenüs musste das CSS noch ein wenig verändert werden. Unsere Untermenüs gehen rechts zur Seite. Es wurde bei Menüeinträgen mit Untermenüs ein Pfeil eingefügt. Außerdem muss das Ganze passend positioniert werden. Hier ist nur das neue CSS (/system/skins/backenddefault/style.css):

#globalmenu > ul{
  position:absolute;
  top:86px;
  margin:0;
  padding:0;
  padding-left:10px;
  font-size: 9pt;
  list-style-type:none;
}
#globalmenu li{
  float:left;
  margin-right:10px;
  padding:2px;
}
#globalmenu li ul {
  display:none;
}
#globalmenu li div{
  display:none;
  text-align:right;
  float:right;
  padding-right:5px;
}
#globalmenu li li div{
  display:inline;
}
#globalmenu li:hover ul {
  display:block;
  list-style-type:none;
  padding:0;
  margin:0;
  background-color:#9f9f9f;
  width:200px;
  margin-top:1px;
  position:absolute;
  border:1px solid #000;
  border-top:0;
  z-index:10000000;
}
#globalmenu li:hover ul li {
  padding:0;
  margin:0;
  background-color:#9f9f9f;
  float:none;
  height:15px;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
}
#globalmenu li:hover ul li ul {
  display:none;
}
#globalmenu li:hover ul li:hover ul {
  display:block;
  position:relativ;
  top:-1px;
  left:200px;
  border:1px solid #000;
}

Weitere Änderungen gibt es in der Revision 18 bei Google.

Jetzt aber zurück zum Menü. Unser schönes DropDown Menü funktioniert ohne Javascript! Der Trick bei der Sache ist das :hover aus dem CSS. damit wird das Display unseres Menüs auf block gesetzt. Standardmäßig ist es auf display:none.

Zu erst einmal hab ich ein <div> um unser Menü gemacht, da ansonsten bei mehreren Elementen die globalmenu-ID steht /system/skins/backenddefault/index.php:

      <h1><?PHP echo sys::getTitle(); ?></h1>
      <div id="globalmenu">
        <?PHP
          sys::displayGlobalMenu("<ul>","</ul>","<li>"," </li>",
                                 "");
        ?>
      </div>
      <img src="<?PHP echo sys::getFullSkinPath(); ?>/images/logo.png" id="logo" />

Weiter geht’s mit der style.css:

#globalmenu > ul{
  position:absolute;
  top:86px;
  margin:0;
  padding:0;
  padding-left:10px;
  font-size: 9pt;
  list-style-type:none;
}
#globalmenu li{
  float:left;
  margin-right:10px;
  padding:2px;
}
#globalmenu li ul {
  display:none;
}
#globalmenu li:hover ul {
  display:block;
  list-style-type:none;
  padding:0;
  margin:0;
  background-color:#9f9f9f;
  min-width:100px;
  margin-top:1px;
  position:absolute;
  border:1px solid #000;
  border-top:0;
}
#globalmenu li:hover ul li {
  padding:0;
  margin:0;
  background-color:#9f9f9f;
  float:none;
  height:15px;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
}

Um auch Elemente angezeigt zu bekommen, hab ich einmal in Datei die Punkte Neu und Schließen eingefügt:

INSERT INTO `cl_menu` (`id`, `menuID`, `title`, `href`, `type`) VALUES
(8, 3, 'Neu', '8', 3),
(9, 3, 'Schließen', 'javascript:window.close()', 1);

Weitere Änderungen stehen bei Google Code unter r16 und r17.

Im der letzten Aufgabe ging es darum einen 10er-Artikel zu schreiben. Das haben vier Blogger geschafft. Demnach sieht die Tabelle nun so aus:

Als kleine Entschuldigung muss euch was spendieren. Und zwar gibt es ein kleines Gewinnspiel. Da eine gewisse Entwicklerin leider kein Headset hat, hab ich mir überlegt das ich in diesem Gewinnspiel eins verlose.

Und zwar könnt ihr im Kommentar eine andere Person bestimmen, die das Headset (als Amazon-Gutschein) bekommt. Wer die meisten Stimmen hat gewinnt. Ende ist am 25. Juni um 15:00 Uhr.

Das nächste ContentLion Live gibt’s dann hoffentlich ohne Fehler am 28.7.

Warum Coding Guidlines?

Unser Quellcode sollte überall gleich aussehen, so dass man ohne Probleme seine Sachen wiedererkennt. Außerdem sind in den Coding Guidlines bestimmte Regeln festgelegt, die dabei helfen Fehler zu vermeiden und evtl. Performance herauszuholen.

ContentLion

Natürlich werde ich nicht alleine bestimmen, wie programmiert werden soll. Ich würde mich am Mittwoch gerne in unserem Live-Meeting darüber unterhalten und auch Regeln festlegen. Off Topic: In Kürze startet hier der neue Countdown, diese Seite müsst ihr wieder benutzen, wenn’s am Mittwoch um 20:30 losgeht!

Vorlage

Ich habe mir bereits einige Gedanken zum Thema gemacht, die ich euch vorab schon zeigen möchte. So könnt ihr schon mal eine Meinung darüber bilden und weitere Regeln ausdenken oder Regeln überarbeiten / löschen. Wenn ihr die Regeln nicht verstanden habt, könnt ihr das jetzt schon melden, ansonsten merkt euch die Vorschläge / Kritik bis Mittwoch

Alle Namen auf Englisch

Alle Namen müssen sprechend sein

Der PHP –Code muss ohne Warnungen funktionieren

Klassennamen werden großgeschrieben

Funktionen und Eigenschaften im Camel-Casing (Beispiel: readField)

Private Variablen (in Funktionen) werden kleingeschrieben

Konstanten werden komplett großgeschrieben

Unterstriche in Namen sind verboten

Einrückung erfolgt mit Zwei Leerzeichen

Funktionen ab 3 Zeilen (Inhalt) müssen am Anfang eine $res Variable haben und diese zurückliefern

Funktionen über 15 Zeilen müssen in Unterfunktionen aufgeteilt werden

Klassenvariablen müssen als protected deklariert werden

Zugriff auf Klassenvariablen wenn nötig über Getter- und Setter Methoden (getVariable)

Funktionen müssen mit public , private oder protected deklariert werden

Objekte als Funktionsparameter müssen mit Type-Hints angegeben werden

Maximal 3 Parameter pro Funktion (ansonsten müssen neue Objekte eingesetzt werden)

Klassen gehören in eigene Dateien

Html-Code sollte je nach Länge in eigene Templates ausgelagert werden (ansonsten nach Eva-Prinzip)

Es sollen immer nur doppelte Anführungszeichen eingesetzt werden

Für PHP-Tags wird <?PHP genommen -> alle PHP Tags müssen geschlossen werden

Klammersetung

Erfolgt nach dem folgenden Muster:

if(true) {

}

else{

}

|| statt or und && statt and

Keine Übergabe von Boolean-Parametern an Funktionen, stattdessen zwei verschiedene Funktionen benutzen

Keine Kommentare im Quellcode

Der Quellcode sollte auch ohne Kommentare gut lesbar sein. Wenn die Funktion nicht klar wird, sollten Konstanen benutzt werden bzw. die Funktion sollte unterteilt werden.

Quellcode-Doku geschieht in externen Dokumenten.

Code soll nicht auskommentiert werden, da dieser sowieso im SVN vorhanden ist.

Maximal 80 Zeichen pro Zeile

Pro Befehl nur eine Zeile

Mit Cacoo kann man alle wichtigen Steuerelemente nutzen:

• Buttons
• Textbox
• Radio Buttons
• Checkboxen
• GroupBoxen
• und ganz wichtig: Panels (Boxen mit rand)

Neben den Sachen gibt es noch viel mehr. So kann man zum Beispiel komplette Diagramme damit gestalten. Aber in unserem Beitrag geht es um Wireframing, so dass ich auch nur auf diese Elemente eingehe.

In meinem Beispiel habe ich einmal nur das letzte der oben genannten Elemente genommen. Damit wollte ich dir groben Bereiche skizzieren. Was daraus geworden ist, seht ihr hier (Ein möglicher Entwurf für ein neues SteviesWebsite Layout):

Cacoon Wireframing

Klickt am besten auf dem Screenshot, damit ihr auch die wichtigen Details begutachten könnt.

Unterteilungen

Wer nicht nur eins sondern mehrere Projekte am Start hat, muss seine Planungen auch für mehrere Projekte aufteilen. Dazu kann man zusammenhängende Wireframes auch gemeinsam speichern. Unten im Screenshot seht ihr etwas bläuliche Tabs. In jedem Tab ist ein Wireframe oder ein Diagramm gespeichert.

Team Entwerfen

Ein tolles Feature ist, dass man seine Entwürfe mit anderen teilen kann. Wenn man also (wie wir bei ContentLion) zu mehreren programmiert, können so alle auf die aktuellen Entwürfe zugreifen. Außerdem kann man seine Entwürfe zum Beispiel mit Twitter verbreiten.

Fazit

Meiner Meinung nach ist das Programm richtig gut! Es ist kostenlos und man kann es von überall nutzen. Ich bin am überlegen, das ganze für unser OpenSource Projekt ContentLion einzusetzen.

In der letzten Woche ging es darum Links zu sammeln. Da es schwierig ist in der kurzen Zeit an viele Links zu kommen, gibt es nur drei Einstufungen: Einen Link bekommen, keinen Link bekommen oder ein Link ging verloren. Ab jetzt haben wir auch einen Blog der alleine auf Platz eins steht: Busch im Netz. Glückwunsch!

Hier ist die aktuelle Tabelle: