Apps mit HTML5, CSS3 und JavaScript

Entdecken Sie die Möglichkeiten von HTML5 und CSS3 für die Entwicklung von modernen und plattformübergreifenden Apps. 

507 Seiten – 12 Kapitel – 1 Ziel

Egal, ob für Tablets oder Smartphones, für Android oder iOS. Schnell erhalten Sie ein Gefühl für die technischen und gestalterischen Möglichkeiten einer mobilen Anwendung.


3. aktualisierte und erweiterte Auflage

  • Konzeption

    Vorbereitung ist das A und O. In diesem Kapitel zeigen wir Ihnen, wie Sie auf neue Ideen kommen und eine App richtig konzipieren.

  • HTML5 & CSS3

    Konzeption ist das eine, die Umsetzung das andere. In diesem Kapitel zeigen wir Ihnen die Grundlagen von HTML5, CSS3 und JavaScript.

  • Design – Das Feeling einer App

    Die Programmierung einer App ist die eine Sache, die andere ist das Aussehen, das Feeling, die Funktionsweise – kurzum: das Design!

  • Schneller zur eigenen App mit Frameworks

    Als moderner Softwareentwickler steht bei Ihnen vor allem eines an erster Stelle: Effizienz und Pragmatismus!

  • Positionsbestimmung

    Immer wissen, wo man ist – eine der großen Stärken von Smart- phones. In diesem Kapitel lernen Sie, die Nutzerposition mit JavaScript auszulesen und für Ihre App zu verwenden.

  • Den Bewegungsensor auslesen

    In diesem Kapitel lernen Sie, wie Sie mithilfe von JavaScript den Bewe- gungssensor des Mobilgeräts auslesen.

  • Offline-Funktionalität

    WebApps funktionieren nach dem »Always On«-Prinzip – doch was, wenn die Internetverbindung einmal wegbricht? In diesem Kapitel lernen Sie, Ihre App offlinefähig zu machen.

  • Backend als Webservice

    Mit HTML, CSS und JavaScript lassen sich das Aussehen und das Verhalten einer App auf dem Gerät ausgezeichnet umsetzen. Sobald es jedoch um die Speicherung und das Abrufen von Daten auf einem Server geht, müssen härtere Geschütze ran. Wie Sie dennoch ohne Serversprachen Ihr eigenes Backend anlegen, lernen Sie in diesem Kapitel.

  • Native Apps mit Cordova

    Im Browser funktioniert Ihre App bereits, doch Sie möchten auf weitere Hardware des Endgeräts zugreifen und die App in einem App Store veröffentlichen. All das und noch viel mehr in diesem Kapitel.

  • Veröffentlichung in einem App Store

    In diesem Kapitel erfahren Sie alles über die Durchführung einer Test- phase sowie die Veröffentlichung Ihrer App in einem App Store.

  • App Marketing

    In diesem Kapitel erfahren Sie alles, um Ihre App geschickt zu vermarkten. Vom Namen, über das App-Icon bis hin zu einer Landingpage, sowie der Platzierung in Blogs und Co.

  • Bonus!

    Schon einmal von React.js gehört? Oder Sie suchen nach den besten Inspirationswebseiten? Kein Problem, ebenfalls im Buch.

Fehler im Beispielcode von Kapitel 5 – "Where to Eat"

In der App-Entwicklung passieren Fehler – ständig. Deswegen ist es unablässig, immer und immer wieder seinen Code zu testen, auf verschiedenen Geräten und im Browser – die Entwicklerkonsole von Safari oder Chrome ist unser Freund.

Ab und zu jedoch übersieht man einen Fehler, oft nur eine Zeile, die dann den kompletten Code zum Erliegen bringt – und genau das ist uns in der "Where to Eat"-App passiert.

Wer die Where to Eat-App wie im Buch beschrieben nachbaut oder den Beispielcode öffnet, wird von einer weißen Browserseite begrüßt – keine Karte, die Toolbar nicht klickbar. Eine Fehlermeldung in der Konsole weißt darauf hin, dass irgendwas mit Google Maps nicht stimmt – was wir zunächst für die Ursache hielten. APIs ändern sich ständig, oft muss Code angepasst werden, damit eine App so weiter funktioniert wie ursprünglich angedacht. In diesem Fall jedoch ist nur der Sensor-Parameter obsolet geworden – er kann in Zeile 82 der index.html entfernt werden:

Tatsächlich wird die Google-Karte ganz wunderbar in den Speicher des Browsers geladen - nur eben nicht richtig dargestellt. Die Ursache dafür liegt in Zeile 11 und 44:

.karte, .google-karte {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

Die umschließende Segmented Control des Ratchtet Frameworks benötigt diesselben CSS-Eigenschaften wie die Google-Karte selbst – das haben wir übersehen – sorry!

Damit die Segmented Control auch im Desktopbrowser ordentlich funktioniert, sollten Sie im Chrome-Inspector die Touchfunktionen aktivieren – die Toolbar hört nur auf Touch-Events, nicht auf Mausklicks.

Den aktualisierten und garantiert funktionierenden Quellcode können Sie hier herunterladen: where-to-eat.zip

Autoren

Wer sind Ihre Autoren?

  • Florian Franke

    Florian Franke ist Designer in Frankfurt und Autor des »Laker Compendium« zur Gestaltung von HTML5-Magazinen. Mit seiner Agentur »made in« gestaltet er Marken, Webseiten und Apps.

  • Johannes Ippen

    Johannes Ippen ist Designer in Berlin. Im April 2011 veröffentlichte er »aside«, das erste reine HTML5-Magazin für das iPad. Zurzeit arbeitet er beim Social-Game-Entwickler Wooga am Spiel »Pocket Island« – selbstverständlich als HTML5-WebApp.

HTML5 rockt!

Steigen Sie ein in die Welt von HTML5, CSS3 & JavaScript und erstellen Sie spielend leicht Apps!

  • Name


Made with Qards