Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Entwicklung einer Web-App mit jQuery Mobile

Wir können durchaus eine Web-App komplett von Hand mit HTML5, CSS3 und JavaScript erstellen. Dazu wird das Aussehen der entsprechenden Elemente für die unterschiedlichen Plattformen einfach über CSS dann nachgebildet.

Sehr viel bequemer ist es mit einem Framework. Dadurch werden die Elemente einer Web-App exakt so dargestellt, wie die Nutzer von Apps es gewohnt sind. Insbesondere muss man sich bei der Erstellung nicht um das Aussehen auf verschiedenen Plattformen kümmern sondern kann das getrost dem Framework überlassen.

Als Framework nutzen wir jQuery mobile. Wir kümmern uns also um die wichtigen Dinge und lassen jQuery mobile die entsprechenden Elemente „malen“ und die entsprechenden Boxen mit runden Ecken und Schatten versehen.

jQuery Mobile

Download unter https://jquerymobile.com/

Um es offline testen zu können, kann man jQuery Mobile als ZIP-Datei herunterladen. Dadurch hat man dann alle JavaScripts, CSS-Dateien und Bilder.

Die aktuellste Version findet sich unter: https://jquerymobile.com/download/

Das Ganze ist auf der Website aufgeführt unter jquery.mobile-VERSIONSNUMMER.zip

Ansonsten kann man sehr einfach folgende 3 Zeilen im Kopfbereich einbinden:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Grundgerüst der HTML-Datei mit jQuery Mobile

Im ersten Schritt benötigen wir das typische HTML5 Grundgerüst

<!DOCTYPE html>
<html>
<head>
    <title>Beispiel für WebAPP über jQuery Mobile</title>
    <meta charset="UTF-8" />
    <meta name="author" content="https://www.html-seminar.de/" />
	<link rel="stylesheet"  href="jquery.mobile/demos/css/themes/default/jquery.mobile-1.2.0.css" />
	<link rel="stylesheet" href="jquery.mobile/demos/docs/_assets/css/jqm-docs.css" />
	<script src="jquery.mobile/demos/js/jquery.js"></script>
	<script src="jquery.mobile/demos/docs/_assets/js/jqm-docs.js"></script>
	<script src="jquery.mobile/demos/js/jquery.mobile-1.2.0.js"></script>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
    <!-- ICONS -->
    <!-- eigene CSS-Defintionen -->
    <link href="css/design.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>erste Webapp</h1>
</body>
</html>

Die Bereiche für die Web-App werden nun eingeteilt. Normalerweise wird sich eine Startseite, … Kontaktseite finden. Zur Einteilung der Seiten im folgenden Kapitel mehr.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe