Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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.