Spätestens jetzt sollten sich alle Gedanken darüber machen, was sie in der Vergangenheit möglicherweise bewusst oder unbewusst der einen oder anderen Plattform im Internet anvertraut haben. Denn die für uns als MitspielerInnen relevante Frage ist: Welchen Anteil habe ich persönlich an diesem Spiel? Was weiß denn Google, was weiß das Internet über mich, was ausgenutzt werden könnte?

Hier ein paar Tipps:

- Eine Google-Suche (ohne Login) nach dem eigenen Namen (Anführungszeichen nicht vergessen, also „Vorname Nachname“) ergibt teilweise erstaunliche Ergebnisse über sich selbst, aber auch über mögliche NamensvetterInnen

- Eine Suche in einer Personensuchmaschine (www.yasni.de , www.123people.de  o.ä.) stellt bereits viele der Informationen übersichtlich geordnet nach Informationstypen zusammen

- Wer sich viel in Sozialen Medien bewegt, sollte sich mal in www.socialmention.com suchen

- Wer ein Google-Konto besitzt, weil er/sie einen persönlichen Google-Dienst verwendet, sollte sich anmelden und einen Einblick darüber verschaffen, was Google alles weiß:  unter Kontoeinstellungen – Profil und Datenschutz können im Dashboard alle die Informationen und Dienste einzeln angeschaut werden, die genutzt werden.

Ich bilde mir ein, eigentlich sehr sparsam mit meinen Daten umzugehen. Heute habe ich mir angesehen, was ich im Laufe der Jahre Google über mich mitgeteilt habe und jetzt werde ich stutzig:

• Hier finde ich infos zu meinem Smartphone mit Gerätetyp, Anmeldezeitpunkt, genutzten Apps und Angaben zur letzten Nutzung
• Hier sehe ich, dass ich GoogleDocs verwende, wenn ich per Smartphone einen Email-Anhang speichere
• Eine längst vergessene GoogleGroup und 2 gespeicherte GoogleMaps-Adressen werden angezeigt
• Ich erfahre, dass auch meine GoogleNews-Suchen im Webprotokoll enthalten sind
• Ich erfahre, welche Websuchen ich in eingeloggtem Zustand in den letzten Monaten durchgeführt habe und auf welchen der Ergebnisseiten ich länger als 3 Sekunden gelesen habe
• Welche iGoogle-Gadgets ich verwendet und wie viele Kontakte ich habe (erfreulicherweise wenige, denn mein GoogleMail-Adressbuch habe ich vor einigen Wochen gelöscht)
• Ich erfahre, dass mein Profilfoto in Google+ in einem Picasa-Album gespeichert ist und finde dabei noch zwei weitere Alben, die leer sind und ich die so wenigstens löschen kann
• Unter Soziale Verbindungen und Inhalte werde ich aufgefordert, mein Google-Konto mit anderen Profilen zu verbinden, um noch mehr Informationen auszutauschen
• Ich erfahre, dass ich vor langer Zeit die GoogleWebmaster-Tools für meine Website angemeldet habe
• Und ich kann einen youtube-Kanal einrichten, wobei meine Mailadresse, mein Geschlecht und mein Alter öffentlich angezeigt werden, was ich nicht verhindern kann (zumindest habe ich das nicht gefunden)

Das dürfte noch ziemlich wenig sein, denn es ist schon lange meine Angewohnheit, mich unmittelbar nach der Nutzung eines Dienstes wie z.B. einem Mailkonto o.ä. sofort wieder auszuloggen, bevor ich was anderes mache, selbst wenn es bei der gleichen Firma ist.

Google führt die Daten nun zusammen, um eingeloggten NutzerInnen personalisierte Ergebnisse in den Suchanfragen zu liefern, auf der Grundlage der Kenntnisse über Interessen (aus dem Webprotokoll), der Kontakte (aus Mail und Google+) und des Kaufverhaltens. Die Idee dahinter: Die Vernetzung der Kontakte wird gestärkt, wenn auf diese Weise die von den „Freunden“ präferierten Webseiten in meiner eigenen Trefferliste oben gezeigt werden – und Anzeigen über AdWords können noch gezielter meine angeblichen Bedürfnisse befriedigen. Ergebnisse gefiltert auf der Basis dessen, was Google und meine Freunde über mich wissen. Subjektive Ergebnisse eben.

