Anzeige
Tutorialbeschreibung

Web-Apps erstellen: Das kann die App

Web-Apps erstellen: Das kann die App

In den folgenden Video-Trainings werdet ihr Arbeitstechniken kennenlernen, mit denen ihr eure eigenen Web-Apps erstellen könnt. Was es da für Techniken gibt und wie die Web-App im Endeffekt aussehen könnte, möchte ich euch gleich am Anfang zeigen. So seht ihr sofort, was euch in den kommenden Video-Trainings erwartet.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Die App enthält grundlegende Funktionen, die man von einer typischen Web-App erwarten kann. Die technische Basis bildet dabei jQuery mobile.

Bilder



 
Dieses JavaScript-Framework wurde speziell für die Erstellung von Web-Apps entwickelt. Bereits ein Blick auf die Demo-Seiten zeigt, wo die Stärken von jQuery mobile liegen. Ihr könnt mit wenig Code (JavaScript und CSS) Anwendungen erstellen, die von ihrer Optik und Funktionalität sehr stark an klassische Apps erinnern. Damit das funktioniert, müsst ihr in die App die entsprechenden JavaScript-Bibliotheken einbinden. Dabei gilt: zuerst jQuery, danach jQuery mobile.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

Sobald jQM eingebunden wurde, lassen sich die Funktionen des Frameworks nutzen. Und die haben es durchaus in sich. So bekommt man zunächst einmal im Handumdrehen das typische Look & feel mobiler Anwendungen. Dafür stellt jQM beispielsweise auch die Icons zur Verfügung, die man von klassischen Apps her gewohnt ist.

Bilder



Außerdem gibt es Funktionen wie Popups, filterbare Listen und zahlreiche Formularelemente. Sämtliche Dinge lassen sich dabei nutzen, ohne dass man sich tiefgreifend mit JavaScript oder CSS auskennen müsste.


 

Die Beispiel-App

Um euch zu zeigen, was man mit jQM alles machen kann, habe ich eine kleine Beispiel-App erstellt, in der einige wichtige Funktionen von jQM enthalten sind. Diese App und deren Funktionen werden euch in den folgenden Tutorials immer wieder begegnen. In diesem ersten Tutorial möchte ich euch kurz zeigen, was die App alles kann und was euch somit in den kommenden Tutorials erwartet.

Es handelt sich um eine ganz typische Web-App, die ihre Besucher zunächst einmal mit einer Eingangsseite begrüßt.

Bilder



Optisch orientiert sich das Ganze an dem sogenannten b-Theme. Das verwendete Theme gibt man dabei immer über das Attribut data-theme an.
<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="b">

Wenn ihr euch bereits jetzt einen Eindruck davon verschaffen wollt, welche Themes außerdem noch zur Verfügung stehen, könnt ihr einen Blick auf die Seite http://demos.jquerymobile.com/1.2.1/docs/api/themes.html werfen. Wie bereits beschrieben, habe ich mich für Theme b entschieden.

 
Im unteren Fensterbereich der App gibt es einen Navigationsbereich.

Bilder



 
Hierüber lassen sich die einzelnen Seiten aufrufen. Der Fußbereich selbst wurde – das ist übrigens ein typisches Merkmal für Navigationsbereiche in jQM – mittels einer ungeordneten Liste erstellt.
<div data-role="footer" data-id="footernav" data-tap-toggle="false" data-position="fixed" data-theme="b">
    <div data-role="navbar" data-theme="b">
      <ul>
        <li><a href="workshops.html" data-icon="menue" data-transition="fade">Tutorials</a></li>
        <li><a href="anfahrt.html" data-icon="anfahrt" data-transition="fade">Anfahrt</a></li>
        <li><a href="kontakt.html" data-icon="kontakt" data-transition="fade">Kontakt</a></li>
        <li><a href="zeichnen.html" data-icon="kontakt" data-transition="fade">Zeichnen</a></li>
      </ul>
    </div>
  </div>

Auch hier bietet euch jQM wieder zahlreiche Möglichkeiten, um Navigationsstrukturen so aussehen zu lassen, wie man das von klassischen Apps her gewohnt ist. Nun ist die Navigation im Fußbereich natürlich nicht zum Selbstzweck da. Vielmehr lassen sich darüber die einzelnen Elemente aufrufen, die für die weiteren Tutorials entscheidend sind.

 
Los geht es mit einer JSON-Anwendung.

Bilder



 
Bei der werden die in einer JSON-Datei hinterlegten Informationen ausgelesen und an der gewünschten Stelle innerhalb der App angezeigt. jQuery selbst bietet mit getJSON eine erstklassige Möglichkeit, auf JSON-Dateien zuzugreifen und deren Inhalte auszugeben.
<script type="text/javascript">
$('#workshops').on("pageshow", function() {
  $('#liste').empty();  $.getJSON('workshops.json', function(data) {
$.each(data.workshops, function(i,item){
$('<li><a href="workshop_detail.html" data-transition="slide" onClick="javascript:sessionStorage.workshops=\''+item.name+'\';"><img src="images/'+item.bild+'" /><h3>' + item.name + '</h3>' + '<p>' + item.inhalt + '</p></a></li>').appendTo('#liste');  });
$('#liste').listview('refresh');
});
});
</script>

