[W3Conf] Tomomi Imura: „Mobile Web: Real Life Examples of HTML5 for Mobile”

Die Veränderungen bei mobilen Geräten in den letzten 10 Jahren waren erstaunlich. Das beste „Smartphone“ im Jahr 2003 hatte 104-MHz-Prozessoren und 4 MB RAM. Heutige Telefone sind um mehrere Größenordnungen besser.

Sessil ist ein zoologischer Begriff (Gegenteil von „mobil“, „an einem Ort fixiert“).

Wichtige Anwendungsfälle für mobile Geräte: Lesen, Spielen, Fotografieren, Lokalisieren, Bezahlen, Medien hören/ansehen, Notizen machen, Chatten, Übersetzen und mehr.

Wie kann uns HTML5 bei einigen dieser Aktivitäten helfen?

Einen Anruf tätigen

<a href="tel:5555555555">

Lokalisieren

navigation.geolocation.getCurrentPosition(success, fail)

Sie können Layouts auf mobilen Geräten in CSS mit Media Queries ändern.

@media only screen
  and (min-width: 700px) {

}

Die Verlagsbranche kann davon profitieren, ebenso wie fortschrittliche Grid-Layouts.

Die Spieleindustrie kann von HTML5-Technologien wie Canvas, Touch Events, Audio APIs, Animationen und Transformationen sowie Web Sockets profitieren.

Vor etwa einem Jahr hat das W3C die „Core Mobile Web Platform“ Community Group gegründet. Die Mission war, die Akzeptanz des mobilen Webs als moderne Plattform für die Entwicklung zu beschleunigen. Viele große Unternehmen arbeiten gemeinsam daran, obwohl sie Branchenwettbewerber sind. Das Ziel war, Einigkeit über Kernfunktionen zu erzielen und Leistungstests zu erstellen.

Diese Community-Gruppe hat einige Open-Source-Beispielanwendungen erstellt, die auf GitHub verfügbar sind, wie z. B. eine Kamera-App.

HTML5-Weg zur Erfassung eines Bildes von der Gerätekamera selbst

<input type="file" accept="image/*"  capture="camera">

Dies ist nicht WebRTC. Es ist HTML Media Capture und es ist viel einfacher. Die Browserunterstützung ist bereits ziemlich gut. Dieses spezielle Beispiel ist Android 3+, Chrome 18+, Safari 6+, Firefox 10+, Blackberry 10+.

Sobald eine Datei auf diese Weise ausgewählt wurde, können Sie sofort über JavaScript darauf zugreifen.

localFile = input.files[0];
reader = new FileReader();
...

Hinweis: Ich habe hier verwandten Beispielcode.

Sobald Sie die Bilddaten haben, können Sie das Bild auf ein <canvas> zeichnen. Sobald es sich auf einem Canvas befindet, können Sie es wie jedes andere Element auf einem <canvas> manipulieren. Mit etwas mathematischer Finesse könnten Sie über jeden Pixel schleifen und ihn manipulieren. Manipulationen könnten wie ein „Filter“ sein, wie es Instagram macht. (Nimmt das nicht etwas den Zauber von Instagram weg?)

Diese Art von Sache ist jedoch ziemlich langsam. Auf der Wunschliste stünden Hardwarebeschleunigung für Canvas, schnellere GPUs, 32-Bit-Manipulation und Hintergrund-Worker.

Um dieses manipulierte Bild wieder in eine „echte“ Datei umzuwandeln, müssen Sie es zurück in ein „Blob“ konvertieren.

var blob = canvas.toBlob() /* Slightly more to it... */

Nur Firefox unterstützt dies, aber Sie können es mit einem Polyfill versehen. Sie können die Bilddaten sogar dann als Bild src anzeigen, sobald es ein Blob ist. <img src="blob:XXXXX">.

In der Demo-Fotos-App ist es sinnvoll, die Fotos sowohl lokal zu speichern als auch an den Server zu senden. Es ist sinnvoll, IndexedDB für die lokale Speicherung zu verwenden. Wie bei allem anderen ist die Browserunterstützung für IndexedDB lückenhaft. Hier ist sie besonders schlecht, da die APIs sehr unterschiedlich sind.

Für das Senden an den Server können Sie ein neues FormData()-Objekt erstellen (Sie benötigen kein tatsächliches Formular), dann das Foto als Daten anhängen und es dann Ajax-artig an den Server senden. Sie können den Fortschritt des Updates leicht anzeigen, da Sie eine Callback-Funktion erhalten, der eine Zahl übergeben wird, die angibt, wie vollständig der Upload ist.

CORS ist hier auch nützlich (das haben wir in Brads Vortrag gelernt), da wir es an jeden Server senden können, nicht nur an unsere eigene Domain. Hinweis: Ein häufiger Anwendungsfall wäre wie Amazon S3.

Das Event-Binding in dieser App nutzt Zeilenereignisse. Nicht die CSS-Eigenschaft, sondern die JavaScript-Ereignisse. Gestern gab es dazu einen Vortrag, den ich aber verpasst habe =(.

Diese App nutzt auch viele weitere HTML5-Funktionen: History API (popstate, URLs ändern), Screen Orientation API, CSS Transitions und Transforms, Web Fonts, das hidden-Attribut (genau wie display: none, aber mit einem HTML-Attribut), data-*-Attribute.

PhoneGap kann die Lücke füllen für Apps, die diese Funktionen benötigen, aber auf Geräten laufen, die sie nicht unterstützen.