Du hast also gerade deine Webseite an die Öffentlichkeit gegeben? Dann musst du ja bloß noch ein bisschen Content produzieren und deine Follower vollspammen, damit aus dem Projekt auch was wird, oder? Naja, fast. Ein paar Dinge solltest du noch tun, wenn du wirklich erfolgreich mit deinem Projekt sein möchtest. Wenns geht, solltest du ein paar davon sogar schon vor dem Launch tun.

Erstell eine sitemap.xml und eine robots.txt Datei

Die beiden Dateien sind relativ wichtig für Suchmaschinen, und werden dir helfen, deine Seite zu verbessern.

Die sitemap.xml ist eine Standarddatei, die alle URLs deiner Webseite enthält. Vergleichbar mit einem Inhaltsverzeichnis gibt sie dem Googlebot, den wir alle so lieben, einen guten Überblick über die Aufteilung und Gesamtstruktur deiner Seite. Aha. und wie kommst du jetzt an dieses tolle Teil? Wenn du WordPress benutzt hast du Glück. Es gibt ein Plugin namens Google XML Sitemaps, das das alles für dich übernimmt. Installier und aktivier es. Fertig. Wenn du kein WordPress-User bist: Auch nicht schlimm. Geh einfach auf xml-sitemaps.com und lass dir die Datei generieren, indem du einfach deine Adresse eingibst.

Die robots.txt ist auch ziemlich super, um Suchmaschinenaktivitäten auf deiner Seite zu kontrollieren. Diese Datei enthält Informationen darüber, welche Teile deiner Webseite ein Suchmaschinencrawler besuchen soll und welche nicht.

Ich habe gerade einen interessanten Artikel über rechtliche Bedenken beim Einsatz von Facebook Plugins gelesen. Um den Tenor grundsätzlich zusammenzufassen: Das Einbinden beispielsweise eines Like-Buttons kann für Seitenbetreiber durchaus rechtlich bedenklich sein.

Allgemein gesehen, sind Datenschutzbestimmungen dazu gedacht, die Daten von Privatpersonen zu schützen. Dazu gehören eben auch das Besucherverhalten der Nutzer. inklusive besuchter Seiten, Dauer und Zeitpunkt der Besuche. Leider hat Facebook auf diese Daten Zugriff, wenn jemand auf einer Seite den Like-Button betätigt. Ich als Seitenbetreiber gebe also technisch gesehen diese Daten an Facebook weiter. Und da liegt der Hase im Pfeffer.

Glücklicherweise muss man laut einiger Juristen den Nutzer nicht vorher warnen, da das relativ realitätsfern wäre. Die Seite bestünde nur noch aus Warnhinweisen. Es genügt daher, in den Datenschutzbestimmungen darauf hinzuweisen, dass Facebook unter Umständen Zugriff auf diese Daten erlangt.

Den Originalartikel von Thomas Schwenke findet Ihr hier. Glücklicherweise gibt es in dem Artikel auch gleich einen Mustertext für die Datenschutzbestimmungen. Full-Service, Baby!

Innsbruck-Logo. Ein Gegenvorschlag

Man kann schon fast die Uhr danach stellen. Wenn Design hitzig auf Twitter diskutiert wird, dann ist es in den meisten Fällen das Logodesign von Städten. Und immer gibt es viel zu mäkeln. Mal wird ein Wettbewerb ausgeschrieben, und der Designer verdient nicht angemessen an seiner Arbeit, oder das Logo wird halbherzig und schlecht von unbekannten Agenturen umgesetzt. Das Grundproblem ist schnell gefunden: Es gibt überall fähige Designer, und Designer haben immer eine Meinung. Zusätzlich ist die eigene Stadt eine Marke, die man sich nicht aussuchen kann. man bekommt sie quasi vorgesetzt und muss damit (darin) leben. Markenbewusste Menschen kommen oft nicht so gut damit klar, wenn sie eine Marke in der Form serviert bekommen, und sie ihnen missfällt.

Im Fall von Innsbruck sieht das ähnlich aus. Hier einmal das neue Logo Innsbrucks:

Auf tt.com heißt es dazu:

Der durch ein Apostroph getrennte und über zwei Zeilen gehende rote Innsbruck-Schriftzug soll in erster Linie einen „Dialog der Kontraste – alpin und urban“ widerspiegeln, wobei der obere Teil die Berge und der untere Teil die Stadt symbolisiert. Innsbruck als Stadt bzw. gar als Hauptstadt in den Alpen soll über das Logo als zentrale Botschaft nach außen getragen werden.

Leider verfehlt das Logo die angestrebte Wirkung. Wer einen Kontrast darstellen möchte, sollte das lieber durch einen echten Kontrast tun, und nicht durch die Trennung von zwei ähnlichen Elementen durch ein Apostroph. im Logo sei noch Platz für das Stadtwappen, heißt es fürderhin. Dann muss das Wappen auch da rein. im direkten Vergleich mit dem kompletten Logo (mit Wappen) sieht die wappenlose Variante dann doch etwas trostlos aus.

Auf dem kollaborativen Microbloggingportal soup.io hat sich mittlerweile eine lose Initiative zusammengefunden, die fleißig Gegenvorschläge sammelt. Gegründet von @Luca kann man dort mehr oder minder ernst gemeinte Logovorschläge selbst posten oder per Mail einsenden. Das Vorbild für die Initiative war ein tumblelog namens wedesigngraz, dessen Initiatoren das gleiche Problem beim neuen Auftritt der Stadt Graz erkannten.

Vielleicht fehlt einfach ein wenig Zeit, bis sämtliche Drucksachen der Städte mit GR-Codes ausgestattet sind. Dann könnte man per Augmented Reality einfach ein Logo über das ungeliebte Signet blenden.

Vielleicht einfach mal was lesen?

Alle wollen gut sein in dem was sie tun. Und außerdem besser werden in dem was sie tun. Dafür wenden wir viel Zeit auf. Eines der Dinge, für die wir mit am meisten Zeit aufwenden ist unser Code. Dieser kann aus vielen Sprachen wie HTML, CSS, Javascript, PHP oder allem anderen bestehen, das wir uns zum Umsetzen unserer Projekte aussuchen.

In diesem Artikel stelle ich ein paar praktische Gewohnheiten vor, die in jedem Fall helfen können, sich sein Wissen in puncto Webwork und Coding effektiv anzueignen.

1. Konzentrier dich immer auf eine Sprache gleichzeitig

Wenn du im Web arbeitest, vielleicht Webseiten erstellst, bestehen diese aus verschiedenen Sprachen, mit denen du vertraut sein solltest. Diese können mal leichter und mal schwerer zu erlernen sein, und es kann ganz schön anstrengend werden, sie alle auf einmal lernen zu wollen. Speziell, weil sie so oft Hand in hand gehen, und man für einige Aufgaben mehrere auf einmal braucht.

Bis zu einem gewissen Punkt lässt sich das auch erst einmal nicht ändern. Aber wer schnell vorankommen möchte, sollte sich auf einen kleineren Teilbereich konzentrieren. Du willst mehr über CSS lernen? Schreib dir ein kleines HTML-Dokument und formatiere es in unterschiedlichen Weisen, indem du nur CSS einsetzt. Der CSS Zen Garden ist ein gutes Beispiel dafür, wie vielfältig das gleiche Markup mit unterschiedlichen Stylesheets aussehen kann. Du bist schon fit in CSS2? Schnapp dir die CSS3-Spezifikationen und geh ein Element nach dem anderen durch. Lerne, was sie können und nicht können, und in welchem Browser was funktioniert oder nicht.

Du willst mehr über WordPress wissen? Oder über serverseitige Bildbearbeitung? Es gibt Tonnen von Tutorials für sowas. Frag Tante Google und geh sie eins nach dem anderen durch. Nur: Mach das nicht, wenn du gleichzeitig Tutorials über HTML und CSS absolvierst. Such dir eins raus. Geh erst zum nächsten wenn du eins gemeistert hast.

2. Schreib logisch. Nutz Kommentare.

Manche sagen, dass Code zu 95% aus Logik besteht. Ich würde das unterschreiben. Eine tolle Sache an Logik ist, dass sie sich nicht verändert, wenn man sie in andere Sprachen übersetzt. Und das gilt auch für die Übersetzung zwischen menschlicher und Maschinensprache. Was bedeutet das? Wenn du Code schreiben kannst, kannst du ihn auch in menschlicher Sprache niederschreiben.

Wenn ich zum Beispiel eine Funktion schreibe, die meine Webseitenbesucher abhängig von der Tageszeit unterschiedlich begrüßt, dann schreibe ich sie zuerst in Kommentaren, anstatt mich gleich im Code zu verheddern.

[code]
Funktion: Hallo Sagen
Diese Funktion begrüßt Webseitenbesucher vormittags mit „Guten Morgen“, während
sie nachmittags und Abends „Guten Tag“ sagt
Erstelle ein Datenobjekt
Benutze das Datenobjekt, um die aktuelle Tageszeit zu erfahren
WENN die aktuelle Zeit in einen bestimmten festgelegten Zeitrahmen fällt
Gib FALSCH aus – dann ist es Vormittags
ANSONSTEN
Gib WAHR aus, dann ist es nicht Vormittags
Ende von WENN-Abfrage
Ende der Funktion
[/code]

Jetzt haben wir quasi die Grundstruktur unserer Funktion. Von hier aus fällt es viel einfacher, den tatsächlichen Code hinzuzufügen, weil wir einen guten Überblick über die Struktur haben und nicht so leicht den Überblick verlieren.

Und wenn man dann die Kommentare einfach im Dokument lässt und den Code davor schreibt, hat man eine wunderbare Dokumentation. Und Dokumentation ist immer gut, wenn man später noch mal was ändern muss. Oder wenn jemand anders in unserem Code was ändern muss.

3. Arbeite dich durch Templates, Plugins und Open Source Code

Eine der tollsten Eigenschaften am Web ist, dass es so zugänglich und offen ist. Es gibt Tonnen von Open Source-Material und Templates da draußen, und das Meiste davon ist vorbildlich dokumentiert. Nutz es. Nimm dir Templates und anderes Zeug vor, und versuch es zu verstehen. Versuch hinterher, es abzuändern oder zu verbessern. (Übertreib es nicht, manchmal kann man bestimmte Sachen gar nicht verbessern. In dem Fall: Versuch nur, sie zu verstehen.) Es wird dich voranbringen. Wenn du bloggst, nimm dir beispielsweise WordPress-Plugins vor und stochere ein bisschen im Code herum. Das ist dein Sandkasten, und du wirst etwas dabei lernen. Kleiner Tip: Nimm Sachen, die andere geschrieben haben, niemals als der Weisheit letzter Schluss hin. Andere Menschen sind auch keine Götter, und schau dir nicht irgendwelches Zeug 1:1 ab. Wir wollen uns ja nicht schlechte Programmierangewohnheiten Anderer zu Eigen machen.

Gute Bücher sind wie guter Wein. Nämlich gut.

4. Lies Bücher

Genau. Bücher. Das sind diese Dinger mit den Buchstaben, für die man allerdings Licht braucht, um sie lesen zu können. Es gibt zwar viele Informationen in Blogs und Foren da draußen, aber nichts ersetzt die Lektüre eines guten Buchs über ein bestimmtes Thema, um es komplett zu erfassen. Im Gegensatz zu Schnipseln im Web ist ein buch meist umfassend, und behandelt ein bestimmtes Thema (mehr oder weniger tief) von vorne bis hinten.

Auch wenn ein Buch meist nicht sämtliche Facetten eines Themas abbilden kann, ist es doch immer eine gute Grundlage, um sich Basiswissen anzueignen.

5. Experimentiere

Der letzte gute Ratschlag: Trau dich was, mach was beklopptes, hab Spaß dabei. Setz dich auf den Hintern und sehe und staune, was dabei alles herauskommen kann.

Ein kleines Wort zum Abschluss

In diesem Artikel stehen 5 gute Angewohnheiten. Nicht jede ist relevant für jeden, aber vielleicht findest du ja die eine oder andere, von der du denkst, dass sie dir weiterhelfen könnte. Auslernen tun wir eh nie, und als diejenigen, die im großen weiten Netz rummachen und es ausbauen und verbessern haben wir einen Weg gewählt, der lebenslanges Lernen bedeutet. Packen wir es an.

Wunderbar: Ein Archiv von allen Tweets auf dem eigenen Webspace.

Habt Ihr Euch schon mal gewünscht, Ihr hättet ein Archiv von all Euren Tweets? Jetzt gibts Abhilfe. Tweetnest ist ein von Twitter unabhängiges System, mit dem man ein Backup von seinen Tweets ziehen kann. Außerdem bietet es Möglichkeiten, Die Datenbank zu durchsuchen, sowie ein eingebautes simples Statistiktool.

Das Toll wird auf dem eigenen Webspace gehostet. Anforderungen an den Server sind PHP 5.2 oder höher mit cURL (wahlweise PHP 5.1 mit PECL JSON Modul) und mindestens MySQL 4.1. Dann kanns auch schon losgehen. Hochladen, die Konfiguration aufrufen, den benutzer laden, und die Tweets laden ist eine Sache von ungefähr 10 Minuten. Die Tweets werden über ein PHP-File geladen, wer möchte, legt sich dafür einfach einen Cronjob an. Fertig ist das Tweetarchiv.

Wer das Tool nur als persönliches Werkzeug braucht, ist damit schon bedient. Wer das Tool (wie ich) zugänglich machen möchte, schlägt sich ein Stündchen mit einer config-Datei und einer PHP-basierenden CSS-Datei rum und passt das Ganze nach eigenen Wünschen an. Hierbei gibt es auch die Möglichkeit, in der Config-Datei eine Variable einzutragen, die einige Werte (für z.B. Farben) automatisch aus dem Design der eigenen Seite auf twitter.com zieht. Fertig ist die Laube.

Als kleines Manko ist noch anzumerken, dass Tweetnest nur die letzten 3200 Tweets importieren kann. Das liegt daran, dass über die Twitter-API nur die letzten 3200 Tweets eines Benutzers verfügbar sind. Daher im Zweifelsfall lieber schon mal aufsetzen. Wer weiß, wofür das noch gut sein kann. Ich hoffe ohnehin, dass sich bei Tweetnest noch etwas tut. Ins Programm implementiert ist nämlich auch eine Schnittstelle für Extensions, und da Tweetnest komplett Open Source ist, wird es vielleicht den Einen oder die Andere geben, die nützliche Plugins schreiben werden.

Heruntergeladen werden kann das Ganze auf der Tweetnest-Website.

Wenn Ihr Tweetnest verwendet und angepasst habt, droppt mir doch einen Kommentar unten rein. Ich suche immer noch nach der Variable für den vordefinierten Text im Suchfeld Wer die lokalisierte Fassung benötigt, möge ebenfalls kurz Bescheid sagen. leider habe ich die Datumswerte noch nicht eingedeutscht. Ich muss nämlich ins Bett, und PHP-Datumsvariablen sind anstrengend.

Die meisten Textprogramme bieten eine Vielzahl an Formatierungs- und anderen Optionen. leider ist es mit diesen nicht immer so einfach, sich wirklich auf einen Text zu konzentrieren.

Beim Schreiben per Hand gibt es ein paar wichtige Einschränkungen: man hat ein begrenztes Sichtfeld auf den Text und das Verbessern und korrigieren ist unschön. Dadurch schreibt man per Hand ungleich konzentrierter als in digitaler Form. Beim Schreiben am Bildschirm ertappt man sich nur allzu häufig dabei, plötzlich kreuz und quer durchs Dokument zu korrigieren, und dabei den eigentlichen Text aus dem Auge zu verlieren.

All das ist mit Writer Geschichte. Die Oberfläche ist aufgeräumt, und von jeglichem Schnickschnack befreit., dafür gibt es in der Bildschirmtastatur jetzt ein paar neue Elemente, die fürs effektive Schreiben unabdingbar sind, und bei der iPad-Standardtastatur fehlen oder schlecht erreichbar sind. Der Clou: Der Focus-Modus. Hierbei werden die verbleibenden Elemente am oberen Bildschirmrand ausgeblendet, und die letzten drei geschriebenen Zeilen hervorgehoben. Wer sich dann nicht mehr auf das Wesentliche – den Text – konzentrieren kann, dem ist nicht mehr zu helfen.