Und wenn ich das nicht will? Dann muss ich mich – bitte schön – nach dem Lesen in Google+ eben wieder ausloggen und meine Cookies löschen, bevor ich eine neue Suche vornehme – oder auf eine andere Suchmaschine umsteige, z.B. www.ixquick.com . Dieser Metacrawler schreibt wenigstens keine Nutzungsdaten mit.…

NAS-Speicher auch für 7170

Die Extra-Software für den USB-Fernanschluss kann man sich jetzt sparen. Die Festplatte kann über Heimnetz -> Speicher (NAS) aktiviert werden. Allerdings kann die Fritz!Box 7170 nur mit einer Platte im FAT/FAT32-Format umgehen. Aber dann ist die Platte nach dem Anschluss an den USB-Port auch automatisch eingetragen und man kann die beiden möglichen Funktionen einrichten:

“Speicher für Benutzer aus dem Internet freigeben”

aktiviert den FTP-Zugriff und legt einen Nutzer in der Form ftp://ftpuser@xx.xx.xxx.xxx an. Damit kann man sowohl im Heimnetzwerk als auch übers Internet auf die gespeicherten Daten zugreifen. Deshalb muss auch zwingend im Reiter “Sicherheit” ein Passwort vergeben werden. Dann setzt man noch die Rechte für “lesen und schreiben” oder “nur lesen” und kann dann unter “Aktivierungen” das gewünschte Verzeichnis für die Freigabe auf der externen Platte auswählen. tecchannel.de bietet dazu einen ausführlichen Workshop an. Der ist zwar für die Versionen 7270 und höher geschrieben, lässt sich aber auch mit 7170 nachvollziehen.

FTP-Zugriff ist dann zwar möglich, aber beim normalen DSL-Nutzer ändert sich die IP-Adresse spätestens mit der nächtlichen Zwangstrennung. Intern könnte man die jeweilige IP noch auslesen, aus dem Internet dürfte das schwierig sein Abhilfe schafft eine dynamische DNS. Über die Box lassen sich die nötigen Einstellungen direkt vornehmen: Internet -> Freigaben -> Dynamic DNS. Dort sind bereits mögliche Anbieter eingetragen. Einige davon bieten den Service sogar kostenfrei an.

Wer die Platte nur im Heimnetz nutzen will, kann auf eine dynamische DNS verzichten und die Platte auch als Netzlaufwerk am Rechner einbinden. Dann kann jeder Nutzer im Netzwerk so auf die Daten zugreifen, wie bei normalen Freigaben.

“Musikbox aktiv”

ist die zweite Option, die einfach nur aktiviert werden muss. Dann stehen die Sound- und Videodateien der externen Platte direkt zur Verfügung und lassen sich über ein passendes Abspielgerät oder über den Windows Media-Player abspielen. Bei mir gibt es ein kleines Problem mit der Aktualisierung der Media-Dateien nach dem Upload. Es klappt nur, wenn ich die Aktivierung der Musikbox in der Bedienoberfläche deaktiviere, die Einstellung speichere und sie dann erneut aktiviere. Das liegt vermutlich daran, dass der Fritz!Box 7170 die Funktion zur Indizierung der Daten fehlt, die die neueren Modelle haben. Aber damit kann ich leben .

Für Android gibt es zudem im Market die FRITZ!App Media, die – obwohl noch Labor-Version – bei mir problemlos auf dem Smartphone und dem Tablet läuft.

Anrufbeantworter

Den Anrufbeantworter habe ich inzwischen auch wieder eingerichtet. Leider funktioniert die Option, die aufgezeichneten Anrufe allein als Sounddatei per Mail zu verschicken nicht (mehr). Der AB wird dann offenbar gar nicht erst angelegt. Also werden meine Gespräch jetzt ebenfalls auf dem USB-Speicher in einem eigenen Verzeichnis abgelegt. Für die Einrichtung bietet AVM eine ausführliche Anleitung.

Schön, dass meine Kunden mir wieder Nachrichten hinterlassen können und noch schöner, dass ich ein neues Spielzeug, die NAS-Funktion habe . Demnächst traue ich mich dann auch nochmal an die Einrichtung einer festen DNS-Adresse ran. Meine DynsDNS existiert inzwischen leider nicht mehr. Und irgendwann steht dann mal der Kauf eines Nachfolgemodells an. Denn 7170 hat leider nur einen USB1.1-Anschluss.

Wir sind hier im Winterurlaub im Allgäu mit Freunden und warten seit Tagen auf die angekündigten Schneemassen. Leider hat der Dauerregen lediglich den Schnee der letzten Wochen aufgefressen. Also leider is nich viel mit Outdooraktivität und wenn, dann sind wir klatschenass. So machen wir es uns halt in der Ferienwohnung gemütlich mit Lesen, Essen und Trinken und ich eben mit meinem Laptop .

Nun muss ich mir allerdings sagen lassen, dass man soooo angeblich nicht entspannen könne, dass ich wohl internetsüchtig sei und doch einfach mal die Kiste auslassen soll. Mmhh, klar könnt ich schon, will ich aber nicht. Und ja, vielleicht bin ich ja süchtig, aber ein Laster braucht der Mensch doch, die Nikotinsucht ist schließlich überwunden und ein schönes Gläschen Rotwein darf es trotzdem hin und wieder mal sein. Ja, und eben das Internet, wenn auch noch nicht mit einem schicken Tablet wie Gaby, aber das kann ja noch werden.

Keiner der Sportsfreunde honorierte allerdings, dass mein Laptop und ich maßgeblich zu wichtigen, planerischen Entscheidungen beitragen konnten, wie beispielsweise:

• Dank zeitlich exakter Wettervorhersagen auf http://wetterstationen.meteomedia.de/ konnten unsere Outdooraktivitäten so geplant werden, dass wir immer vor dem allergrößten Unwetter wieder zurück waren.
• Besonders die Herren erfreuen sich an der abwechslungsreichen kulinarischen Gastronomie, die problemlos über Google zu finden und zu reservieren war.
• Über Facebook kam ein prima Fernsehtipp rein und obwohl fernsehen im Urlaub ja eher tabu ist, war der Film Nanga Parbat doch von allgemeinem Interesse, zeigt er doch, dass es wettertechnisch bei weitem noch extremer geht … dankbar war man dann auch, als über Facebook-Comment der Hinweis auf die Verschiebung der Sendezeit kam.
• Und nicht zuletzt hat’s dann auch meinem Patenkind (mittlerweile ein Kopf größer ) in den Fingern gejuckt und er wurde von der Neugier gepackt  doch endlich wieder zu erfahren, was es Aktuelles in seiner Facebookwelt gibt – kein Problem, die Patentante hat ja den Laptop dabei.

Daher plädiere ich dafür, man lasse uns doch bitte unser Spielzeug! Auch wenn das nicht jeder versteht, wir können tatsächlich ganz herrlich entspannen, wenn wir uns mal ohne Zeitdruck im Internet und beispielsweise in unseren sozialen Netzwerken bewegen dürfen. Und ich bitte um Toleranz, nicht um Mitleid – denn ja, wir sind ganz normal!!!

Zugegeben, als ich mit dem Gedanken spielte, mir einen Tablet-PC zu kaufen, dachte ich schon: ach, was für ein feines Gadget. Wieder was zum Spielen für die Omma. Nach dem Kauf sah die Sache jedoch auf einmal völlig anders aus. Das Ding mutierte zu meinem ständigen Begleiter und zum vollwertigen Ersatz für das Netbook, welches zuvor schon hier und da das Notebook abgelöst hatte.
Vorher brauchte ich immer eine zusätzliche Tasche, um die Gerätschaften zu verstauen. Das fällt nun weg, weil das Tablet in den Handtaschen-Rucksack passt. Wozu ist so ein Teil denn nun im Berufsalltag, egal, ob freiberuflich oder angestellt, von Nutzen?

• E-Mails abrufen, lesen, beantworten
• Kontakte immer mit sich führen – ich weiß ja, viele von Euch pflegen ihre Kontakte via XING
• auf Konferenzen mitschreiben und Markieren bzw. gleich verschlagworten (natürlich mit Evernote)
• Bei Bedarf die Notizen oder Dateien aus der Cloud oder vom Tablet ausdrucken via Motoprint – es gibt aber auch andere Apps für die Ansteuerung von WLAN-Druckern
• Blogartikel schreiben mit der WordPress-App, die inzwischen sehr komfortabel geworden ist – Joooid läßt da leider noch zu wünschen übrig
• per FTP Dateien verschieben
• per VPN Kunden aus der Not helfen
• per Skype und Talk kommunizieren
• Vorträge / Workshops organisieren mittels HDMI-Schnittstelle – vorausgesetzt, es existiert ein Beamer mit HDMI-Anschluß
• soziale Netzwerke betreuen via TweetCaster und Xing-App (letztere ist nicht so der Bringer)

Inzwischen werde ich gefragt, worauf beim Kauf eines Tablet-PCs zu achten ist. Mein absoluter Hingucker ist die HDMI-Schnittstelle. Damit kann ich mir die Schlepperei vom Notebook sparen und habe eigentlich immer alles dabei – vorausgesetzt, das Tablet ist vorhanden und die benötigten Daten in der Cloud. Das HDMI-Kabel nimmt keinen großen Platz in der Tasche ein und liefert ein tolles Ergebnis. Auch für den Spaß mit dem Tablet sehe ich die HDMI-Schnittstelle als eine wunderbare Ergänzung. Man kann damit natürlich auch die Tabletinhalte auf den Fernseher bringen.

Die Samsung-Tablets haben ein super Display, aber leider keine HDMI-Schnittstelle –Adapter ist erhältlich, naja … . Wer also keine Absichten in Bezug auf das Halten von Vorträgen oder Workshops hat, ist damit sicher besser bedient. Was mich jedoch stutzig macht, ist, dass die ganze Palette von Tablets bis hin zu den ganz preiswerten, den HDMI-Anschluß mitbringen. Mir ist klar, dass diese Geschichte noch nicht sehr verbreitet ist, zumal ich im Saturn zum Beispiel völlig verstört angeschaut wurde, als ich nach dem HDMI-Kabel gefragt habe. Sobald das aber einmal genutzt worden ist, wird es niemand mehr missen wollen. (noch besser wäre natürlich eine kabellose Verbindung zum Beamer oder Fernseher …)

Bemerkenswert beim XOOM, welches ich mir gegönnt habe, ist, dass ein zu 100% aufgeladener Akku eine Konferenz, also einen vollen Tag, überlebt. Das ist ja leider bei den Smartphones nicht der Fall.

Die lange Laufzeit des Akkus des Tablets hat auch zur Folge, dass ich zu Konferenzen nicht noch mehr Kabel mitführen muss – hier genügt das Ladekabel für das Smartphone oder ein externer Akku.

Wer überlegt, ein Netbook anzuschaffen, könnte ja noch mal darüber nachdenken, ob ein Tablet-PC nicht einfach mehr Komfort ÚND Spaß bringt.

Piwik ist auch leicht zu installieren. Der Tracking-Code ist schnell eingebaut. Und schon habt Ihr Eure Besucher (ganz dezent und rechtskonform, aber informativ) im Blick. Den großen Überblick mit der Auswertung der Daten bietet das Dashboard, aber man kann auch einzelne Besuche(r) betrachten und detailliert nachverfolgen, was auf der Website vor sich geht.

Die Seite Besucher >> Besucher-Log zeigt das Protokoll der neuesten Website-Besuche. Schauen wir hier mal Spalte für Spalte durch, was für Informationen wir erhalten. Das macht natürlich nur Spass, wenn wir täglich eine überschaubare Anzahl Besucher haben. Gerade bei kleineren Unternehmen, die die Resonanz ihrer Website besser abschätzen möchten, ist das Besucher-Log ein wetvolles Tool.

Die Spalte Datum

Sie zeigt recht spartanisch:

• Das Besuchsdatum mit Uhrzeit
• Die anonymisierte IP
• Den Provider, falls er aus der IP erschlossen werden konnte.

Die Spalte Besucher

Diese Spalte ist besonders für den Entwickler interessant, da sie detailliert auf Betriebssystem, Browser und installierte Plugins eingeht. Auch ein iPad kann man hier ausmachen. Und hoffentlich festellen, dass der IE älterer Bauart kaum noch vertreten ist. Wobei: Das geht in der Übersicht natürlich besser.

Diese Daten werden angezeigt:

• Das Herkunftsland (wird aus dem Standort des Providers erschlossen)
• Der Browser (die Version wird bei Mouseover angezeigt)
• Installierte Plugins wie Flash, Silverlight, Java, PDF, Quicktime und Realplayer
• Das Betriebssystem (Version und Bildschirmauflösung erscheinen bei Mouseover)
• Angezeigt wird auch, ob ein Besucher ein wiederkehrender Besucher ist.

Die Spalte Herkunftsseite

Wenn wir wissen wollen, wie ein Besucher auf die Website gekommen ist, werden wir hier fündig.

• Per Direktzugriff (Eingabe der URL in die Adresszeile des Browsers)
• oder von einer anderen Website (nur die (Sub-)Domain wird angezeigt, der vollständige Link erscheint bei Mouseover),
• über eine Suchmaschine (mit Suchbegriff, über den die Einstiegsseite gefunden wurde).

Hier wird es wieder interessant: Bei Google wird in normale Suche und Bildersuche unterschieden. Für Google wird auch die Position der gefundenen Seite in den Suchergebnissen, wie sie sich dem Besucher präsentiert hat, angegeben. Das interessiert uns natürlich, weil sich daraus einerseits unsere aktuelle Position auch zu nicht so stark optimierten Suchbegriffen erkennen läßt. Andererseits sehen wir, wie weit Suchmaschinennutzer tatsächlich in den SERPs scrollen oder blättern, wenn sie etwas suchen. In dem Zusammenhang lohnt sich der Blick in die nächste Spalte.

Die Spalte Aktionen

Hier erscheint die Anzahl der durchgeführten Aktionen (Seiten anschauen, Dateien herunterladen) und die damit vom Besucher zugebrachte Zeit. Darunter werden die besuchten Seiten bzw. heruntergeladenen Dateien, aber auch angeklickte Links zu anderen Seiten (ausgehende Links) aufgelistet.

Im Klartext: Wenn ein Besucher mit bestimmten Suchbegriffen über eine Suchmaschine auf unsere Seite gekommen ist, hat er 

• durch den Klick auf das Suchergebnis bewiesen, dass der Linktext (unser Title) und die Beschreibung der Seite – soweit sie angezeigt wurde – zu seinen Suchbegriffen gepasst hat. Die so erreichte Einstiegsseite ist als passend optimiert.
• durch das Verlassen der ersten aufgesuchten Seite gezeigt, dass er nicht gefunden hat, was er suchte. Hier könne Schwachstellen liegen.
• durch einen längeren Aufenthalt gezeigt, dass er sich am richtigen Ort befand und unser Website-Angebot angenommen hat.
• durch seinen Weg auf der Website gezeigt, welche Themen ihn (wahrscheinlich im Zusammenhang mit seiner Suche) sonst interessieren.

Diese Erkenntnisse können wir sowohl für Präsentation und Erweiterung unseres Angebot als auch für die Optimierung unserer Website nutzen.

Was ich aus den durchweg spannenden und meist auch unterhaltsam präsentierten Vorträgen mitnehmen konnte:

• HTML5 ist je nach Verständnis etwas Verschiedenes. Durch seine Entstehungsgeschichte und Interpretation ist es ein Bündel an Spezifikationen und Techniken, die im Browser angewendet werden (Peter Kröner hat das in mehreren Kreisen dargestellt).
• HTML5 ersetzt nicht HTML 4.01. Es ermöglicht aber den Schritt von der Website als Dokument zur Webapplikation. 
• HTML5-Anwendungen sind aufregend und verbreiten Desktop-Gefühl. Was mich noch mehr beeindruckt: Jenseits von Canvas-Spielereien sind Localstorage und die neuen Formularfelder sehr praktisch – wenn sie denn einmal auf allen Browsern funktionieren.
• HTML5 kann Flash bei der Spieleprogrammierung und für Videos (wahrscheinlich) nicht ersetzen.
• HTML5 ist nicht fertig und wird dauernd aktualisiert.

Mehr Benutzbarkeit durch HTML5

Formulare und Responsive Design sind für mich die Themen, bei denen HTML5 (in seiner weitesten Definition) am meisten punkten kann. Die Vorführung eines Formulars mit HTML5, WAI-ARIA und einem Hauch Javascript durch Marco Zehe zeigte eindrucksvoll, wie viel besser benutzbar im Gegensatz zu konventionellen Formularen ist, wenn man assistive Technologien nutzt. Informationen ber den geforderten Inhalt (z.B. eine E-Mail-Adresse) werden vor der Texteingabe bekannt gegeben, Fehler bei der Eingabe sofort erkannt.

Benutze ich zur Auszeichnung der Formularfelder HTML5-Input-Typen, präsentiert mir der mobile Browser die auf den Feldinhalt optimierte Tastatur (also z.B. mit einem leicht erreichbaren @, wenn eine E-Mail-Adresse eingegeben werden soll).

CSS3 – was kann man schon benutzen?

