Immer mehr Leute nutzen statt ihrem Computer lieber ihr Smartphone um im Internet Informationen zu finden. Je zugänglicher diese Informationen für den Besucher sind, desto höher ist die Chance, dass er die Seite nicht sofort wieder verlässt. Dazu gehört auch, dass er nicht erst den Text per pinch und zoom vergrößern muss, sondern dass dieser sich an das Display anpasst. Eine mögliche Lösung dafür ist ein Design, dass sich der gewünschten Breite des Geräts anpasst: responsive web design.

Responsive Web Design in Aktion

Media Queries

Wenn man mit einem modernen Browser auf MarcTV surft und man die Größe des Browserfensters verändert, dann ordnen sich die Elemente bezüglich ihrer Größe und Position neu an. Dies funktioniert grundsätzlich über die CSS3 media queries. Diese erlauben das Schreiben von Bedingungen für das Erkennen der Pixelbreite des Browserfensters direkt im CSS Code:

@media screen and (max-width: 320px) {
  #wrapper{
    width: 320px;
  }
}

Media Queries haben den Vorteil, dass man sie direkt im Stylesheet einsetzen kann und dass sie nicht mal Javascript benötigen. Und sie werden von allen modernen und vor allem von iOS und Android Browser voll unterstützt. Apple empfiehlt den Einsatz von Conditional CSS sogar explizit in ihrer Dokumentation.

Code to standards, not devices

via Anne van Kesteren

Mobile Geräte und selbst Personal Computer entwickeln sich permanent bezüglich ihrer technischen Parameter wie Auflösung und Pixeldichte weiter. Dazu kommen noch Geräte wie der Amazon Kindle oder die Boxee Box, die bezüglicher dieser Eigenschaften über ihre eigenen speziellen Parameter verfügen. Sie haben aber eine Sache gemein: Die Bildschirmauflösung.

Das ist zwar kein Web Standard aber immerhin benutzt man dabei nicht User Agent um das Gerät zu identifizieren.

Welche Auflösungen?

Dazu muss man wissen, dass z.B. ein iPhone im vertikalen Portraitmodus 320px Breite ausgibt und im horizontalen Landscapemodus 480px. Das liegt an der hohen Pixeldichte des iPhone und vergleichbaren Geräten. Deswegen wird einfach die reale Pixelbreite halbiert.

Bezogen auf Android, iOS und MacOS bin ich auf folgende media queries gekommen. Diese funktionieren auch für die von mir getesteten Androidtelefone sehr gut.

@media screen and (max-width: 479px) {
  /* iPhone Portrait width: 320px */
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  /* iPhone Landscape width: 480px */
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* iPad Portrait */
}
@media screen and (max-width: 1024px) {
  /* < iPad Portrait */
}
@media screen and (min-width: 1260px) {
  /* big screens */
}

Wie man sieht, definiert dies Blöcke von CSS Anweisungen für verschiedenen Auflösungen. Darin kann man dann jeweils seine Styles für die entsprechende Auflösung anpassen. Nehmen wir an, ein Wrapper Element wäre vorher so definiert gewesen:

#wrapper{
  width: 960px;
}

Dann könnte man es so für die jeweilige Auflösung anpassen, in dem man den Style für Geräte mit einer Auflösung von max. 479px überschreibt:

@media screen and (max-width: 479px) {
  html #wrapper{
    width: 320px;
  }
}

CSS vereinfachen

Wenn man so an die Sache heran geht, dann merkt man schnell, dass man am Ende redundanten Code vor sich hat. Für mein Theme habe ich einen ähnlichen Ansatz gewählt, wie bei meiner Inspirationsquelle informationarchitects.ch: Man arbeitet so weit es geht ohne explizite  Pixelangaben für alle Elemente, die man verändern will sondern nutzt den Wrapper, an dem sich dann alle Elemente ausrichten.

Dafür muss aber leider die im IMG Tag angegeben Pixelbreiten entfernt werden, damit man die Bilder mit CSS mit 100% in der Breite entsprechend justieren kann. Das habe ich über ein einfaches jQuery Script gelöst. Die vollständige CSS Datei mit den css media queries ist deswegen recht überschaubar. Leider gibt es noch einige Sonderfälle durch Plugins weswegen ich dort teilweise Dinge per ! important überschreiben musste.

Gleiches HTML für alle

Man sollte sich auch bewusst machen, dass das  HTML der Webseite immer gleich bleibt und nur die CSS Styles die Elemente beeinflussen. Dies steht im harten Kontrast zu einer eigenen HTML Version, die über den User Agent ausgeliefert wird. Deswegen sollte man sehr viel Zeit darauf verwenden, das HTML zu optimieren und sich gut überlegen, was man über die Template Engine in das DOM reinläd.

Definition des Viewports

<meta
name="viewport"
content="user-scalable=0, width=device-width, initial-scale=1, maximum-scale=1">
</meta>

