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
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - ich würden mich freuen und es würde mich für weitere Inhalte motivieren :).
Spenden
Sie können mir eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie das HTML-Seminar weiter - ich freue mich immer über Links und Facebook-Empfehlungen.
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