Sven Wolfermann führte in einer praxisnahen, themenbedingt grenzwertig bunten Präsentation vor, welche CSS3-Eigenschaften heute wirklich schon (auch ohne Vendor-Prefix) verwendet werden können. Leider reichte die Zeit nicht mehr, um CSS-Erweiterungen und Frameworks wie SASS und Compass näher vorzustellen.

Frameworks und Bibliotheken spielten in einigen der Vorträge eine Rolle. Es lohnt sich, hier viele zu testen und das für einen selbst und die Anwendung, die man gerade erstellt, geeignete Bündel zusammenzustellen.

Und Javascript?

Was man gerne vergißt, wenn man mehr auf Serverseite entwickelt: Ohne Javascript geht nichts mehr und muss es auch nicht. Javascript ist auch für barrierefreie Websites nicht mehr der böse Feind. Mathias Schäfer führte vor, wie die Schwächen von Javascript (keine Objektorientierung, in der ersten Planung unorganisiert) durch strukturierte Programmierung ausgeglichen und die Scriptsprache selbst für komplexe Anwendungen jenseits von jQuery genutzt werden kann.

Eine Überraschung bot der Vortrag von Sebastian Golasch: Er stellte Node.js, einen Javascript-Server vor. Der Vorteil von Node.js soll die gute Skalierbarkeit und hohe Geschwindigkeit sein, da die Kommunikation asynchron erfolgt.

Fazit: Rundum war der 28. Multimediatreff anregend und gelungen (incl. obligatorische Pizzaschlacht). Nächstes Jahr soll es wegen der regen Nachfrage eine Neuauflage  mit denselben Themen, aber anderen Vorträgen geben.

Links zur Tagung:

• 28. Multimediatreff – Das Programm
• Patrick H. Laucke, Schöne neue Welt von HTML5
• Sven Wolfermann, CSS3 & Responsive Web
• Matthias Schäfer, Javascript: Von einfachen Scripten zu komplexen Anwendungen
• Marco Zehe, HTML5 und WAI-ARIA, richtig modern barrierefrei entwickeln

Scoial media, die Marketingrakete 2011 hat manchmal ihre Tücken. Nicht jeder ist sich im Klaren darüber, wo seine posts landen oder wie und wo er sie am besten platziert. Gleichzeitig ändern sich Oberfläche und Funktionen der Netzwerke permantent.

Auch wir standen hier beim neu aufsetzen unseres Blogs vor der Frage, wie funktioniert eigentlich der Google+-Button? Wenn man ihn anklickt hat man zwar ein Plus vergeben und irgendwie registriert Google das ja auch bekanntlich. Aber wie kann man es im eigenen Google-Stream teilen? Klar URL reinkopieren, aber dann bräuchte man ja keine social media icons. Das muss doch gehen ….. und siehe da, wir haben es rausgefunden:

Man muss erst einmal „plussen“, also den weißen Google+-Button anklicken. Und schwupps ist er geworden Blau und wenn man den jetzt blauen Goolge+-Button anklickt kann man auch „sharen“.

Also denkt daran, erst müsst ihr plussen, dann könnt ihr sharen und sehr gerne dürft ihr natürlich auch liken.

Befindet sich das Login jedoch auf einer separaten Seite, sieht auch der eingeloggte Besucher gewöhnlich auch nur den Menüpunkt “Login”, der ihn dorthin führt. Besser ist es, je nach Status des Website-Benutzers diesen Menüpunkt adäquat zu benennen oder ihm gleich einen Button zum direkten Logout zur Verfügung zu stellen.

Lösung für Drupal

Der Pfad zum Login-Formular lautet user/login. Legt z.B. im Hauptmenü einen Menüeintrag mit diesem Pfad an und gebt als Linktitel “Login” ein. Die Reihenfolge setzt Ihr z.B. auf 5 (oder einen Wert Eurer Wahl, der die Position des Menüpunkts definiert).

Legt im selben Menü einen Menüpunkt mit diesen Daten an:

• Pfad: Drupal 6: logout, Drupal 7: user/logout
• Linktitel: Logout
• Reihenfolge: 5 (oder der Wert, den Ihr für den Menüpunkt Login gewählt habt)

Durch dieselbe Position in Menüreihenfolge ersetzen sich die Links je nach Status des Besuchers.

Mehr Info gibt es im Drupalcenter.

Lösung für TYPO3

TYPO3 ist anders strukturiert. Hier führen Menülinks auf Seiten, in denen die Inhalte (z.B. das Login-Formular) eingebunden werden. Wir müssen also das Typoscript des betroffenen Menüs anpassen. Unser Menü ist in temp.navi definiert, die Login/Logout-Seite ist uid 123:

[usergroup = *]  
temp.navi.1.NO.stdWrap.override.cObject = TEXT
temp.navi.1.NO.stdWrap.override.cObject {
  # Quick and dirty
  value = Logout
  # Feld subtitle oder anderes Feld benutzen, wenn die Seite mehrsprachig ist
  field = subtitle
  if.value.field = uid
  if.equals = 123
}
[global]

Wichtig: Conditions müssen immer auf der obersten Template-Ebene stehen, also nicht in geschweiften Klammern.

Eine andere Lösung findet sich hier. Der Benutzer wird dabei direkt ausgeloggt (von mir nicht getestet).

So klappt es auch mit dem Website-Besucher!

Kapitel 1 führt durch grundsätzliche Überlegungen bei der Erstellung einer Website: Konzept, Design und die Vorgaben, die das Internet macht.

Kapitel 2 berührt die Geschichte des barrierefreien Webdesigns und spricht die wichtigen Themen an: Wie werden Webinhalte von Behinderten wahrgenommen, mit welchen Hilfsmitteln greifen sie auf Computer und Web zu und wie berücksichtigt der Webdesigner diese Vorgaben. An der Stelle wären ein paar mehr Links von Nutzen gewesen, mit denen sich Anfänger in die Materie einarbeiten können.

Kapitel 3 fasst die wichtigsten Konzepte von HTML und CSS zusammen, Kapitel 4 erklärt, wie PHP-Code in Joomla-Templates übersichtlich eingebunden wird – eine praktische Hilfe für alle, die sich lieber mit dem Frontend beschäftigen.

Kapitel 5 stellt in einem Gastbeitrag von Peter Kröner das Javascript-Framework MooTools vor. MooTools ist das in Joomla vorrangig eingesetzte Framework. Wer z.B. schon JQuery benutzt, wird sich anhand dieser Einführung und der Linkliste zügig einarbeiten können.

In Kapitel 6 erfährt der Leser, welche Tools ihn im Browser bei der Entwicklung unterstützen.

Im zweiten Teil des Buches geht es zur Sache: Joomla-Templates und ihre Bestandteile. Wer (wie ich) meist mit den Template-Strukturen anderer Content Management Systeme zu tun hat und eher in Typoscript, den WordPress Template Tags und Drupals Templates Engine(s) zuhause ist, freut sich besonders an der detaillierten Beschreibung, wie die Template-Bestandteile bei Joomla in einander greifen. Jedes CMS hat so seine eigene Template-Philosophie. Die Entwicklerin des barrierefreien Beez-Templates für Joomla erklärt hier am Beispiel ihres Produkts, wie sich die Ausgabe der Inhalte auf Barrierefreiheit optimieren läßt. Wer die Anfänge tabellenfreier Content-Ausgabe in Joomla beobachtet hat, freut sich, dass jetzt die Ausgabe ab Werk ohne Tabellen erfolgt.

Kapitel 7 führt in die Verwaltung von Templates mit dem Template-Manager ein, Kapitel 8 erklärt die Dateistruktur eines Joomla-Templates. Die folgenden Kapitel bearbeiten alle wichtigen Template-Dateien und führen an konkreten Beispielen vor,

• wie die templateDetails.xml als Steuerungsdatei für ein Template dient
• wie Template-Bestandteile mehrsprachig umgesetzt werden können
• wie Templates konfiguriert werden bzw. konfigurierbar gemacht werden können
• welche Aufgabe Modulpositonen haben und wie sie befüllt werden
• wie man die Standardausgabe überschreibt
• uam.

Im dritten Teil entwickelt die Autorin beispielhaft ein neues Template auf der Basis von beez_20, einem der aktuellen Standardtemplates. Ein Anhang listet alle CSS-Klassen, die bei der Ausgabe Verwendung finden auf.

Fazit: Das Buch ist besonders für Anfänger eine große Hilfe, da alle Schritt sehr detailliert erklärt sind. Aber auch CMS-Umsteiger finden hier einen schnellen Zugang zur Struktur von Joomla-Templates und können manche Falle vermeiden.

Der Link zum Buch