Der viewport Tag mit den entsprechenden Attributen gehört in den head-Bereich der Webseite. Er steuert wie Geräte wie das iPhone und Android die Webseite initial darstellen. Bei allen anderen Browsern zeigt er keine Wirkung weswegen ich ihn permanent im Template einsetze.

• user-scalable=0
  Der Benutzer kann nicht mehr Zoomen
• width=device-width
  Die Breite des Viewports wird auf die interne Auflösung des Gerätes eingestellt. Dies muss nicht zwangsläufig die native Auflösung des Displays sein.
• initial-scale=1
  Der Zoom wird auf den Standardwert gesetzt.
• maximum-scale=1
  Der höchstmögliche Zoom wird auf den Standardwert gesetzt.

Schriftgröße in Prozentangaben

font-size: 100% ist nicht zu groß sondern entspricht egal auf welcher Plattform der Schriftgröße, die er Browser als normalgroß ansieht. Dies ist auf einem Mobiltelefon oder E-Reader unter Umständen in Pixel umgerechnet etwas völlig anderes als auf einem PC. Die Schriftgröße liegt hier im Blog ist je nach Auflösung sogar über 100% und wird bei über 1240px sogar auf 120% angehoben. So kann man auf auch großen PC Monitoren oder der Boxee Box die Texte angenehm lesen.

Linearisierung

Auf meinen Übersichtsseiten sind die Artikelbilder gekachelt in einem Raster angeordnet. Auf einem kleinen Display funktioniert das natürlich nicht mehr. Deswegen habe ich dort und an vielen anderen Stellen das Layout linearisiert. Alle Elemente laufen auf den schmalen Versionen deswegen untereinander. Das gilt auch für Label für z.B. das Kommentarformular und die Artikeltools unter den Artikeln. Meistens musste ich nur ein float: right gegen ein float: none: austauschen.

Javascript

Manche Javascript-Features machen auf der kleinen Versionen keinen Sinn. Dazu gehören u.a. Scripte wie colorbox, für die ich eine Ausnahme einbauen musste:

if($(window).width() > 1023){
/* load colorbox(); and so stuff for non-mobile devices */
}

Fazit

Während man bei einer echten mobilen Ansicht in den Templates kleinere Bilder laden kann, so ist dies über den Ansatz über CSS nicht möglich. Im Blog werden immer die 960px breiten Teaserbilder geladen. Egal ob sie auf dem iPhone auf 320px skaliert werden oder nicht. Dadurch müssen deutlich mehr Daten übertragen werden als nötig. Eine Alternative für WordPress ist WP Touch, dass eine komplett eigene Oberfläche für Gesten von Touchdisplays läd.

Dafür ist die Technik ist verhältnismäßig einfach umzusetzen und zu pflegen. Bevor man eine eigene mobile Version der Seite mit eigenem Template erstellt, kann man diesen Task recht bequem im Frontend erledigen. Außerdem muss man so keine zwei Templates oder gar Plattformen pflegen. Es kommt natürlich auch stark auf die Größe und Anforderungen an die Website an. Gleichzeitig bleibt das Look-and-Feel der Webseite erhalten.

Der Hauptgrund für die Implementierung hier im Blog war aber, dass ich mittlerweile selber mehr auf dem iPhone surfe als auf einem normalen PC. Das mag vielleicht zuerst absurd klingen aber in meiner Freizeit habe ich eher die Zeit und ein iPhone bei mir um schnell Dinge auf Wikipeda nachzugucken oder auch mal einen Artikel aus meinem Feedreader oder Social Networks zu lesen. Und je mehr ich mit dem Mobiltelefon surfe, desto wohler fühle ich mich auf Seiten, die für mobile Geräte angepasst sind. Besonders bei Elementen, die eine Interaktion von mir erwarten wie Formulare. Deswegen musste eine konsistente mobile Version her. Deswegen konnte ich mir nichts einfacheres Vorstellen, als per CSS ein paar Media Queries dafür zu benutzen.

• Mehr Media Queries Beispiele – mediaqueri.es
• CSS3 media queries – webdesignerwall.com
• Responsive Web Design – A List Apart
• Kritische Auseinandersetzung mit den media queries – codecandies.de

Der Google Reader hat seit gestern für viele Leute sein wichtigstes Feature verloren: Sharing. Damit war es möglich, seine Feeds oder einzelne Seiten über ein Bookmarklet seinen Google Reader Abonnenten zur Verfügung zu stellen und vor allem selber andere Leute zu abonnieren. Während bei Facebook und teilweise auch Twitter eher lustige Katzenvideos geteilt wurden, war der Google Reader für mich fast ausschließlich ein Pool des Wissens über relevante Themen, die direkt oder indirekt mit meinem Beruf zu tun haben. Nun muss Ersatz her: Instapaper.

Was ist Instapaper?

