Shortly after Apple reported its record first quarter 2012 results I was searching the web for an interactive chart where I could, well, interact with Apple’s financial data in an easy-to-use way. I found … only one. On asymco’s website there’s a handy Apple Product Data sheet and also a way to visualize the data. But there are a few things I didn’t like about the chart:

• it’s powered by Flash,
• it’s pretty slow when you try to interact with it (see list item #1),
• it only dates back to the year 2006 and
• it could be easier to use and more intuitive.

That’s why I made one myself.

The chart is powered by the amazing Highcharts JS. If you’re a web developer searching for a dynamic charting tool, this is the one to go. Unfortunately it has some minor bugs regarding specific chart types. I’m sure they will be fixed some time soon (Highcharts has a pretty big community and hardworking developers behind it), but that’s why I can’t use such useful chart types like stacked areas or areas showing the percent of a total yet.

A project in progress

The chart must be seen as a project in progress. I’ll update the site on a monthly basis. This includes adding more data and providing more functions to create a “web application” kind of feeling (e.g. switching chart types or changing time view from quarters to years). I’d really appreciate any feedback regarding the site, so be sure to tweet or mail me if you’ve got something so say or you want something to be improved.

One more thing …

Until now I compiled data from 41 quarters – that’s over a decade – and much of that data isn’t included in the chart yet (see above-mentioned bugs). To not let you wait until I finally can include all data I turned on Numbers and made a few charts. You may find similarities between the charts you’re about to enjoy and the gazillion charts created by asymco. I guess the reason for this is because they also use Numbers for their charts. :-)

I encourage you to use the charts any way you want, just be sure to mention me (all images are licensed under the CC BY 3.0 license). I also made Flickr and Google+ albums.

Apple’s quarterly revenues by product

Apple’s quarterly product unit sales

Apple’s quarterly Mac unit sales

Apple product ASP

iPod year-on-year change

Apple’s cash and marketable securities

All of this backstory knowledge fuels my rage. When I see Google talk about how “open” the platform is, setting it up as the foil to the “closed” (and framed as “evil”) iPhone, I want to scream and rip someone’s head off. It’s not only the most extreme example of being disingenuous that I can ever recall seeing. It’s nuclear bullshit.

Vor einigen Monaten hat mich jemand verblüfft. Da sprach ich mit einem Herrn um die 60 über Tagebücher und er verriet mir, dass er seit über 40 Jahren seine (all)täglichen Erlebnisse zu Papier bringt. Ich kenne ansonsten niemanden persönlich, der das so lange durchgehalten hat. Touché!

Gewissenhafte und ausdauernde Menschen motivieren mich. Deshalb mache ich das seit über zwei Monaten ebenso und es fühlt sich gut an. Eigentlich sehr gut. Überhaupt: In ein Buch mit kleinen Seiten zu schreiben. Tag für Tag. Seiten, die man mit eigenen Gedanken füllt, abseits von Bildschirmen und »Tatsch-Skriens«, mit Stift und Papier. Das schafft gleichsam Distanz, Ruhe und Konzentration. Probiert’s mal aus.

Auf die nächsten 40 Jahre.

• Globale Migrationsströme beeindruckend visualisiert.
• Fleckige PNGs für Websitehintergründe erzeugen und downloaden.
• Mission Chaos: OS X Lion bringt viele Macken mit sich.
• Der Journalsimus schafft sich bisweilen seine eigene Welt.
• Google haftet nicht für die Inhalte von Suchergebnissen.
• Auch letzte Woche wurde viel über Google+ sinniert. Dabei wurde nicht nur die Performance in Augenschein genommen; auch das Machtgefüge der sozialen Netzwerke wurde analysiert. Der Großteil der Reaktionen fällt zwar positiv aus, es gibt jedoch auch kritische Stimmen.
• Was Google+ angeht, scheint Twitter in größerer Bedrängnis zu sein, als Facebook. Vielleicht liegt’s an der Konzeptionslosigkeit? Steht uns gar eine Twitterdämmerung bevor?
• Christian Heilmann über unseren Fetisch für Webseitenstatistiken.
• IE 10 unterstützt den HTML5-Parser-Algorithmus zu 100 %.
• Die aktuelle Uhrzeit als Hexadezimalfarben interpretiert. Schöne Umsetzung!