TYPO3-Menüs – ein Thema ohne Ende. Hier stelle ich ein zweiteiliges, valides und suchmaschinenfreundliches Listen-Menü vor: Die erste Ebene erscheint horizontal über dem Content, die 2. und alle folgenden Ebenen liegen in der linken Spalte. Als Überschrift ist dem Menü jeweils der zugehörige Menüpunkt der obersten Ebene vorangestellt. So sieht es aus:

1. Das horizontale Hauptmenü

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

temp.navi1 = HMENU
temp.navi1 {
entryLevel = 1
    1 = TMENU
    1 { 
        wrap = <ul id="navi1"> | </ul>
        noBlur = 1
        NO {
            # option split
            allWrap = <li class="first">|</li>|*|<li>|</li> |*|<li class="last">|</li>
            # ids zur separaten Ansprache jedes Links
            ATagParams = id="page{field:uid}"
            ATagParams.insertData = 1
            # Link-Title
            ATagTitle.field = subtitle // title    
        }
        CUR = 1
        CUR {
            # aktiver Menüpunkt nicht verlinkt
            doNotLinkIt = 1
            allStdWrap.dataWrap = <li class="first active"><span id="page{field:uid}">|</span></li>|*|<li class="active"><span id="page{field:uid}">|</span></li> |*|<li class="last active"><span id="page{field:uid}">|</span></li> 
        }
        ACT = 1
        ACT {
            allStdWrap.dataWrap = <li class="first active">|</li>|*|<li class="active">|</li> |*|<li class="last active">|</li>
            ATagParams = id="page{field:uid}"
            ATagParams.insertData = 1
            ATagTitle.field = subtitle // title  
        }
        }
    }

Eine unspektakuläre, aber valide Liste, die sich mit CSS als horizontaler Balken stylen läßt. Die aktuelle Seite wird – eine Konvention zur besseren Zugänglichkeit der Website – nicht verlinkt und statt dessen mit einem ‹span› umgeben, das sich mit CSS ansprechen läßt. Erstes und letztes list item sind mit optionSplit ausgesondert, so dass die enthaltenen Menüpunkte ebenfalls getrennt gestyled werden können – z.B. ohne rechten Border für den letzten Menüpunkt.

Noch mehr Individualität: Jeder Link kann individuell über eine id angesprochen werden:

id=”page{field:uid}” liest die uid der Seite aus und erzeugt eine valide id. So kann jeder Menüpunkt einen eigenen Hintergrund bekommen.

Suchmaschinen und Benutzer freuen sich gleichermaßen über einen erklärenden Title zum Link – besonders, wenn der Menüpunkt sehr kreativ getextet wurde und man gerne mehr über den Inhalt der Zielseite wüßte.

2. Das vertikale Untermenü

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

temp.navileft = HMENU
temp.navileft {
    stdWrap.required = 1
    stdWrap.prepend = TEXT
    stdWrap.prepend {
    wrap = <h3 class="navititle">|</h3>
    data = leveltitle:2
    }
 
    entryLevel = 2
    1 = TMENU
    1 { 
        wrap = <ul class="nav"> | </ul>
        noBlur = 1
        NO {
            wrapItemAndSub = <li class="first">|</li>|*|<li>|</li> |*|<li class="last">|</li>
            ATagTitle.field = subtitle // title  
        }
        CUR = 1
        CUR {
            doNotLinkIt = 1
            allWrap = <li class="first active"><span>|</span>|*|<li class="active"><span>|</span> |*|<li class="last active"><span>|</span>
            wrapItemAndSub = |</li>
        }
        ACT = 1
        ACT {
            wrapItemAndSub = <li class="first">|</li>|*|<li>|</li> |*|<li class="last">|</li>
            ATagTitle.field = subtitle // title  
        }
     }
    2 = TMENU
    2 < .1
    2.wrap = <ul> | </ul>
    }

Vor das Untermenü wird mit data = leveltitle:2 der übergeordnete Menüpunkt der obersten Ebene als Überschrift eingeblendet. Die Ausgabe des Menüs erfolgt nur, wenn es Unterpunkte einer Seite des Hauptmenüs gibt.

Da hier mehrere Ebenen dargestellt werden können, ergibt sich für den Menüpunkt der aktiven Seite eine ndere Lösung als für die übrigen Links:

allWrap = <li class=”first active”><span>|</span>
wrapItemAndSub = |</li>

Der nicht verlinkte Text wird zweimal gewrappt, damit der span nur um Text und nicht auch um das Untermenü geht.