Einführung in HTML5 (4): WordPress-Themes

Einführung in HTML5In dieser Artikelserie möchte ich Euch einen Überblick über die Funktionsweise von HTML5 geben. In der ersten Folge habe ich erklärt, worum es bei HTML5 grundsätzlich geht. In der zweiten Folge habe ich den Aufbau eines Blog-Artikels betrachtet und in der dritten Folge war die Unterstützung der Browser das Thema. Zum Abschluss stelle ich einige Themes vor, die HTML5 nutzen.

A. Fertige HTML5 Themes

Mit diesen Themes kann man gleich loslegen. Sie sind relativ neu auf dem Markt und „können“ alle HTML5. Weiterlesen →

Einführung in HTML5 (3): Die Browser

Einführung in HTML5In dieser Artikelserie möchte ich Euch einen Überblick über die Funktionsweise von HTML5 geben. In der ersten Folge habe ich erklärt, worum es bei HTML5 grundsätzlich geht. In der zweiten Folge habe ich den Aufbau eines Blog-Artikels betrachtet und in der dritten Folge geht es darum, wie die Browser mit HTML5 umgehen.

Die gute Nachricht: Alle modernen Browser unterstützen das Format. Firefox, Opera, Safari und Chrome sind mit im Boot. Eine Ausnahme macht der Internet-Explorer. Bis inklusive der Version 8 ist der Internet Explorer aussen vor, mit der Version 9 wird es ein bisschen besser, aber noch nicht perfekt.

Aber es gibt Workarounds über Javascript, mit denen man den Internet Explorer dazu bringen kann, HTML5 zu verstehen.
Weiterlesen →

Usability-Probleme im TYPO3 Backend

In diesem Artikel möchte ich mir anschauen, an welchen Stellen die Benutzer-Oberfläche im Redaktionssystem TYPO3 es seinen Nutzern schwer macht, sich zurechtzufinden. Und was man tun könnte, um diese Probleme zu lösen.
Dabei habe ich die technisch eher unerfahrenen End-Anwender im Sinn, also Redakteure, die Inhalte einstellen und pflegen.

1. Information Overload

Müssen sich viele Elemente einen relativ engen Raum teilen, dann erzeugt das Verwirrung. Für eine Nutzeroberfläche bedeutet das, sie wird unübersichtlich.
Die Folge: Der Anwender findet erstens nicht, was er sucht und zweitens: er macht Fehler. Weil ihm die Orientierung schwer fällt, klickt er früher oder später auf gut Glück irgendetwas an. Weiterlesen →

Einführung in HTML5 (2) – Aufbau Blogpost

Einführung in HTML5In dieser Artikelserie möchte ich Euch einen Überblick über die Funktionsweise von HTML5 geben. In der ersten Folge habe ich erklärt, worum es bei HTML5 grundsätzlich geht. In der zweiten Folge schaue ich mir den Aufbau eines Blog-Artikels (Blogpost) an.

HTML5 bringt eine Reihe von neuen Elementen mit. Eine Navigations-Leiste wird beispielsweise nicht mehr von einem <div> umschlossen, sondern sie bekommt ihr eigenes Tag: <nav>. Dasselbe gilt für den Header einer Seite und für eine Reihe von anderen Bereichen.

Der Aufbau eines Blog-Artikels

Diese Abschnitte in einem Blog-Artikel werden mit neuen Tags strukturiert:

  • Die Überschrift
  • Das Erscheinungs-Datum
  • Den eigentlichen Artikeltext
  • Anmerkungen, Verweise, Metaangaben

Weiterlesen →

Einführung in HTML5 (1): Seitenlayout

Einführung in HTML5In dieser Artikelserie möchte ich Euch einen Überblick über die Funktionsweise von HTML5 geben. In der ersten Folge erkläre ich, worum es bei HTML5 grundsätzlich geht und wie man damit ein Seitenlayout klarer als bisher gliedern kann.

Wozu eine neue HTML-Version?

Eigentlich kommen wir mit HTML4 ja ganz gut zurecht, wieso also schon wieder etwas Neues?

HTML5 wurde aus der Praxis heraus entwickelt und orientiert sich daran, wie Webseiten tatsächlich funktionieren bzw. wie sie genutzt werden. Die neuen Funktionen sollen „echte“ Probleme lösen, und alle, die mit dem Web als Werkzeug arbeiten, in ihrer Arbeit unterstützen. Die „reine Lehre“ steht ganz bewusst nicht im Mittelpunkt. Auch wollen die Entwickler von HTML5 das Rad nicht neu erfinden. Was gut funktioniert, bleibt erhalten. HTML5 ist deshalb auch kompatibel mit älteren HTML-Versionen.