Instapaper speichert per Bookmarklet Texte auf Webseiten in seiner Bibliothek ab. Das ist so ähnlich wie Lesezeichen aber die Texte werden, ähnlich wie beim Google Reader, formatneutral abgespeichert. Beim Google Reader lag das an der Quelle: Feeds. Bei Instapaper wird der Text aus der Webseite extrahiert. Ich habe Instapaper aber vor allem deshalb genutzt, weil es Abend alle Artikel, die man tagsüber dem System hinzugefügt hat, in eine MOBI-Kindle Datei kompiliert und automatisch auf meinen Kindle geschickt hat. Diese Funktion versteckt sich unter Extras ganz unten auf der Seite.

Sharing in Instapaper

Was bisher aber keine Beachtung fand, ist die Friends-Funktion unter Browse → Find more Friends using Instapaper. Wenn nun ein Instapaper-Freund einen Artikel liked, dann taucht dieser in der Liste Liked by Friends unter Browse auf. Meine E-Mail Adresse bei Instapaper lautet übrigens marc.toensing@gmail.com. Man kann dort auch Social Networks wie Twitter oder Facebook einbinden und darüber die Freundesliste erweitern.

Leider ist das Tool aktuell natürlich nur für Texte so richtig sinnvoll. Videos und andere Inhalte können so weit ich weiß nicht so einfach über Instapaper geteilt werden.

Wir sehen uns bei Instapaper.

Le roi est mort, vive le roi
instapaper.com

via netzwertig

In der letzten Zeit habe ich oft diesen Satz gehört: »Ich kaufe mir ein iPad, dann kann ich endlich eBooks lesen.« Ja, das ist auch generell eine richtige Feststellung aber wer wirklich lesen will, der sollte lieber zum Kindle greifen.

eReader: iPad oder Kindle?

Ich besitze selber ein iPad und einen Kindle. Das iPad wird hauptsächlich bei uns dafür genutzt, ab und zu Webseiten, YouTube oder Bilder zu betrachten. Den aktuellen Kindle Keyboard habe ich schon ausführlich hier im Blog vorgestellt. Dieser ersetzt praktisch sämtliche Bücher und ist mein stetiger Begleiter.

Ich habe mich entschieden, dieses Video zu veröffentlichen, damit ich nicht immer wieder jedem Menschen auf dieser Welt die Unterschiede eines Tablet-PCs und eines e-Ink-Reader erklären muss. Mehr Informationen zum Amazon Kindle gibt es meinem großen Kindle 3 Artikel mit zahlreichen Videos.

Preisvergleich

• Apple iPad 2 – unter 800 EUR – amazon.de
• Amazon Kindle Keyboard unter 150 EUR – amazon.de

Steve Jobs ist gestern gestorben. Ich habe heute überlegt, ob ich auch etwas dazu schreiben soll. Heute meinte einer meiner Kollegen im Büro:

Steve ist doch nur ein guter Geschäftsmann gewesen.

Wenn ich mir aber rückblickend angucke, was für einen Einfluss seine Produkte auf mein Leben hatten, dann muss ich einfach etwas dazu schreiben.

Hass

Es fing nicht gut an mit Apple und meiner Wenigkeit: Zuerst habe ich mich über die geringe Auflösung des iPod Video lustig gemacht. Danach habe ich mir einen iPod Classic gekauft und den Artikel geschrieben, der unter Themen, die nichts mit Videospielen zu tun haben, absolut gesehen die meisten Hits generiert hat und dies nach wie vor tut: iPod ohne iTunes mit WinAmp. Kurz danach wechselte Apple ihre CPU Technologie auf x86 und somit auf Intel-Prozessoren. Der Werbesport suggerierte damals, dass mein Nicht-Mac-PC sich nicht über seine Intel CPU freuen dürfte worauf ich mich etwas aufgeregt habe: Unsere Intel-PCs sind also scheisse. Als Strafe ging erstmal die Festplatte von meinem iPod Classic kaputt worauf ich erstmal einen Hassartikel auf den Apple Support geschrieben habe. Ich hatte von Apple Produkten absolut die Schnauze voll und habe jeden für bekloppt er klärt, der sich diese überteurten Produkte antut.

Defloration

Meine Defloration (Danke Ben für den Begriff) erfolgte dann erst im Jahre 2008 durch mein erstes MacBook Pro von Apple. Zuerst habe ich das fehlende Maximieren der Fenster bemängelt, dann die Position des »@« auf der Tastatur und zu guter Letzt wollte ich auch noch WinAmp zurück weil iTunes mir nicht gefallen wollte. Windows Vista habe ich damals selbstverständlich sofort parallel zu MacOSX mit BootCamp installiert. Denn so ganz trauen konnte ich diesem MacOSX ja irgendwie nicht.

Konsum

Heute besitze ich ein iPhone, ein iPad, nutze im Büro ein MacBook Pro mit SSD und schreibe diese Zeilen auf dem MacBook Air meiner Freundin. Ich freue mich wie ein kleines Kind, wenn ich per AirPlay Videos von meinem iPhone auf meiner Boxee Box wiedergeben kann. Und ich bin der Meinung, dass Apple und somit auch Steve Jobs so viel für die Rolle des Computers getan hat wie Google für das Internet. Dank dem Mac gehören Dinge wie “RegCleaner”, “Defragmentierung”, “Treiber” oder “DLL Datei XY wurde nicht gefunden” der Vergangenheit an. Ich habe mich an den Might Finder und Spotlight (Achtung, Ohrwurm!) genau so gewöhnt wie an iTunes und Time Maschine. Es macht einfach alles so verdammt viel Sinn, wenn man erstmal diese Produkte längere Zeit benutzt hat.

Und im Prinzip wurde einfach alles sinnlose am Computer weggelassen und man fragt sich, warum PCs nicht schon immer schon so funktioniert haben. Gerade wenn der Personal Computer kein Spielzeug mehr ist sondern ein Werkzeug, auf das man jeden Tag angewiesen, um die Arbeit zu erledigen, für die man bezahlt wird. Das lustige ist, dass ich diesen Prozess bei vielen Leuten beobachten konnte: Man lehnt so lange Apple Produkte ab – bis man eines hat. Nur gute Computermäuse konnte Steve meiner Ansicht nach nicht bauen.

Perfektion

Apple hat außerdem dafür gesorgt, dass das Internet in unserer Hosentasche benutzbar geworden ist. Dazu haben sie ein Interfaces erschaffen, die einfach funktionieren und dabei eine ganz eigene Ästhetik besitzen. Ich bin mittlerweile der Auffassung, dass ich zu den wenigen Personen gehöre, die auf einen Blick 30 von 60 Bildern pro Sekunde unterscheiden können und das Flimmern von Plasmabildschirmen wahrnehmen. Bei Apple müssen aber auch Personen arbeiten, die dies können denn nur dort hat man von Anfang an erkannt, dass Interfaces butterweich und ohne Ruckeln bedienbar sein müssen. Dank ihm wurde endlich Flash als Browsertechnologie nicht nur in Frage gestellt sondern endlich fast abgeschafft. Der Perfektionismus bis ins Detail und die wiederkehrenden Aha!-Effekte beeindruckt mich immer wieder tief und hat dazu geführt, dass ich gerne in diese Geräte investiere weil ich keine Lust mehr habe, mich über Probleme zu ärgern, die ich ohne sie nicht gehabt hätte. Das deckt sich in etwa aus den selben Gründen mit meiner Überzeugung, dass Konsolen die besseren Spielgeräte sind: Hard- und Software passen dort zusammen und bilden eine Einheit.

Vielleicht ist es gar kein Zufall, dass ich nicht nur das Design meines Blogs immer weiter reduziert sondern gleich mein ganzes Leben verschlichtert habe.

via @DerBullo

Steve Jobs

Und dann setzt man sich plötzlich mit der Person hinter dem ganzen Zirkus außeinander: Steve Jobs. Er schraube in der Garage an seiner Vision von einem besseren Computer und wurde damit sehr erfolgreich. Dann hat ihn der Aufsichtsrat seiner eigenen Firma gekündigt worauf hin er ganz von vorne anfangen musste. Er hat dann Pixar mit aufgebaut und mit der Firma NeXT an seiner Vorstellung von einem guten Betriebssystem weitergemacht. Die wurde dann von Apple wieder aufgekauft und er war wieder CEO von Apple Inc. Dann konnte ihn am 6.10. 2011 nur noch seine Krankheit stoppen: Krebs. Den besten Nachruf für den Tod von Steve Jobs kann eigentlich nur eine Person geben: Steve Jobs selbst:

Steve Jobs Stanford Commencement Speech 2005

Danke Steve. Vor allem für deine Alternativen.

Wie ihr vielleicht wisst, bin ich ein großer Freund der Boxee Box, dem Internet Mediaplayer für den Fernseher. Die hat eigentlich eine mitgelieferte Fernbedienung mit eingebauter Tastatur auf der Rückseite und die Möglichkeit, sein iPhone über Wifi als Mausersatz zu nutzen. Aber sie hat einen ärgerlichen Konstruktionsfehler: Die Beschriftung der Tasten ist in dunkelblau auf den schwarzen Tasten gedruckt. Ein Umstand, der in einem abgedunkelten Raum ziemlich nervig ist. Die Lösung: Das Rii Mini Keyboard mit eingebautem Touchpad.

Dabei ist die kleine, kabellose Tastatur nicht mal viel breiter oder schwerer als das Original und hat sogar eine Hintergrundbeleuchtung. Der eingebaute Akku kann über einen Mini-USB Stecker ausgeladen werden und dank USB-Adapter funktioniert die “Rii” an praktisch jedem Gerät, an dem man normalerweise auch eine normale USB-Tastatur und/oder Maus anschließen könnte. Dazu gehört z.B. die XBOX 360 genau so wie ein MacBook. Auf letzterem funktionieren sogar die Mutlimediatasten für die Steuerung von iTunes. Und für Leute, die noch Windows-Computer nutzen,  hat sie sogar einen Strg+Alt+Entf-Shortcut auf einer der Funktionstasten. Und einen, zumindest für mich, absolut nutzlosen Laserpointer. Praktisch ist die kleine Klappe auf der Rückseite, um den USB-Receiver darin zu verstecken, wenn er mal nicht benötigt wird.

Die Rii Mini Tastatur ist wirklich schönes und für den angemessenen Preis erstaunlich gut verarbeitetes Produkt, wenn man auf der Suche nach einer vollwertigen Tastatur mit Touchpad ist. Ein wichtiger Hinweis noch am Schluss für alle Boxee Box Benutzer: Die linke Maustaste funktioniert im Boxee Browser über die “Enter”-Taste der Tastatur. Hat mich eine Ewigkeit gekostet, das rauszufinden.

Links

• Rii Mini Funk Tastatur für unter 50 EUR – amazon.de

Ich bin wütend und enttäuscht. Und zwar von Google Plus und der Integration von Google Picasa. Ich habe alle meine privaten Bilder in Googles Bilderdienst Picasa hochgeladen. Das ist äußerst praktisch und hat offline und online beeindruckende Features wie z.B. das halb-automatische Markieren von Personen. Doch nun schickt Google allen dort frisch markierten Personen in meinen privaten Alben, die einen Google Plus Account besitzen, E-Mails. Dort steht drin, dass sie auf diesen Fotos markiert worden sind – mit samt den Bildern! Das Schlimmste ist: Die Standard-Einstellung für das automatische Akzeptieren dieses Vorgangs ist “my circles” was bei Google Plus so viel bedeutet wie “Alle meine Freunde”. Das Resultat: In den Profilen der betroffenen Personen tauchen unter “Photos” meine privaten Bilder auf.

Im Gegensatz zu Facebook hat Google einen Vorteil: Sie haben schon bestehende Soziale Netzwerke: YouTube, Picasa und den Google Reader. Es liegt natürlich nahe, diese irgendwie mit Google Plus zu verheiraten. Aber wenn ich in einem dieser Dienste der Meinung bin, dass diese Inhalte ausschließlich privat sind und es nicht klar ist, dass diese Dienste nun praktisch Teil von Google Plus sind, dann ist das eine echte Frechheit. Es ist auch auf den ersten Blick überhaupt nicht ersichtlich, wer diese Bilder nun sehen kann. Und selbst wenn nur die markierte Person und ich das Bild in dem Profil sehen können, dann ist das bei einem privaten Picasa-Album genau eine zu viel.

Ich stelle mir gerade folgendes Szenario vor: Ich lade ein als privat deklariertes Video in YouTube hoch. Google ist so freundlich und markiert nun meine Freunde aus meinem Adressbuch in diesem Video. Das ist für mich erst mal absolut ok. Aber nehmen wir an, das Google Plus Team beschließt nächste Woche beim Meeting, dass man mehr Benutzer in Google Plus bräuchte und da nehmen sie einfach mal die YouTube Community. Das Ende vom Lied könnte sein, dass meine markierten Personen plötzlich in den Google Plus Profilen der markierten Personen auftauchen. Etwas ähnliches ist nämlich vor kurzem mit der Video-Funktion von Picasa passiert: Plötzlich tauchen in meinem Google Plus Profil meine Picasa Videos auf.

Das Schloss ist bei Picasa-Alben scheinbar nur Dekoration

An dieser Aktion ist natürlich am Ende genau eine Person schuld: Ich selbst. Ironischerweise habe ich letztens noch gesagt:

Die Sache mit den Social Networks ist doch ganz einfach: Man stellt einfach keine Inhalte ins Internet, die man am nächsten Tag nicht auch als Aufmacher bei Bild.de sehen möchte.

Klassisches Eigentor. Wie sollte ich ahnen, dass Google Picasa nun plötzlich zu Google Plus gehört. Noch dümmer fühle ich mich nach dem Desaster mit Google Buzz. Da hat Google damals nämlich auch einfach beschlossen, dass alle meine Kontakte nun auch plötzlich meine Freunde in Google Buzz sind und natürlich alles Lesen können, was ich dort schreibe.

Ich bleibe dabei: Google kann alles – außer Social Networks. Und ich habe meine Lektion gelernt. Allen betroffenen von dieser Sache: Es tut mir aufrichtig Leid und ich ziehe Konsequenzen daraus. Bei Facebook rechnet man wenigstens permanent damit, dass dort irgendwas bezüglich dem Schutz der eigenen Daten schief geht. Aber bei Google gehe ich da mit mehr Vertrauen ran – und das war mein Fehler.