Writer integriert den Dienst DropBox, mit dem man seine Daten bequem im Netz synchron halten und an jedem Gerät von überall bearbeiten kann. Die Schriftart im Writer ist übrigens die Nitti Light von Bold Monday. Monospaced, wunderschön.

Writer kostet 3,99 € im App Store, und ist für Menschen, die viel schreiben durchaus einen Blick wert.

Zu Zeiten, in denen man nicht-standard-Fonts lediglich über Flashgedöns auf seine Seiten bringen konnte, war das ganze für mich persönlich total irrelevant, weil ich Flash schon immer blöd fand. Nicht, dass Flash nicht toll wäre, aber wer aus dem analogen- und Papierbereich kommt, weiß, was ich meine. Es heißt ja nicht umsonst “HTML-Dokument” und nicht “HTML-Film”. Zusätzlich kam noch die Versionsproblematik hinzu. Wenn man zu Übertreibungen neigt, könnte man behaupten, dass jeder User eine andere Flash-Version auf seinem Rechner installiert hat, was zu einem riesigen Aufwand auf Seiten des Entwicklers führt. Außerdem sind solche Flash-Replacements auf den ersten Blick gar nicht als Flash-Anwendungen zu erkennen, und werden selbst von halbwegs passablen Adblockern ins digitale Nirvana verbannt, ohne dass der Durchschnittsuser auf die Idee käme, dass er den Flashschnipsel vielleicht gern sehen würde.

Da ich mich dann in letzter zeit ein wenig mit jQuery auseinandergesetzt habe, bin ich zu dem Schluss gekommen, dass Javascript doch gar nicht so ein Teufelszeug ist. Durch viele gute Einsatzgebiete von jQuery wird – denke ich – die Akzeptanz gegenüber Javascript wieder etwas größer. Jedenfalls ist der Anteil der Nutzer mit deaktiviertem Javascript relativ gering. Das gilt vielleicht nicht für ale Zielgruppen, aber ich kann den kleinen Rest getrost ignorieren. Nun also Font-Replacement mit Javascript.

Die Webfont-Dienste haben alle eins gemeinsam: Sie sind meist für kleinere Projekte völlig kostenlos. Die Subscription-Raten sind meist an die Anzahl der Pagehits pro Monat gekoppelt. ich beispielsweise habe 25.000 pagehits pro Monat frei, und zahle keinen Cent für den Dienst. Dafür habe ich Zugriff auf derzeit 7.700 Schriften, alle bequem per Name oder Attributen suchbar. Der Clou: Sogar herunterladen kann man die Fonts, damit man nicht erst am Liveprojekt basteln muss, sondern schon im Layoutprozess die später verwendeten Fonts verwenden kann. Sehr klasse.

Die Einrichtung eines Accounts beim webfont-Dienst von Fonts.com hat ungefähr eine Minute gedauert, dann hing ich schon in der Fontbibliothek, und konnte meine Schnitte auswählen. Dies passiert kinderleicht per Button und jeweils Projektbasiert. Die Projektanzahl ist übrigens nicht limitiert, lediglich halt die monatlichen Klickzahlen. Auch einen Banner muss man beim kostenlosen Account (jedenfalls bis Ende des Jahres) nicht setzen. Würde mich aber auch nicht stören. Habe ich meine Schnitte gewählt, kann ich das “Stylesheet” bearbeiten. Hier lege ich die CSS-Klassen an, die später auf meiner Seite die neuen Schriftarten enthalten, und wähle aus einem Dropdown-menü den Schnitt für die Klasse aus.

Fertig. Im letzten Schritt bekomme ich einen Codeschnipsel, den ich in den Kopfbereich meiner Seite einbaue, und fertig ist die Laube. Will ich später die Schnitte Ändern, mache ich das ganz bequem im Backend des Dienstes, ohne mein eigenes Stylesheet anzufassen. In meinem Fall sind übrigens die Artikelüberschriften, die Überschriften in der Sidebar sowie die Navigationslinks in Neue Helvetica 95 Black und die Datumsangaben in Litterbox gesetzt.