• Die letztwöchentliche Übernachricht war ohne Zweifel Google+. Viel wurde darüber geschrieben: man äußerte sich mal skeptisch, mal humorvoll. Ansonsten waren die Reaktionen durch die Bank positiv. Das Kreiskonzept ist bei näherer Betrachtung doch etwas kompliziert. Auch die Hintergründe und tieferen Beweggründe des sozialen Netzwerks wurden eingehend analysiert. Die Liste der Verbesserungswünsche ist noch lang, die Marketingstrategie wirkt ein wenig ängstlich, an der Barrierefreiheit muss noch gearbeitet werden und deine Mutter wird Google+ wahrscheinlich nicht nutzen. Einen guten Überblick über das neue Netzwerk gewährt Stefan Münz.
• Passend zum Start von Google+ beleuchtet Robert Basic Wettbewerb und Finanzen der großen Player im Internet.
• Eine Standard-WordPress-Installation kann man mit einigen Tricks um bis zu 280 % schneller machen.
• Der Marktanteil von Google Chrome wächst rasant schnell.
• Greenpeace hat was gegen VW und parodiert den berühmten Star-Wars-Werbespot des Autoherstellers. Lucasfilm findet das nicht so lustig.
• Zahlenspiel: Apple verdient an jedem iOS-Nutzer jährlich durchschnittlich 150 $.
• Generation Wix: Nach Teil 1 folgt nun Teil 2. Lesenswert.
• Peter Kröner erklärt Schritt für Schritt, wie man mit Canvas HTML5-Videos manipuliert.
• IBM hat einen Speicher entwickelt, der 100 Mal schneller als Flash ist.
• Die zweite Vorschau des IE 10 ist erschienen. Sieht gut aus! Außerdem gibt’s ein Plugin, dass IE 6 bis 10 WebGL beibringt.
• Die New York Times schreibt einen liebevollen Artikel über das Kölsch: a summer beer worth the fuss, na dann Prost!
• Das Stylen von Tabellen mit CSS ist mit vielen Hindernissen verbunden.
• Der Doktor in Sachen HTML5 über die vielen verschiedenen Möglichkeiten des Zitierens in HTML. Referenzqualität! Außerdem: Eine umfassende Betrachtung des blockquote-Elements von Oli Studholme.

Wie ich festgestellt habe, kocht diesbezüglich jeder Browser gewissermaßen sein eigenes Süppchen. Das schmeckt manchmal besser und manchmal schlechter. Nur bei den Tastaturkürzeln herrscht weitestgehend Einigkeit:

Folgende Browser (alphabetisch sortiert) habe ich unter die Lupe genommen:

• Chrome 14 dev
• Firefox 5
• Internet Explorer 9
• Opera 11.50
• Safari 5.0.5

Alle Browser verhalten sich übrigens unter Mac OS X 10.6.8 (außer natürlich der IE) und unter Windows 7 nahezu identisch.

Chrome

Nachdem man die Suche aktiviert, erscheint rechts oben eine knapp 300 Pixel breite Suchmaske, die sich quasi über die Webseite legt. Darunter liegende Suchergebnisse würden dadurch theoretisch verdeckt. Dieses »Interfaceproblem« löst Googles Browser dadurch, dass er die Suchmaske bei eintretendem Ernstfall einfach nach links verschiebt. Ziemlich cool!

Rechts vom Eingabefeld werden alle Suchergebnisse in der Form »1 von 36« textuell zusammengefasst. Die erste Zahl repräsentiert den Treffer, bei dem man sich gerade befindet (im Beispiel der erste Treffer). Die letzte Zahl gibt die Gesamtzahl der Treffer an. Und Chrome listet auch wirklich alle Treffer auf; ein kleine Testsuche mit über 100.000 Suchergebnissen hat das bestätigt.