Am bekanntesten sind wahrscheinlich die Tags, mit denen man Audio- und Video-Dateien einbetten kann. Mit dem HTML5-Element <video> kann man einen Film so in die Website einbauen, dass die Besucher kein PlugIn mehr brauchen, um das Video anzuschauen. Ich freue mich jedenfalls über jedes in HTML5 eingebettete Video, das ich mit meinem iPad anschauen kann.

Aber HTML5 kann noch viel mehr als Videos abspielen. Weiterlesen →

Zeiterfassung mit Mite

Mite ist ein webbasiertes Zeiterfassungstool. Nachdem ich alles mögliche schon ausprobiert habe, von diversen selbstgebastelten Lösungen bis zum Agenturverwaltungsmonster mit Buchhaltungsanbindung, bin ich vor einiger Zeit hier gelandet.

Bei Mite habe ich mich gleich zu Hause gefühlt. Mir gefallen einfach minimalistische Lösungen, die sich ganz auf das konzentrieren, was ich als Anwender damit machen will.
Alles, was stört, ist aus dem Weg geräumt. Man hat alle wichtigen Informationen stets im Blick, gleichzeitig ist die Oberfläche schön aufgeräumt. „Funktionalität ohne KlimBim“ wie es so nett auf der Website von Mite heisst.

Mite ist ganz klar was fürs Auge, die Gestaltung der Oberfläche erfreut das Designerherz. Aber das Interface ist nicht nur hübsch, sondern äußerst genau durchdacht. Man findet alles was man braucht mit ein oder zwei Klicks. Kein Herumsuchen, keine verlorenen Einträge, kein Haareraufen bei der Zusammenstellung der Arbeitszeiten für die Rechnung. Trotzdem sind alle wichtige Funktionalitäten da und die Auswertungsmöglichkeiten lassen keine Wünsche offen.

Wer nicht über den Browser arbeiten möchte, kann sich übrigens mit dem Programm Fluid im Handumdrehen eine Desktop-App zaubern.

Preis: 5€ im Monat

System: WebApp

http://mite.yo.lk

iA Writer für iPad

Schreiben auf dem iPad ist nicht jedermanns Sache. Die Bildschirm-Tastatur fühlt sich seltsam an, das Suchen nach wichtigen Satzzeichen (Bindestrich, Doppelpunkt, Klammern) ist umständlich und das Korrigieren einzelner Buchstaben im Text ist ein rechtes Gefummel. So ein richtiger Schreibfluss will sich nicht einstellen.

Die gute Nachricht: There’s an app for that. Sie heisst iA Writer und ist ein echtes Kunststück. Auf den ersten Blick sieht es so aus, als hätten die Macher einfach nur alles weggelassen. Nur die Textanzeige und die Tastatur sind übrig geblieben. Aber hinter der simplen Oberfläche steckt jede Menge Funktionalität.

Nur ist diese Funktionalität von vollkommen anderer Qualität als man es von Schreibprogrammen kennt.
Nichts ist wie gewohnt und trotzdem war es noch nie so leicht einen Text zu schreiben. Wie das geht? Ausprobieren! Wer ein iPad hat damit Texte schreibt, der sollte das nicht ohne iA Writer tun.

Den iA Writer gibt es inzwischen auch als Programm für den Mac.

Preis: 3,99€
System: iOs, Mac OS

www.iawriter.com

MojoMotor: Anleitung Design einbauen

Ein Design in MojoMotor einzubauen ist sehr einfach. Man kann eine HTML-Vorlage und das dazugehörige Stylesheet über eine Importfunktion in das CMS einlesen. Das passiert gleichzeitig mit der Installation von MojoMotor auf dem Server.
Wie das geht, möchte ich hier kurz erklären.

1. HTML-Vorlagen und CSS vorbereiten

MojoMotor arbeitet mit so genannten Regionen (regions).

  • Als Page Regions werden Bereiche im Layout markiert, die auf jeder Seite (page) anders sind.
  • Global Regions sind Bereiche, die auf Seiten, die dasselbe Layout benutzen, immer gleich bleiben.
  • Super Global Regions werden in einem eigenen Layout gespeichert. Sie können dann in jedes andere Layout eingebettet werden. Weiterlesen →