Auch dazu natürlich an späterer Stelle mehr. Sinnvoll sind solche JSON-Anwendungen vor allem immer dann, wenn ihr automatisch Inhalte ausgeben wollt, die beispielsweise von externen Quellen stammen.

Weiter geht es mit einer Anwendung, die eigentlich in keiner Web-App fehlen darf. Dabei handelt es sich um eine Anfahrtsskizze.

Bilder



 
Für die Anzeige dieser Karten wird auf Google Maps zugegriffen. In den entsprechenden Tutorials erfahrt ihr dann übrigens nicht nur, wie sich die Karten einbinden lassen, auch der Umgang mit Markern – also Markierungen auf den Karten – wird ausführlich gezeigt.

Was natürlich in einer App ebenfalls nicht fehlen darf, ist ein Formular.

Bilder



 
Und hier zeigt jQM seine wahre Stärke. Denn die Formularelemente sehen aus und funktionieren tatsächlich so wie "echte" App-Elemente. Bei der Definition von Formularelementen greift man übrigens auf simple HTML5-Syntax zurück.

Hier ein Beispiel für die Definition eines einfachen Textfeldes:
<div data-role="fieldcontain">
<label for="vname">Vorname:</label>
<input type="text" name="vname" id="vname" placeholder="Vorname"  />
</div>

Es handelt sich offensichtlich um ganz normale HTML-Syntax. Es fällt lediglich das data-role-Attribut auf. Über das wird dem Formularelement letztendlich die Rolle zugewiesen, die es einnehmen soll. Auf diese Weise lassen sich also ansprechende Formularelemente erstellen.
<div data-role="fieldcontain">
<label for="menge">Wie viele Tutorials erstellst du?:</label>
<input type="range" name="menge" id="menge" value="0" min="0" max="40"  />
</div>

Mehr auch zu diesem Thema dann in den kommenden Tutorials.

Eine kleine Spielerei, die ich ebenfalls integriert habe, ist eine Zeichenfunktion. Mit der könnt ihr eure App dahingehend erweitern, dass per Touch-Eingabe gemalt werden kann. Auch das ist sehr einfach umsetzbar. Verwendet wird dafür das euch vielleicht bekannte canvas-Element aus HTML5.
<canvas id="canvas" width="600" height="600">
Dein Browser ist leider nicht HTML5-kompatibel
</canvas>

Innerhalb dieser canvas-Fläche kann dann gezeichnet werden. In diesem Zusammenhang werdet ihr die verschiedenen Events kennenlernen, die für eine solche Anwendung abgefragt werden müssen.
var touchStart = function(event) {
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
    canvas.moveTo(startX, startY);
};

Denn nur, wenn man gezielt erkennen kann, wann ein Benutzer die Finger auf die Touch-Oberfläche legt und sie wieder entfernt, kann man tatsächlich eine Mal-Anwendung erstellen.

Das ist also die Beispiel-App. Wie ihr seht, hat sie durchaus interessante Funktionen zu bieten, die euch dabei helfen können, mehr Besucher an eure eigene Web-App zu binden.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Balu..der..Bär
Portrait von MicroSmurf
  • 03.09.2014 - 19:12

Interessantes Tutorial. Danke.

Portrait von Domingo
  • 24.08.2014 - 22:29

Das Tutorial hat sich gelohnt.

Portrait von Steve007
  • 24.08.2014 - 19:51

Vielen Dank für diesen 1. Teil Deiner interessanten Reihe.

Portrait von teste123
  • 24.08.2014 - 19:34

Herzlichen Dank für das Tutorial.

Portrait von samtron
  • 24.08.2014 - 19:32

hallo und vielen Dank

Portrait von pallasathena
  • 24.08.2014 - 19:04

Danke! Echt interessant, was da alles möglich is

Portrait von Domingo
  • 24.08.2014 - 18:47

Herzlichen Dank für das Tutorial auch von mir.

Portrait von Lisa Steib
  • 24.08.2014 - 18:30

Super!
Ich bin gespannt auf diese Tutorial-Serie! :)

Portrait von Caesarion2004
  • 24.08.2014 - 17:47

Vielen Dank für das informative Tutorial samt Datei.

Portrait von Kundentest
  • 24.08.2014 - 17:23

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 24.08.2014 - 17:08

Danke für das Tutorial, eine klasse Reihe!

Portrait von Domingo
  • 17.08.2014 - 13:11

Gefällt mir wirklich sehr gut. Danke

Portrait von figge
  • 17.08.2014 - 11:37

Danke für diese neue Serie.

Portrait von Domingo
  • 17.08.2014 - 11:01

Das war sehr informativ, vielen Dank.

Portrait von Caesarion2004
  • 17.08.2014 - 10:58

Vielen Dank für das interessante Video und die Datei.

Portrait von Dineria
  • 17.08.2014 - 10:51

Ich fürchte eher, dies ist der Einleitungsteil zur wohl bereits fertigen Serie... ;-)

Portrait von Franzp
  • 17.08.2014 - 10:33

Danke für das Video, freue mich schon auf die nächsten Folgen

Portrait von Kundentest
  • 17.08.2014 - 10:01

Herzlichen Dank für das Video.

Portrait von a_green
  • 17.08.2014 - 07:59

Das Thema schein interessant zu werden

x
×
×