Treffer werden verzögerungsfrei mit einem gelben Hintergrund hinterlegt; das gerade aktuelle Fundstück wird durch einen orangenen Hintergrund hervorgehoben. Chrome unterscheidet bei der Suche übrigens nicht zwischen Groß- und Kleinschreibung. Zusätzlich dazu werden Treffer mit einem gelben Strich im Scrollbalken angezeigt. Dadurch bekommt man einen raschen und umfassenden Überblick, an welcher Stelle der Webseite sich Suchergebnisse befinden bzw. wo sie sich häufen. Dieses Feature ist so einfach, wie es genial ist.

Firefox

Der Fuchs platziert die Suchleiste am gesamten unteren Rand des Fensters. Der eigentliche Inhalt (Eingabefeld und Buttons zum Navigieren/Auswählen) ist knapp über 660 Pixel breit. Wenn man das Fenster kleiner als 660 Pixel zieht, wird die Suchmaske rücksichtslos verdeckt und dadurch unbenutzbar. Auch theoretische Probleme sind Probleme.

Firefox unterscheidet wahlweise zwischen Groß- und Kleinschreibung, womit man Suchergebnisse verfeinern kann. Standardmäßig wird nur der aktuelle Treffer mit grüner Farbe hinterlegt, alle anderen Treffer bleiben farblos und somit nicht erkennbar. Es gibt allerdings einen »Hervorheben«-Button, womit auch alle anderen Treffer (mit lila Hintergrund) deutlich gemacht werden. Warum nicht alle Treffer standardmäßig hervorgehoben werden, ist mir ein Rätsel. Noch etwas: Wenn alle Suchergebnisse farblich markiert werden, verzögert sich bei einer Änderung des Suchbegriffs die farbliche Hinterlegung der neuen Treffer etwas … zumindest so lange, dass es auffällt.

Positiv ist allerdings anzumerken, dass Firefox (als einziger Browser) eine sofortige Suche zulässt, d. h. man kann einfach drauflostippen und muss nicht erst das Standardtastaturkürzel eintippen, um die Suche zu starten. Nette Idee!

Internet Explorer

Die Suchleiste befindet sich beim IE unter der Adresszeile und erstreckt sich über die gesamte Fensterbreite. Auch hier besteht das Problem, dass bei kleiner werdendem Browserfenster der Inhalt der Suchleiste verdeckt wird.

Neben den üblichen Standardeingabefeldern kann man die Hervorhebung aller Treffer aktivieren oder deaktivieren. Standardmäßig ist sie sinnvollerweise aktiv, das sollten sich die Leute bei Mozilla ausnahmsweise mal zum Vorbild nehmen. Zusätzlich zur Unterscheidung zwischen Groß- und Kleinschreibung kann auch explizit nach ganzen Wörtern gesucht werden.

Der IE gibt (wie Chrome und Safari auch) die Anzahl der Treffer aus. Er spricht aber von »Übereinstimmungen«. Bei mehr als 100 Treffern hört er auf zu zählen und sagt: »Mehr als 100 Übereinstimmungen«. Aktuell ausgewählte Treffer werden nur mit der Farbe einer normalen Textmarkierung (dezentes blau) hinterlegt. Das geht sicher eindeutiger.

Opera

Der norwegische Browser sucht sehr solide. Die Suchleiste erstreckt sich über die gesamte Fensterbreite und befindet sich unterhalb der Adresszeile. Zieht man das Fenster kleiner, verkleinern sich dabei auch die Buttons und Beschriftungen … zumindest bis zu einem gewissen Grad. Das macht Opera besser als der IE und Firefox, die sich in dieser Hinsicht eher stur verhalten. Neben der Unterscheidung zwischen Groß- und Kleinschreibung kann auch nach ganzen Wörtern gesucht werden.