Links

• Wie verlässt man Google Plus? - nichewp.com
• Tagging is Sharing in Google Plus?! – google.com/support

Ich werde öfters gefragt, ob ich Tipps zum iPhone habe und wie ich meine Google Dienste auf dem Gerät benutze. Und damit ich das nicht immer wieder erzählen muss, gibt es hier nun die Antworten schwarz auf weiß. Vielleicht ist ja für den ein oder anderen etwas dabei, was er vorher noch nicht gewusst hat.

Der Knopf am Headset

Neben der Lautstärke und dem Annehmen von Anrufen kann der Knopf einiges mehr als man im ersten Moment denken mag. Manch einem ist z.B. gar nicht klar, dass es neben dem Lauter und Leiser-Knöpfen in der Mitte auch noch einen Knopf gibt. Man kann damit nicht nur Gespräche annehmen sondern auch die iPod-Funktion fernsteuern.

Besonders faszinierend sind dabei Sprachkommandos wie play album ‘Fat of the Land’ oder play playlist ‘best of eurodance’. Wenn man eine Person anrufen möchte, nimmt man den Spitznamen was meistens der Vorname ist: call Olga mobile. “mobile” steht dabei für die Art der Rufnummer.

GoogleMail als WebApp

Das iPhone besitzt einen eingebauten E-Mail Client. Spätestens seit GoogleMail gibt es in meinen Augen jedoch keinen Grund mehr Privat oder im Büro die GoogleMail-Webseite nicht zu benutzen. Für das iPhone bietet Google eine für das Gerät angepasste Seite unter m.gmail.com an. Die Vorteile gegenüber der Mail-App liegen auf der Hand: Suchfunktion über alle E-mail und nicht nur die, die auf das Handy synchronisiert wurden, Konversationsansicht und Archivierungs- und Spammarkier-Optionen.

Dank Local Storage bleiben die abgerufenen E-Mails auch offline verfügbar. Einfach das Mail-Symbol aus dem Dock gegen den Home-Bookmark-Link von GMail austauschen. Für besonders schnellen Zugriff setzt man den Bookmark auf den Posteinang und nicht auf m.gmail.com weil man sich dann einige zeitfressende Weiterleitungen spart. Und damit man keine E-Mail-Benachrichtigungen mehr in der Mail-App bekommt, deaktiviert man in den Einstellungen die automatische Zustellung und stellt dies auf manuell.

Alle Google Kalender

Der Google Calendar ist im Prinzip nur deswegen so ein mächtiges Tool, weil man einzelne Kalender erstellen kann, die man dann mit anderen teilt. Damit das iPhone Benachrichtigungen über Termine anzeigt und man diese bequem anlegen kann, bietet sich eine Integration in die vorhandene Kalender-App an. In der Standardkonfiguration mit wird aber nur der Hauptkalender auf dem iPhone angezeigt und verwaltet. Abhilfe schafft der Weg über die Exchange Schnittstelle von Google:

Dafür muss der Google Account als Exchange Account konfiguriert werden. Da Kontakte und der Kalender über das Exchange-Protokoll synchronisiert werden, legt man einen Exchange-Account für diese beiden Dienste an. Dann löscht man den herkömmlichen GMail-Account im iPhone und legt diesen ohne Kalender und Kontakte neu an. Nun surft man mit dem iPhone (!) auf die Webseite von Google Sync und konfiguriert dort seine gewünschten Kalender. Nun kann man neue Termine seinen vorhandenen Google Kalendern zuordnen.

Bilder veröffentlichen

Wenn man mobil seine Bilder vom iPhone auf Twitter, Facebook und Co. veröffentlichen will, dann gehen viele Leute über den Umweg über Apps. Viel einfacher ist es jedoch die E-Mail-Schnittstelle dieser Dienste zu benutzen. Wenn ich ein Bild vom iPhone auf Twitter veröffentlichen will, dann schicke ich eine E-Mail an Flickr. Flickr sendet dann per API einen Tweet über meinen Twitter-Account. Letzteres konfiguriert man direkt in seinem Flickr-Account in den Einstellungen. Das Hochladen von Bildern über die geheime E-Mail-Adresse konfiguriert man in den Flickr-Einstellungen unter dem Punkt “Upload by mail” ganz unten auf der Seite.

Bei Facebook kann man direkt seine Bilder per E-Mail hochladen. Die geheime E-Mail-Adresse bekommt man verwirrenderweise auf der mobilen Webseite von Facebook ganz unten. Man sollte nicht den Flickr-Account mit Facebook verbinden, weil diese dann nur über Facebook-App auftauchen und nicht nativ als Fotoalbum geführt werden.

Ein weiterer Vorteil ist, dass man über die E-Mail-Adresse einfach auswählen kann, an welche Dienste man das Bild schickt. Ich habe mir zusätzlich noch einen Verteiler namens “Blog” eingerichtet, der einfach alle alle Dienste (Picasa, Flickr und Facebook) die selbe E-Mail schickt. Facebook und Flickr nehmen übrigens auch Videos über die E-Mail-Schnittstelle entgegen.

Screenshots

Dieser Tipp gehört sicherlich zu den bekanntesten für das iPhone aber der Vollständigkeit halber sei er hier auch noch erwähnt: Home-Button und Ausschalter kurz antippen und schon befindet sich ein Screenshot im Fotoverzeichnis. Das funktioniert auch in allen Apps.

Die Boxee Box ist in Deutschland relativ unbekannt. Die kleine schwarz-grüne Kiste gibt es erst seit Ende 2010 auch für 180 EUR zu kaufen und hat es sich als Aufgabe gemacht, das (Social) Internet auf den HDTV zu bekommen und gleichzeitig der beste Media Player für alle Filmformate zu sein. Dabei platziert sich der XBMC-Fork zwischen die Konkurrenz wie Google TV, Apple TV und WDTV Live: auf externen Festplatten enthaltene Filme im MKV-Format werden nicht nur mit Surround-Sound korrekt wiedergegeben und mit Informationen der IMDB automatisch angereichert sondern die Box aggregiert auch alle geteilten Filme aus den Sozialen Netzwerken und bietet bequemen Zugriff auf diverse TV-Feeds – auch in Deutschland.

Boxee Box – Review

Im Gegensatz zu vielen Berichten, die ich im Netz gelesen habe, beruhen meine Erfahrungen auf mehreren Monaten aktiven Einsatz des Gerätes. Bei vielen dieser Artikel und Videos hatte ich das Gefühl, dass die anderen Journalisten das Gerät einen Abend aufgebaut und angeschlossen haben und um danach sofort den Artikel geschrieben haben. Man kann stundenlang über dieses Gerät schreiben und ich habe auch diverse Details im Video ausgelassen wie z.B. das automatische Runterladen von Untertiteln für Filme auf der Festplatte, den Audioplayer, der Fähigkeit DVD und BluRay-Menüs direkt von der Festplatte anzuzeigen oder die zahlreichen Apps, die es mittlerweile für die Boxee Box gibt. In neuen Hardware-Revisionen wurde der interne Lüfter überarbeitet so dass die Boxee Box praktisch unhörbar ist.

Das Potential der Boxee Box ist sehr groß und wächst mit jedem Update. Besonders die Social Media Features versteht man nur nach einem Langzeittest und möchte sie danach auch nicht mehr missen. An dieser Stelle auch meinen Dank an ipaschke, der so nett war und mir vor Monaten das Gerät mal vorzuführen und somit meine WDTV Live aus dem Wohnzimmer verdrängt hat.

Update Boxee 1.2

Seit dem Update 1.2 verfügt die Boxee Box über eine AirPlay Schnittstelle. Das heißt, dass alle Apple Produkte Bilder, Ton und Videos auf die Boxee Box streamen können. Das funktioniert sogar mit HD YouTube Videos. Außerdem gibt es eine Boxee iPad App. Dort gibt man seine Boxee Box Anmeldedaten ein und kann dann dort auf die “Watch Later” und Social Network Videos zugreifen und diese bei Bedarf auch auf der Boxee wiedergeben.

Informationen zum Video

Dies ist das erste Video, das ich direkt mit meinem iPhone aufgenommen habe. Dank Felix hatte ich Zugriff auf den glif und zusätzlich habe ich mir das iRig Mic gekauft. Zusammen mit meinem vorhandenen Stativ konnte ich mit zusätzlichem Licht und etwas Post-Produktion dann das Video-Produzieren. Das Problem ist leider, dass der HDTV viel zu sehr strahlt und ich somit ins Gegenlicht filmen musste. Das iPhone hat das für diese schlechten Lichtverhältnisse sogar relativ gut hinbekommen aber generell denke ich, dass ich mit meiner Canon IXUS 110 bessere Bilder hinbekommen hätte. Die App Pro Camera soll auch dafür sorgen, dass der Weißabgleich permanent gespeichert wird und sich sich permanent automatisch anpasst. Der Vorteil gegenüber der IXUS ist aber sicherlich der Ton. Mit dem bin ich hingegen absolut zufrieden, was aber nicht unbedingt am iPhone selber sondern an dem guten Mikrofon liegt.

Links

• Boxee Box für unter 180 EUR – amazon.de
• Boxee Forum – boxee-forum.de
• Boxee 1.2 mit iPad App und AirPlay (beta) – blog.boxee.tv

