Die Suche nach dem neuen CMS – Teil 4 – drupal

05.08.2011 von Gebhard Nigsch

Hier geht es nun um eine kurze Analyse des open source CM-Systems drupal.
Bitte beachtet, dass diese Analyse das CM-System nicht in der Tiefe behandeln kann.

Version: 7.0
Website: drupal.org

Installation
Die Installation ging wie immer ganz einfach mit einem Installations-Wizard.

Usability
Das Interface scheint klar geliedert zu sein. Man findet sehr schnell, das was man sucht und kann dies dann auch einfach bearbeiten.

Pros

  • Einfach durch Plugins erweiterbar
  • Sehr übersichtliches User-Inferface
  • Auch hier existiert eine recht grosse Entwickler-Community

Contras

  • Das System erlaubt das Verschachteln von Inhalte-Containern nur in Form eines Blogs.
  • Relativ unflexible Contentpflege (erschiedene Inhalte (Bildgalerie, Text, Flash, … ) nicht auf einer Seite zusammenführbar)
  • Mehrsprachigkeit ist nur sehr komplizeirt aktivierbar

Fazit

Auch hier werden alle in Teil 1 beschriebenen Anforderungen durch das System selbst, oder durch Plugins erfüllt.
Was mich allerdings stört, ist das verschiedene Inhalte (Bildgalerie, Text, Flash, … ) nicht auf einer Seite zusammengeführt werden können.
Und das die Mehrsprachigkeit der Inhalte sehr, sehr kompliziert gelöst wurde.

Alle Artikel

Abgelegt unter Reviews | Eintrag kommentieren »

Responsive Webdesign – eine Denkweise

24.07.2011 von Sandro Wellenzohn

Heutzutage stehen eine Vielzahl von Devices für das auf die jeweiligen Bedürfnisse zugeschnittene Surferlebnis zur Verfügung. Ob mobil oder stationär. Darauf mittels gutem Webdesign zu reagieren liegt in der Verantwortung von Designern und Developern.

Fast jeder Kunde möchte seine Inhalte ebenfalls über eine mobile Version der eigenen Webseite verfügbar machen. Am besten spezifisch für iPhone, iPad, Android Phones & Pads, Blackberry, Netbooks und zahlreiche weitere Devices.

In den nächsten Jahren wird diese Entwicklung nicht zurückgehen, auf die es deshalb zu reagieren gilt.

Es gibt verschiedenste Möglichkeiten, um Informationen auf attraktive Weise auf verschiedensten Geräten zur Verfügung zu stellen und dabei eine konsistente Optik aufrecht zu erhalten. Zum Beispiel alternative Web-Frontends, Mobile (Web-)Apps im Browser, native Apps und vieles mehr.

Heute möchte ich euch eine Möglichkeit und zugleich ein Denkansatz im Webdesign vorstellen, mit dem sich zentral für verschiedenste Devices arbeiten lässt.

Responsive Webdesign

“Reagierendes Webdesign” ist ein Ansatz der darauf abzielt, dass Design und Development möglichst dynamisch und flexibel auf das Nutzerverhalten und Umfeld basierend auf Bildschirmauflösung, Plattform und Ausrichtung reagieren sollen.

Dieser Ansatz ist vorallem für Webprojekte relevant, wo das Erstellen einer eigenen, separaten Website oder mobile-App für die ganzen verschiedenen Geräte undenkbar, bzw. praktisch gesehen nicht relevant ist.

Dabei ist vorallem wichtig, dass es beim responsive Webdesign nicht nur um angepasste Layouts und automatisch skalierende Bilder geht, sondern dass es sich dabei um eine Denkweise im modernen Webdesign handelt.


Auflösung und Device



Hunderte verschiedene Bildschirme und Auflösungen existieren heute. Kleine und grosse Touch-Screens, grosse und kleine LED-Bildschirme – beliebig im hoch oder Querformat einsetzbar. Und es werden noch mehr dazukommen. Es steht also die Frage im Raum, wie man im Webdesign konkret mit dieser Situation umgehen soll.


Flexibilität statt Redundanz

Bereits vor einigen Jahren gab es flexible Layouts im Web, wobei diese äusserst selten aufzufinden waren und sich die Flexibilität oft stark in Grenzen hielt. Heutzutage gibt es wesentlich mehr technische Möglichkeiten, browserkompatible, flexible Layouts umzusetzen, auch wenn das an den an Photoshop und statische Layouts gewöhnten Designer ganz neue Anforderungen stellt. Dies ist ein Kernansatz von responsive Webdesign.

Hier einige kurz beschriebene Techniken im Frontend Development, um Flexibilität zu gewärhleisten:

  • Flexible Bilder

    Früher haben Bilder oft flexible Layouts zerstört. Bilder können heute mittels CSS einfach skaliert werden.Eine weitere Technik ist es, Bilder zu croppen (zuschneiden). Dies funktioniert mit einer Kombination aus einem <div> mit einem Background-Image das per CSS eingemitted wird und dessen <div> je nach Auflösung eine dynamische Breite hat. Mittels dem benutzerdefinierten HTML5-Attribut data-fullsrc und etwas javaScript (http://filamentgroup.com/examples/responsive-images) kann man ebenfalls ein niedrig und ein hochaufgelöstes Bild mit dem selben<img>-Tag gegeneinander austauschen, je nach Screen Auflösung.Vorteil: Weniger unnötiger Load auf mobilen Devices.


    Vergl.: Skalierende Bilder
  • Spezifische Layout Struktur

    Bei extremen Grössenunterschieden kann es nötig werden, das gesamte Layout anzupassen. Das kann mit einem neuen, separaten CSS geschehen, oder besser, mit CSS media queries. Damit lassen sich – wenn bestimmte Situationen zutreffen – bestehende CSS Klassen überschreiben oder neue ergänzen. So kann flexibel auf extreme Auflösungen reagiert werden. Alte Browser, die Media-Queries nicht unterstützen, werfen keine Fehler, sondern ignorieren diese einfach.

    • Code-Beispiel:

      • /* Smartphones (Hoch- und Querformat) ----------- */

      02

      @media only screen

      03

      and (min-device-width : 320px)

      04

      and (max-device-width : 480px) {

      05

      /* Hier können nun bestehende Klassen überschrieben werden oder neue styles hinzugefügt werden. */

      06

      }

    Mittels javaScript wäre es ebenfalls möglich solche Befehle zu implementieren, insbesondere wenn Browser unterstützt werden sollen, die media queries noch nicht unterstützen. Die allermeisten Smartphones und alle gängigen Browser aber, für die diese queries in erster Linie relevant sind, unterstützen sie auch.

  • Visibility – Inhalte verstecken und anzeigen.

    Oft ist es nötig auf mobilen Geräten auf diverse, nebensächlichere Zusatzinhalte zu verzichten, um den Blick des Betrachters auf das Wesentliche zu lenken. Hierfür eignet sich der CSS-Befehl display:none, der ebenfalls im Zusammenhang mit den media-queries flexibel eingesetzt werden kann.

  • Touchscreens – Finger statt Mauszeiger.

    Ein weiterer Aspekt ist das unterschiedliche Handling von Webseiten via Touchscreens. Diesen Aspekt möchte ich aber in einem separaten Artikel behandeln, den ich hier verföffentlichen werde.


Beispiel

Ich habe euch noch ein kleines, einfaches Beispiel gemacht
(einfach die Seite beliebig skalieren und die Ausgabe betrachten!)

http://projects.guavestudios.com/resp-design-test/

Tags: , , , , , , ,
Abgelegt unter Mobile, Webdesign | 1 Kommentar »

Die Suche nach dem neuen CMS – Teil 3 – joomla

25.02.2011 von Gebhard Nigsch

Hier geht es nun um eine kurze Analyse des open source CM-Systems joomla.
Bitte beachtet, dass diese Analyse das CM-System nicht in der Tiefe behandeln kann.

Version: 1.5.21
Website: joomla.org

Installation
Einfach das Installationspaket mir rund 7 MB herunterladen und installieren. Der gut gemachte Installations-Wizard
leitet einen dann bequem durch die Installation.

Usability
Das User-Interface macht einen übersichtlichen Eindruck. Ledglich die Struktur von joomla
(Bereich-Kategorien-Beiträge) ist gewöhnungsbedürftig.

Pros

  • Einfach durch Plugins erweiterbar
  • Sehr übersichtliches User-Inferface
  • Die Datenbankzugriffe wurden sehr gut optimiert
  • Auch hier existiert eine recht grosse Entwickler-Community

Contras

  • Das System erlaubt das Verschachteln von Inhalte-Containern nur in Form eines Blogs.
  • Relativ unflexible Contentpflege (erschiedene Inhalte (Bildgalerie, Text, Flash, … ) nicht auf einer Seite zusammenführbar)

Fazit
Auch hier werden alle in Teil 1 beschriebenen Anforderungen durch das System selbst, oder durch Plugins erfüllt.
Was mich allerdings stört, ist das verschiedene Inhalte (Bildgalerie, Text, Flash, … ) nicht auf einer Seite
zusammengeführt werden können.

Alle Artikel

Abgelegt unter Reviews | Eintrag kommentieren »

Die Suche nach dem neuen CMS – Teil 2 – typo3

25.02.2011 von Gebhard Nigsch

Wie schon in Teil1 beschrieben, möchte ich euch hier nun ein Paar Inputs über das open source System Typo3 geben.
Bitte berücksichtigt dabei, dass diese Analyse Typo3 nur oberflächlich behandelt.

Version: 4.4.4
Website: typo3.org

Installation
Einfach das Basis-Installationspacket mit rund 20 MB herunterladen und dieses dann installieren. Ein Installations-Wizard leitet dann bequem durch die Installation.
Danach schlägt man sich dann mit den zahlreichen Einstellungen und Plugins rum ;-)

Usability
Gleich nach dem 1. Login wird man von der Typo3-Oberfläche etwas überfordert.
Zahlreiche Einstellungsmöglichkeiten, Buttons, Reiter frames, und mehr machen die Oberfläche auf den ersten Blick sehr unübersichtlich.
Als Entwickler ist das System, sobald man die Bedienweise verstanden hat recht gut bedienbar, für die Bedienung durch den unerfahrenen
Nutzer bzw. Endkunden ist es erst nach wohl überlegtem Einstellen sämglicher Rechte geeignet.
Optimal ist die GUI für den unerfahrenen Nutzer allerdings nicht, da auch dieser sich zuerst relativ lange einarbeiten muss, um produktiv
Arbeiten zu können.

Pros

  • Sehr flexibles System -alles kann durch Plugins oder Typoscript(Template-Konfigurationssprache) angepasst werden
  • Sehr viele Plugins verfügbar
  • Grosse Entwickler-Community
  • Typo3 ist weitreichend bekannt
  • Einfach zu handhabender Pluginmanager
  • Gut dokumentiert

Contras

  • Das System ist so gross und flexibel, dass die Usability darunter leidet
  • Die Qualität der Erweiterungen variiert stark – die richtige Auswahl ist mitunter schwierig,
  • Bedarf sehr vielen Einstellungen

Fazit
Von der in Teil 1 genannten Anforderungsliste, erfüllt Tyop3 durch viele Plugins eigentlich alle Punkte.
Ich habe schon mehrere Seiten mit Typo3 aufgebaut und ich kann mich damit noch nicht so wirklich anfreunden. Dadurch dass es so flexibel ist,

bedarf es immer relativ vielen Einstellungen, um das gewünschte Ergebnis zu erlangen. Besonders bei kleineren Projekten ist das mitunter ziemlich mühsam.

Zudem beinhaltet das System sehr viele Altlasten im Code. Zum Beispiel habe ich für ein Projekt schnell ein Plugin für den SMTP-Versand
(ja Typo3 hat keine SMTP Funktionaltiät) programmiert. Musste dann aber feststellen, dass es mehrere verschieden HTML-Mail-Klassen im System gibt auf die,
die verschiedenen Plugins zugreifen.

Ich beobachte schon längere Zeit die Neuentwicklung von Typo3 5.0 (Codename phoenix). Wenn das System so realisiert werden kann, wie geplant,
dann wird es wesentlich innovativer als das jetzige. Allerdings steht noch in den Sternen wann man eine fertige Version erwarten kann.
Nnach dem aktuellen Stand, schätze ich, dass man vor mitte 2011 nicht damit rechnen sollte.

Alle Artikel

      Tags:
      Abgelegt unter Reviews | 1 Kommentar »

      Recaptcha mit Flash

      24.02.2011 von Gebhard Nigsch

      Hi,

      da meine google Suche nach einem Recaptcha-Einbau in Flash leider zu keinem Erfolg führte und wir es dennoch hinbekommen haben googles Recaptcha in Flash zu verwenden, möchte ich euch hier kurz erklären wie das geht.

      Wenn ihr das Recaptcha in PHP/HTML einfügt, wird nichts anderes als eine Anfrage an http://www.google.com/recaptcha/api/challenge?k= gemacht, wo ihr dann den Code und das Javascript zurückbekommt.
      (k = euer Public Key) In diesem Code steht auch der Challenge – Key den ihr benötigt. Das Ganze sieht dann so aus:

      var RecaptchaState = {
    site : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    challenge : '03AHJ_VusElPT1varrULQrQ7VFeBKYlf_HGngst5o5gRYVzvin-MzARA6kalG2Z1P18zQ8sQQ2QtsMIrtKaazOWF0dy1QVngmKSY_f1BDH225co5XUWF0_55Si1l15lIKCDtTcRu680XLJToc7XFlnAq0oiUgEyMPOKw',
    is_incorrect : false,
    programming_error : '',
    error_message : '',
    server : 'http://www.google.com/recaptcha/api/',
    timeout : 18000
};
 
document.write('');

      Das Bild in HTML setzt sich dann aus http://www.google.com/recaptcha/api/image?c= zusammen.
      Bei dem Parameter c muss lediglich der Challange-Key übergeben werden.

      Nun da wir das alles wissen, ist es ein Kinderspiel das Ganze auch dem Flashfile zur Verfügung zu stellen.

      Dafür erstellen wir ein PHP-Script:

      <!--?php
 
$html = file_get_contents('http://www.google.com/recaptcha/api/challenge?k='.RECAPTCHA_PUBLIC);
 
$pattern = "/(challenge : ')(.*)'/";
preg_match_all($pattern, $html, $captchaCode);
 
$xml = '<?xml version="1.0" encoding="UTF-8" ?-->';
$xml .= '';
$xml .= '';
$xml .= '<![CDATA['.$captchaCode[2][0].']]>';
$xml .= '</challenge>';
$xml .= '
	<link>';
$xml .= '<![CDATA[http://www.google.com/recaptcha/api/image?c=]]>';
$xml .= '';
$xml .= '';
$xml .= '';
 
header("Content-type: text/xml; charset=UTF-8");
echo $xml;
 
?&gt;

      So können wir nun in Flash das Bild mit link+challenge ganz einfach anfordern.
      Und schon haben wir das Captcha auch im Flashfile zur Verfügung.
      Wichtig ist, dass ihr das Captcha immer nach einer fehlerhaften Validierung neu ladet, da es nur einmal gültig ist.
      Validieren kann man es dann wie gewohnt in PHP und gibt dann per XML Feedback an Flash.

      Viel Spass

      Abgelegt unter Webdesign | Eintrag kommentieren »

      « Older Entries
      Newer Entries »