Nach der Eingabe des Suchbegriffs verdunkelt sich die ganze Webseite. In Mac OS X werden die Treffer in grellem türkis angezeigt, in Windows 7 in hellem gelb. Die aktuelle Stelle wird mit einer grünen Box, Schlagschatten und größerem Innenabstand gekennzeichnet. Durch die Verdunkelung der Seite treten insgesamt alle Treffer sehr viel deutlicher hervor. Ein Hinweis auf die Anzahl der Suchtreffer gibt’s allerdings nicht.

Safari

Safari platziert die Suchleiste unter der Adresszeile über die gesamte Fensterbreite. Auch hier wird wie bei Opera die Webseite verdunkelt, um Suchergebnisse noch deutlicher hervorzuheben. Treffer werden mit weißem Hintergrund markiert, die aktuelle Stelle wird gelb, mit Schlagschatten und größerem Innenabstand markant hervorgehoben. Die sofortige visuelle Erfassung der Suchergebnisse schafft Apples Browser meiner Meinung nach am besten.

Die Anzahl der Treffer wird angezeigt, allerdings kann Apples Browser (wie der IE) nur bis 100 zählen. Schade.

Fazit

Chrome sucht meiner Meinung nach mit Abstand am besten, vor allem wegen der zusätzlichen Anzeige der Suchergebnisse im Scrollbalken. Firefox hingegen hat mich etwas enttäuscht, da er nicht standardmäßig alle Treffer hervorhebt. Hinweise auf weitere browserspezifische (Such-)Kniffe, die ich vergessen oder noch nicht entdeckt habe, sind willkommen!

• Nils Lauk, Frontend-Architekt bei XING, gibt einen webtechnischen Einblick in den Relaunch des Business-Netzwerks.
• CSS Media Queries debuggen. Mit CSS. Cool.
• Nur den Artikelnamen als URL-Struktur in WordPress zu verwenden, ist ein Performance-Killer.
• Mit Sprite Cow Hintergrundposition, Breite und Höhe von Sprites innerhalb eines Spritesheets herausfinden. Extrem schnell und extrem nützlich.
• Ein tiefgehender Essay über Vergangenheit, Gegenwart und Zukunft von Büchern und Buchverlagen. Absolute Leseempfehlung! (via @davidbauer)
• Das durchschnittliche Farbspektrum des Himmels über New York City, alle fünf Minuten aktualisiert.
• 100 Beispiele des sehenswerten Parallax-Scrolling-Effekts. Hübsch.
• Schlichtes, schwarzes, kostenloses und hochqualitatives Icon-Set für jeden erdenklichen Zweck.
• Über Pornographie in unserer Gesellschaft: Generation Wix. Herrlich geschrieben, ich habe viel gelacht.
• Koch-Mehrin wurde zur Forschungspolitikerin befördert. Zu diesem geradezu realsatirischem Thema wurde viel geschrieben. Eine Petition zur Abberufung Koch-Mehrins aus dem Ausschuss für Industrie, Forschung und Energie gibt’s auch. Die hat sich allerdings mittlerweile erübrigt, denn die smarte FDP-Politikerin will nun doch das Amt wechseln.
• GuttenPlag Wiki gewinnt Grimme Online Award. Christian Sickendieck meint dazu: Anonymität kann zum Vorteil unserer Demokratie positiv eingesetzt werden. (via @dnaber_de)
• Das FBI konnte durch die spontane Beschlagnahmung mehrerer Server zwei lettische kriminelle Vereinigungen enttarnen. Das ist gut. Teilweise liefen auf den entwendeten Servern populäre Dienste wie Instapaper oder Pinboard, die dadurch tagelang ausfielen und bestenfalls eingeschränkt nutzbar waren. Das ist blöd.
• Nun gibt es einen offiziellen GitHub-Client für den Mac. Sehr fein!
• Microsoft hat was gegen WebGL. Viel Stoff für leidenschaftliche Diskussionen.
• Johan Brook fordert Aufgeschlossenheit gegenüber neuen Technologien am Beispiel von Sass, Ruby, Rails, Git und anderen.