Bis es jedenfalls vernünftige Möglichkeiten gibt, Webfonts so richtig in Echt einzubinden und zu verwenden, sind die Fontdienste eine ganz passable Alternative. Allerdings gilt auch hier: Für Fließtext und große Mengen an Schrift sind wohl sämtliche Dienste etwas zu unperformant.

Wie auch einige fellow tweeps habe ich heute das Twitterbuch im Briefkasten gefunden. Zuerst hab ich mich ein wenig gewundert. Als ich dann das Logo der Twitterlesung auf dem Cover entdeckt habe, habe ich es als mein Ansichtsexemplar erkannt. Damals, als die Twitterlesung hier in München stattfand, ist dort ein Tweet von mir gelesen worden, und der hat es jetzt bis ins Buch geschafft. Nettes feature also (Damit ist das Kontingent für schlechte Wortspiele für heute auch aufgebraucht).

Zuerst hab ich mich (auch auf Twitter) ein wenig abfällig über das -- naja -- offizielle Video dazu geäußert.

www.youtube.com/watch?v=TW8BcszVoyQ

Darüber werde ich jetzt mal keine weiteren Worte verlieren. Weil kein Absender und kein gar nichts auf oder in dem Paket war, nutze ich die Gelegenheit, um der/den Person/en, die es mir geschickt haben, zu danken. Mal sehen, wie das Buch ankommt. Auf den ersten Blick wirkt es ein wenig wie eine Compilation der Twitterlesungs-Inhalte. Es wäre dann also eher was für Sammler die in der Materie stecken, als für Neulinge die sich einen Hintern voll Infos erhoffen.

Anscheinend ist das Buch momentan schlecht verfügbar, und auch bei Amazon nicht sofort lieferbar. mehr Info gibt’s bei André auf’m Blog.

Tag für Tag starren wir auf die altbekannten hellblauen Zeichen, melden uns mit zittrigen Fingern bei Twitter an. Oft noch vor dem ersten Kaffee morgens wahrgenommen, ist uns die Schrift Pico von Masayuki Sato sehr vertraut.

Jetzt gibt’s die Pico als kostenlosen Download, zu finden auf dieser Seite. Zwar ist sie kein Meisterwerk (Umlaute und ähnliche Spirenzchen gibts gar nicht erst), aber als simple Display für Zwischendurch ist sie allemal den Download wert. Gibts dort in allen gängigen Formaten.

Typolovers hergehört. Der Webfontday 2010, veranstaltet von der Typographischen Gesellschaft München e.V. findet am 13. 11.2010 in München statt. Bei diesem Symposium, das sich ausschließlich mit Webfonts beschäftigt, soll der Dialog zwischen Webworkern, Designern und Distributoren gefördert werden.

Zusammen soll erörtert werden, wie in Zukunft Gestaltung im Web aussieht, und wie man halb umgesetzte und noch junge Standards in der Zukunft sinnvoll nutzen kann.

Wie ist das jetzt mit Schriften im Web? Kann ich endlich die Hausschrift einbinden? Wie mache ich das, und worauf muss ich dabei achten? Welche Auswirkungen haben die verschiedenen Betriebssysteme bzw. Browser auf die Schriftdarstellung am Bildschirm? Wie ist das überhaupt mit der Lesbarkeit von Schriften am Screen?

Als Referenten kommen u.a.:

• Jörg Schweinsberg (Linotype)
• Ralf Hermann (OpenType.info)
• Gerrit van Aaken (praegnanz.de)
• Ivo Gabrowitsch (FontFont)
• Marc Tobias Kunisch (mindgarden.de, Google)

Die komplette Liste der Vorträge, Dozenten sowie Info zur Anmeldegebühr und der Veranstaltung an sich gibts unter www.webfontday.de.

www.youtube.com/watch?v=JIb0t-Q1B7U

Tools:

Link (afri.de/media)

Molekulare Küche in warm & kalt. Ausgeflippt, wissenschaftlich, hausmännisch. Kochveranstaltungen für Firmen und im Privatbereich.

Print & Screen.

Tools: