Flash verliert mit der zunehmenden Verbreitung von HTML5 immer mehr an Boden. Nicht zuletzt weil Apple Flash aus dem iOS verbannt hat. Ob das nun gut oder schlecht ist mag ich hier gar nicht bewerten aber offenbar hat Adobe die Zeichen der Zeit erkannt und stellt nun mit Wallaby ein Konvertierungs-Tool für Flash-Dokumente bereit.

In den Adobe Labs kann die Air-Anwendung Wallaby kostenlos heruntergeladen werden.

Zu beachten ist jedoch dass Wallaby sich noch im Stadium des Release Candidate befindet - also nicht fehlerfrei ist. Adobe selbst schreibt dazu:

"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. Wallaby is not a final product and is still in the testing and validation phase. We are not yet able to commit to a roadmap for this experimental technology.

Nichts desto trotz funktioniert die App erstaunlich gut und konvertiert Flash-Dokumente per Klick in HTML5. Ihr solltet jedoch bedenken, dass auch HTML5 nicht alle Möglichkeiten von Flash abdeckt. Je komplexer die Flash-Datei also ist, desto schwieriger wird es das Dokument zu konvertieren.

Ihr könnt Adobe Wallaby in den Adobe Labs herunterladen.

• Adobe Wallaby Download

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Nachdem die iPhone-Application zu Photoshop.com bereits seit etwas längerer Zeit für den US-Amerikanischen Markt verfügbar ist, kann die App nun seit einigen Tagen auch über den deutschen AppStore bezogen werden. Sehr praktisch um von unterwegs mal das ein oder andere Bild zu bearbeiten. Ganz nebenbei können natürlich viele Social-Features von Photoshop.com über die App genutzt werden.

• Photoshop.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Passende Photoshop-Brushes zu finden kann ganz schön lästig sein. Hat man dann endlich ein vermeintlich geeignetes Brush-Set entdeckt, so muss dieses meist entzippt und anschließend in Photoshop importiert werden damit der gestresste Designer sehen kann wie gut die Pinselspitzen denn nun wirklich sind. Dieses kleine Tool ermöglicht es Photoshop Pinsel per QuickLook im Finder anzuschauen ohne sie in Photoshop importieren zu müssen. Einfach die Dateien im Finder markieren, Space drücken (ab Mac OS X Leopard) und sich vllt. unnötiges Importieren ersparen.

• BrushView Plugin für Mac OS X Leopard+

via @medienvirus

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Suchmaschine Wolfram Alpha habe ich vor einiger Zeit bereits vorgestellt, um genau zu sein mit der Launch der Seite. Nun ist die entsprechende iPhone-App erschienen - für den Schnäppchenpreis von 40 Euro! Das Preis-Leistungs-Verhältnis möchte ich hier nicht diskutieren, wer Wolfram regelmäßig einsetzt wird sicherlich auch den Preis für die Anwendung bezahlen.

• Wolfram Alpha iPhone-Application

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Gestern ist Version 2 der iPhone-Application WordPress erschienen. Da es sich um eine komplett neue Version handelt, kann die alte App deinstalliert werden. Es wird folglich auch kein automatisches Update angekündigt. Eine Übersicht der neuen Funktionen findet Ihr hier.

• WordPress 2 for iPhone

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress für das iPhone wurde nun in Version 1.3 veröffentlicht. Neben verbesserter Geschwindigkeit und einem Live-Modus, sollen angeblich viele Bugs entfernt worden sein. Ich merke ehrlich gesagt keinen Unterschied zur Vorgängerversion, bei mir läuft die App nach wie vor extrem instabil und fehlerhaft. Habt Ihr ähnliche Probleme?
Achtet auch darauf, dass die Application im AppStore fehlerhaft unter Versionsnummer 1.2 aufgeführt wird.

WordPress for iPhone

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Apple hat die neuste Version von Safari veröffentlicht. Nachdem die Beta zur Safari 4 schon einige Zeit zum Download bereit stand, kann nun die finale Version genutzt werden.
Einige neue Funktionen sowie ein Video der Beta-Version habe ich vor einiger Zeit in einem Artikel vorgestellt.

Safari 4 Website

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Apple hat seinen hauseigenen Browser Safari in Version 4 Beta öffentlich zur Verfügung gestellt. Neben diversen technischen Neuerungen wie einer deutlich ausgereifteren CSS3- sowie HTML5-Interpretation überrascht der Browser mit einer spitzen Geschwindigkeit. Auch die JavaScript-Unterstützung wurde enorm verbessert.
Das Interface kann mich ebenfalls überzeugen: Die Top-Sites (meistbesuchten Seiten) sind nun in Form einer 3D-Wall als Startseite verfügbar und die Lesezeichen zeigen favorisierte Websites im CoverFlow-Modus an.
Um Euch einen schnellen ersten Eindruck vom Design des kommenden Browser zu geben habe ich mir die Beta gezogen und Euch flott ein kleines Video erstellt. Viel Spaß.

Das neue Interface von Safari 4 Beta

Links zum Thema

Mehr Informationen zur beta von Safari 4 findet Ihr hier:

• Apple
• AppStrom
• Spiegel-Online

Download

Die Beta von Safari 4 könnt Ihr Euch hier runterziehen

Download: http://www.apple.com/de/safari/download

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das iPhone stellt das "echte" Internet dar, soviel wissen wir schon aus der Werbung. Doch es gibt auch diverse Websites die extra für das iPhone geschrieben oder zumindest optimiert wurden.
Experten und Web-Pioniere sind sich einig: Die Zukunft des Internets ist mobil. Höchste Zeit also sich mit diesem Thema auseinander zu setzen. In diesem Artikel erläutere ich einige Funktionen hinsichtlich des iPhones.

Dieser Artikel ist aus dem Jahr 2008 und wurde inzwischen durch andere Beiträge ergänzt. Wenn Ihr lesen möchtet wie Ihr eine iPhone und iPad-optimierte Version Eurer Website mit CSS3 erstellt so wechselt bitte zu folgendem Tutorial: iPad und iPhone optimierte Websites mit CSS3

Gleiche Lady, anderes Kleid

Grundvoraussetzung für "Handy"-optimierte Internetseiten ist semantischer XHTML-Code sowie eine vollständige Trennung von Content und Design mittels XHTML und CSS. Das Outfit der Seite wird komplett über CSS angesprochen, die Inhalte (XHTML) bleiben unverändert. Quellen zu diesem Thema gibt es genug, daher gehe ich hier nicht weiter darauf ein.

CSS-Media-Attribut zur Ansprache von mobilen Endgeräten?

Normalerweise wird Handys, PDAs, Smartphones etc. mittels dem "media='handheld'"-Attribut eine optimierte CSS-Datei zugewiesen. Da sich das iPhone jedoch nicht als Handy bei der Seite anmeldet, sondern als Computer hilft uns dieser Weg hier nicht viel weiter. die Lösung heißt CSS3!
Der Browser des iPhones ist Safari 3 Mobile. Safari Mobile unterstützt dank Webkit viele CSS3-Attribute und so kann das Phone schon im HTML-Head der Seite direkt angesprochen werden:

<link
 rel="stylesheet"
 media="only screen and (max-device-width: 480px)"
 href="link_to_iphone-optimized_css_file" type="text/css"
/>

Wir legen also eine neue CSS-Datei an, verlinken diese entsprechend und optimieren sie hinsichtlich des iPhone-Screens.

Wichtig an dieser Stelle! Das iPhone lädt ALLE eingebetteten Stylesheets: Die optimierte CSS-Datei muss also als letztes im HTML-Head auftauchen!!

Wer nicht im Besitz eines iPhones ist, kann sich mit folgenden Links eine iPhone-Simulation herunterladen:

• Für Mac-User: www.marketcircle.com/iphoney/
• Für Windows-Safari-User: iphonetester.com

Bildschirmabmessungen- und Umrechnungen des iPhones

Das iPhone stellt Internetseiten für gewöhnlich im Hochformat dar. Dabei wird die dargestellte Seite in der horizontalen oberhalb von 980 Pixeln Breite (1024er-Optimierung) abgeschnitten und der entsprechende Teil von 980 Pixeln auf 320 Pixel geschrumpft.
Dreht man das Telefon so wird der "Landscape-Mode" aktiviert. Die Seite kippt und passt sich der horizontalen Darstellung (480 Pixel Breite) an. Die Auflösung beträgt immer 160 dpi.

Die Pixelabmessungen des iPhone-Screens betragen also:

• Im Hochformat: 320px x 356px
• Im Querformat: 480px x 208px

Durch den oben beschriebenen CSS3-Code-Snippet weisen wir der Seite ein maximale Breite von 480 Pixeln zu.

Und wenn die Seite schmaler oder breiter als 980 Pixel ist?

Das iPhone kennt den sog. Viewport. Über eine weitere META-Zeile im HTML-Head übermitteln wir die Darstellungsbreite:

<meta
 name="viewport"
 content="width=320"
/>

In diesem Fall wird davon ausgegangen, dass der iPhone-User das Handy senkrecht hält (320px Breite) wenn er die Seite aufruft. Zur Wiederholung: Das iPhone "nimmt" sich also die Seite und schneidet alles was sich außerhalb von 980 Pixeln Breite befindet ab. Die übrig gebliebenen 980 Pixel werden auf 320 Pixel heruntergerechnet (vorausgesetzt das iPhone wird senkrecht gehalten). Der mittels META-Befehl übergebene Wert bezieht sich nun auf die geschrumpften 320 Pixel (100% der iPhone-Darstellungsbreite).

Den iPhone-Zoom beeinflussen

Das iPhone kann Websites heran- oder herauszoomen. Dieses Verhalten kann ebenfalls über den Viewport beeinflusst werden. Hier ein Beispiel von meiner Seite:

<meta name = "viewport" content = "
 width = 1100,  <!-- Die Seite soll auf 1100 Pixel skaliert werden -->
 user-scalable = yes,  <!-- Darf der User zoomen? yes/no -->
 initial-scale = 0.4,  <!-- Minimaler Skalierungsfaktor -->
 maximum-scale = 1 <!-- Maximaler Skalierungsfaktor. Hier 100% = scharfe Pixeldarstellung -->
"/>

Weitere Einstellungsmöglichkeiten über den Viewport findet Ihr am Ende dieses Artikels als PDF-Download.

Texte für das iPhone optimieren

Texte sollten mindestens eine Schriftgröße von 18 Pixeln haben. So wird auch ohne zoomen eine optimale Lesbarkeit garantiert.

Links für das iPhone optimieren

Das iPhone hat einen Touch-Screen. Logische aber oft unbeachtete Schlussfolgerung ist, dass keine :hover-Zustände möglich sind. Das gilt übrigens für jeden Touch-Screen.
Ergo muss die Webseite so optimiert werden, dass Links auch ohne :hover eindeutig als solche zu erkennen sind. Bei der iPhone-Version meiner Seite habe ich demzufolge alle Links unterstrichen und die :hover-Zustände bei Überschriften etc. entfernt.
Wird ein Link auf dem iPhone geklickt/getippt so wird dieser standardmäßig grau umrahmt. Diese Rahmenfarbe kann mittels Webkit und CSS3 angepasst werden:

a {
 -webkit-tap-highlight-color:rgba(200,0,0,0.4); /* R,G.B,Alpha */
}

iPhone-Applications verlinken

Viele Informationen einer Website schreien beinahe danach direkt mit Handy-Funktionen verknüpft zu werden. So können Telefonnummern per Fingertipp direkt angerufen werden; ein Klick auf die E-Mail öffnet das Mail-Programm des iPhones und Adressen werden in Google Maps angezeigt.
Um diese Funktionen zu verwenden, müssen (in diesem Blog bereits mehrfach angesprochene) Mikroformate verwendet werden. Diese "verwandeln" simple Zeichenketten in - für den Browser - verständliche Informationen.

Mehr zu Mikroformaten findet Ihr in meinen älteren Beiträgen:

• XFN (XHTML Friends Network) Microformat
• vCard mittels Microformat “hCard” erstellen

Formularfelder für das iPhone optimieren

Wird über das iPhone ein Formular angeklickt, so zoomt das Gerät an das Input-Feld heran und öffnet automatisch die Touch-Screen-Tastatur. Somit verringert sich der sichtbare Bereich auf mickrige 320 x 140 Pixel. Demzufolge sollten Formulare so angepasst werden, dass sie in dieser Darstellungsbreite vollständig zu erfassen sind. Submit-Buttons sollten mindestens 40x40 Pixel betragen um eine problemlose Interaktion zu ermöglichen.

Zusätzlich kann dem Input-Feld ein Befehl übergeben werden der die automatische Rechtschreibkorrektur bzw. Großschreibhilfe des iPhones aktiviert oder deaktiviert. Der Codefetzen sollte selbsterklärend sein:

<input autocorrect = "on"/>
<input autocorrect = "off"/>

<input autocapitalize = "on"/>
<input autocapitalize = "off"/>

WebClip-Icon hinzufügen

Internetseiten lassen sich auf dem iPhone per Favoriten-Funktion direkt auf den Home-Screen befördern. Um dort auch ein hübsches Icon zu präsentieren sollte der Webdesigner ein sog. WebClip-Icon hinterlegen. Wie das geht erkläre ich in einem früheren Artikel.

Fazit

Das iPhone kann das ganz normale Internet darstellen. Doch trotzdem können Websites für das Endgerät noch optimiert werden. Ob und in welchem Umfang dies geschieht ist jedem selbst überlassen. Ich für meinen Teil habe mittlerweile fast 100% meiner Desktop-Internet-Anwendungen auf das iPhone übertragen und freue mich über jede Seite wo der Webmaster sich die Mühe gemacht hat mir eine besonders einfache Informationsaufnahme zu ermöglichen.

An dieser Stelle möchte ich ausdrücklich erwähnen, dass ich meine eigene Seite größtenteils für das iPhone umgeschrieben habe. Eine vollständige Optimierung ist mir momentan aus Zeitgründen nicht möglich. Also nicht motzen :D

Mobile Zukunft?

Hat Euch dieser Artikel weitergeholfen? Wie steht Ihr zum Thema mobiles Internet? Nutzt Ihr das Web vom Handy aus und wenn in welcher Form?
Ich freue mich über zahlreiche Erfahrungsberichte!

Als letztes verweise ich noch auf die Apple-PDF zum Thema iPhone-Optimierung.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Kleine Icons zur bildhaften Kennzeichnung von Internetseiten haben sich in den letzten Jahren großer Beliebtheit erfreut. Das Favicon als Markierung von Lesezeichen oder der Browser-URL kennt wohl mittlerweile jeder. Doch was genau ist ein WebClip Icon? Die Lösung ist ganz einfach. Das Favicon im iPhone und iPod Touch!

Damit das iPhone anstelle eines automatisch generierten Icons ein schönes, vom Webseitenbetreiber erstelltes, Icon anzeigt muss nicht viel getan werden. Im Folgenden erkläre ich in aller Kürze was getan werden muss.

Wo erscheint das Icon denn überhaupt?

Das WebClip Icon wird erst dann sichtbar, wenn ein iPhone oder iPod Touch Benutzer sich dazu entscheidet eine Website nicht in den Favoriten von Safari zu verwalten sondern ihr einen ehrenvollen Platz auf dem Home Bildschirm zuzuweisen.
Sofern kein WebClip Icon vorhanden ist, erstellt das iPhone automatisch ein passendes. Dieses zeigt jedoch nur eine stark verkleinerte Ansicht der gesamten Website. Ich für meinen Teil wollte solch ein hässliches Icon nicht auf dem Home Bildschirm platzieren, also muss ein WebClip Icon her.

WebClip Icon erstellen

Erstellt eine neue Datei mit den Abmessungen 60x60 Pixel und gestaltet Euer Icon. Beachtet hierbei bitte, dass die gesamte Arbeitsfläche zum Icon generiert wird.
Der große Vorteil liegt darin, dass Ihr weder die abgerundeten Ecken einbringen, noch die Spiegelungen hinzufügen müsst. Dies geschieht alles im iPhone selbst.
Die fertige Grafik speichert Ihr nun unter dem Dateinamen "apple-touch-icon.png" in den Root Eurer Seite ab. (Hinweis: Bei WordPress muss das Icon in der selben Hierarchieebene liegen in der sich auch die wp-config.php-Datei befindet.)
Das wars. Ihr benötigt im Gegensatz zum Favicon keine Codeschnipsel im Seitenhead oder ähnliches. einfach nur das Icon erstellen, hochladen fertig.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.