Allerdings sollte man sich auch eines Nachteils bewusst sein: Der Internet Explorer verkorkst die HTML-Verarbeitung bei nicht vorhandenem body-Start-Tag. Wer auf Nummer sicher gehen möchte, sollte also zumindest den body-Start-Tag immer deklarieren. Außerdem ist das Weglassen eines Tags an einige spezielle Bedingungen geknüpft. Genug der vielen Worte, hier die Übersicht:

Quellen und weiterführende Links zum Thema

• W3C: The HTML syntax — HTML5
• WHATWG: The HTML syntax — HTML Standard
• Keine Angst vor minimalem HTML(5)! • Peter Kröner, Webdesigner & Frontendentwickler
• Required elements and optional tags in HTML | 456 Berea Street
• Juicy Studio: Required Elements, and Required Tags
• Optional Tags in HTML 4 – Jens O. Meiert

Codex is a hybrid of magazine and journal. Beautifully designed, visually appealing, an immersive experience with a lively voice, it is also serious about its subject: authoritative, scholarly at times, but not dry in tone. It’s serious, but not stuffy. It loves the people, tools, and type associated with this craft, from the man carving beautiful cherubim into wood blocks in the 1400s to brilliantly formed modern interpretations and departures. It embraces the web and is watchful for the future’s classics.

Codex hält tatsächlich, was es verspricht und ist fast schon ein inhaltliches und optisches Kunstwerk. Das knapp 160 Seiten starke Journal umfasst eine zeitliche Spanne von mehreren hundert Jahren, behandelt die packende Geschichte des Linotype-Setzmaschinen-Erfinders Ottmar Mergenthaler genauso wie Schriftdarstellungen auf dem iPad. Zahlreiche Interviews und Artikel von und mit Typographie-Experten wie Erik Spiekermann, Luca Barcellona oder Christian Schwartz zeugen von einer inhaltlichen Intensität, die ich in dieser Form selten erlebt habe.

Das haptische und optische Erlebnis ist bemerkenswert. Jede einzelne Seite des Heftes spiegelt die Hingabe und Liebe für Details wider, mit der es produziert wurde.

Schriftenbeschreibungen kommen in der Codex natürlich auch nicht zu kurz. Ihr Stil erinnert mich dabei fast an Weinbeschreibungen, denn bei beiden wird versucht ein kaum fassbares Gefühl widerzugeben. Und Gefühle (bzw. komplexe Geschmäcker) in Worte zu fassen, ist ja schon eher schwierig. Bei Weinen sagt man dann, diese seien z. B. paprizierend im Abgang. Bei Schriften sind einzelne Schriftstärken z. B. konservativer als andere. Einfach nur herrlich, was man mit Worten alles anfangen kann. :)

Herausgegeben wird das neue Typographie-Journal von dem Briten John Boardley. Er lebt und arbeitet in Japan und ist der Macher des Typo-Mekkas I love Typography.

Wer mehr Bilder sehe möchte, wird bei Flickr fündig oder kann mein Flickr-Album bestaunen. Es gibt auch eine Seite mit allen Links zur ersten Ausgabe.

• LukeW | An Event Apart: What Every Web Designer Should Know

  Jeffrey Zeldmans Ansichten über Kompetenzen und Chancen, die jeder moderne Webdesigner im Kopf haben sollte. Tolle Zusammenfassung von Luke Wroblewski.

• iCloud and Apple’s truth: can you win if you don’t play? | This is my next…

  Tiefgehende und kritische Analyse über Apples Wolke.

• Apple could buy the mobile phone industry | asymco

  Verblüffend, oder?

• 10 Practices for Good Open Web Standards Development – Tantek

  Wenn es einer wissen muss, dann Tantek Çelik.

• Danisch.de » Blog Archive » Warum das neue Cyber-Abwehrzentrum der Bundesregierung so nicht funktioniert

  Lesenswerter (und langer) Artikel über die naiven Cyber-Abwehrzentrumspläne der Bundesregierung.