Motiviert durch den Artikel von Nico sind mir zwei Dinge bewusst geworden, die mir beim Ansehen von Filmen auf den Geist gehen: Filmkörnung und eine niedrige Bildwiederholrate. Als besonders schlimm empfinde ich künstlich erzeugtes Filmgrain, dass erst in der Post-Produktion über das ursprünglich körnungsfreie Material gelegt wurde, um den Film filmischer aussehen zu lassen. Bei den HD-Filmen Black Swan und 300 kann man den Körnungseffekt sehr gut beobachten. Ursprünglich wird die typische Filmkörnung durch die chemische Auflösung des belichteten Filmmaterials hervorgerufen. Im Kino merkt man diesen Effekt eher selten, weil die visuelle Qualität von Heim-HD-Projektoren und guten Flachbildschirmen das Kino in Sachen Schärfe und Bildqualität eingeholt haben. Dort wird größtenteils immer noch technisch auf echte Filmstreifen gesetzt, die dann durch eine Mechanik vor einer Lichtquelle bewegt werden. Da ist Verschleiß und somit eine schlechtere Bildqualität vorprogrammiert. Diese Probleme hätten digitale Kameras und Abspielgeräte heute nicht mehr.

Diese historisch gewachsene Technik beschränkt auch gleichzeitig die Bildwiederholrate auf nur 24 Bilder pro Sekunde. Diese wird bei fast allen erhältlichen BluRay oder vergleichbaren Formaten beibehalten und landet dann auf unseren Flachbildschirmen die im schlimmsten Fall versuchen, diese wieder auf mehr Bilder pro Sekunde hochzurechnen. Das nennt sich dann 120hz-Technik oder MotionFlow. Dass Kinofilme ruckeln ist mir zum ersten Mal aufgefallen, als ich damals meine erste DVD (“The Beach”) zu ersten Mal in mein brandneues DVD-Laufwerk am Computer gelegt hatte. Da ich auf dem Monitor ausschließlich Spiele gesehen hatte, wurde mir der Unterschied erst bewusst. Bei Spielen wird bei 25 Bildern schon nicht mehr von einem flüssigen Bildaufbau gesprochen. Mehr Bilder sorgen nicht nur für ein plastischeres Bild sondern auch für ein stärkeres Gefühl der Immersion und Kontrolle bezüglich der Geschehnisse auf dem Bildschirm. Deswegen bin ich mir auch ziemlich sicher, dass die Filmemacher schon damals gerne mehr Bilder und eine höhere Bildrate eingesetzt hätten aber es technisch einfach nicht möglich gewesen ist.

Das folgende Beispiel zeigt mit Hilfe von HTML5 zuerst eine Bewegung mit 60 Bildern und dann mit 24 Bildern pro Sekunde. Das Video benötigt zwingend einen HTML5-fähigen Browser da Flash nicht zuverlässig in der Lage ist, 60FPS darzustellen. Man sieht den Effekt auch nur auf Plattformen, die Videos durch die GPU Hardware-Beschleunigt wiedergeben können. Das sind meines Wissens im Moment nur:

• Safari 5.0+ unter MacOS
• Mobile Safari unter iOS 3.2+(iPad, iPhone)
• Opera 11 (Windows)
• Chromium 10 (Linux)

Es könnte sein, dass der neue IE9 unter Windows Vista und Windows 7 auch dazu in der Lage ist. Alle anderen werden den Unterschied deswegen wahrscheinlich nicht sehen können, weil Tearing den Eindruck der flüssigen Bewegung in dem Video zunichte macht.

Wegen dem Kommentar von Frank Thomas habe ich das Video noch mal mit Bewegungsunschärfe in After Effects rausgerendert und die Bälle dieses Mal auch direkt übereinander platziert:

Deswegen bin ich dafür, beim Film vollständig auf den Einsatz von echtem Film wie 35mm zu verzichten und mit mindestens 60 Bildern pro Sekunde aufzunehmen, damit wir diese visuellen Unzulänglichkeiten nicht mehr am Fernseher ausgleichen oder hinnehmen müssen. Das dies nicht “kühl” oder weniger nach Film aussehen muss, zeigen positive Beispiele sind The Social Network und District 9, die auf einer digitalen 4k-Kamera gedreht wurden. Jetzt muss nur noch die Bildwiederholrate angehoben werden. Ein sehr gutes Beispiel ist auch The Dark Knight. Der Film wirkt auf BluRay sehr klar und scharf und kommt ohne Körnung aus – Stilmittel hin oder her. Gerade wenn es keine chemische Filmkörnung mehr ist sondern nachträglich digital auf den Film gelegt wurde, dann sieht digitale Körnung meiner Meinung nach richtig schlimm aus. Man baut Webseiten ja auch nicht linear und fügt links und rechts Blätteranimationen ein. Ich hoffe, dass sich die Filmtechnik langsam auch auf das Jahr 2012 vorbereitet – und nicht nur Filme so benennt.

Links

• Filmformate für Kino und Heimkino – lima-city.de
• Grain / Technicolor – codecandies.de
• Black Swan Trailer – youtube.com
• The Dark Knight Trailer – youtube.com
• Screenshot aus “Black Swan”
• Black Swan Rezension – anmutunddemut.de