Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 04): Die Grundstruktur der App

Web-Apps erstellen (Teil 04): Die Grundstruktur der App

Die Web-App besteht zunächst einmal natürlich aus einer HTML5-Basisstruktur. Darauf wird die gesamte App aufgebaut. Grund genug also, in diesem Video-Training einen detaillierten Blick auf die HTML5-Grundstruktur der App zu werfen. Denn das ist die Basis für eure eigene Web-App. Nachdem das Grundgerüst für die App erstellt ist, geht es abschließend darum, wie ihr Icons für eure App einbinden könnt. Diese Icons können die Besucher dann auf dem Home-Screen ihres Smartphones ablegen und darüber eure App ganz bequem aufrufen.

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


Am Anfang der App-Entwicklung steht die Definition der Grundstruktur.

Bilder



Das könnte zunächst einmal ein ganz einfaches HTML5-Dokument sein.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PSD-Tutorials.de</title>
</head>
<body>
   <h1>Herzlich willkommen</h1>
      <p>Wir freuen uns</p>
   <h1>Unsere Tutorials</h1>
      <p>Hier findet ihr eine Auswahl unserer Tutorials.</p>
</body>
</html>


 
Los geht es mit der Definition des Dokumenttyps.

<!DOCTYPE html>

Anders als in früheren HTML-Versionen gibt es in HTML5 nur noch eine Doctype-Angabe. Die altbekannte Aufteilung in

• frameset,
• transitional und
• strict

hat also ausgedient. Das umschließende Element ist html.

Weiter geht es mit der Definition des head-Bereichs.

<html>
<head>
<meta charset="UTF-8">
<title>PSD-Tutorials.de</title>
</head>


Innerhalb von head werden allgemeine Angaben zum Dokument erwartet. Wichtig ist hier zunächst einmal die Angabe des Zeichensatzes. Laut HTML5-Spezifikation muss die Angabe des Zeichensatzes innerhalb der ersten 1024 Bytes des Dokuments stehen. Ihr müsst die Bytes natürlich nicht abzählen; packt die Zeichensatzangabe einfach möglichst weit an den Anfang des Dokuments.

<meta charset="UTF-8">

Daran schließen sich die verschiedenen Meta-Angaben des Dokuments an, deren wichtigste zweifellos der Titel ist. Ebenso werden hier JavaScript- und CSS-Dateien eingebunden. Zudem können im head-Bereich App-spezifische Dinge enthalten sein. Mehr dazu im Anschluss.

Im body-Bereich steht das, was letztendlich im Browser angezeigt wird.

Die aufgeführte Datei, in der das Grundgerüst enthalten ist, könnt ihr unter dem Namen index.html abspeichern. Das ist die Hauptseite eurer App, die nun Schritt für Schritt ausgebaut wird.


 

CSS für die Gestaltung

Ok, das Grundgerüst der App steht. Hinsichtlich der Optik hapert es allerdings noch. Tatsächlich müssen nun noch Formatierungen vorgenommen werden. Und klar, dabei kommt CSS zum Einsatz. Es soll an dieser Stelle keine Einführung in CSS geben. Ich gehe vielmehr davon aus, dass ihr wisst, was es mit CSS auf sich hat und wie man es nutzt. Legt euch auf der Ebene, auf der ihr die index.html abgespeichert habt, das Verzeichnis styles an. Dieses Verzeichnis dient fortan als Container für eure Stylesheets.

Bilder



 
Innerhalb von styles wiederum wird die Datei styles.css erstellt. Diese Datei bindet ihr in eure index.html ein.

<link href="styles/styles.css" rel="stylesheet" type="text/css" />

Um die einzelnen Elemente der App individuell gestalten zu können, solltet ihr diese mit Klassen und IDs ausstatten. Wie so etwas aussehen kann, zeigt das folgende Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PSD-Tutorials.de</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
 <h1>Die PSD-Tutorials.de-App</h1>
</header>
  <h1>Herzlich willkommen</h1>
      <p class="content" >Wir freuen uns</p>
  <h1 class="intro">Unsere Tutorials</h1>
      <p class="content" >Hier finden Sie eine Auswahl unserer Tutorials</p>
<footer>     
 <p>Copyright by PSD-Tututorials.de</p>
</footer>     
</body>
</html>


 
Der Hauptüberschrift wird ein Hintergrund mit abgerundeten Ecken zugewiesen.

Bilder



 
Verwendet wird dafür die border-radius-Eigenschaft.

header h1{
   font-size:30px;
   border-radius:20px;
   background-color:#000;
   color:#fff;
   text-transform:uppercase;
}


Auf diese Weise könnt ihr nun also mittels CSS die HTML-Struktur gestalten.


App-spezifische Dinge einfügen

Gleichgültig, wie viel ihr per CSS gestaltet, damit sich die App auch tatsächlich wie eine App anfühlt, müssen auch App-spezifische Dinge eingefügt werden. Das betrifft zunächst einmal hauptsächlich den Kopfbereich der Seite. Fügt dort folgende beide Meta-Angaben ein.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


Durch die erste Angabe wird die App auf dem Smartphone im Vollbildmodus angezeigt. (Genau genommen werden Tabs und Adresszeile ausgeblendet). Die zweite Zeile bewirkt hingegen das Ausblenden der Statusbar. Beide Angaben in Kombination bewirken also einen Vollbildmodus. Die Web-App wirkt dadurch schon mal deutlich mehr wie eine echte App. Allerdings greifen die Einstellungen nur, wenn die App auch tatsächlich vom Home-Screen aus aufgerufen wird. Damit das möglich ist, sollte für den Home-Screen auch ein entsprechendes Icon eingebunden werden.

 
Das Icon sollte eine Größe von 57 mal 57 Pixel haben. Speichert dieses Icon unter dem Namen "icon-iphone.png" im Bilderverzeichnis der Webseite.

Bilder



Wobei ich im folgenden Beispiel von dieser Verzeichnisstruktur ausgehe:

index.html
styles
---styles.css
images
--- icon-iphone.png


 
Eingefügt wird das Icon folgendermaßen:

<link rel="apple-touch-icon" href="images/icon-iphone.png"/>

Um auch andere Geräte mit abzudecken, könnt ihr zusätzliche dieser Aufrufe einfügen. So werden dann eigentlich alle Apple-Besonderheiten abgedeckt. Das betrifft dann eben auch das Retina-Display.

<link rel="apple-touch-icon" href="images/icon-iphone.png"/>
<link rel="apple-touch-icon" href="images/icon-ipad.png" sizes="72x72" />
<link rel="apple-touch-icon" href="images/icon-iphone-retina.png" sizes="114x114" />
<link rel="apple-touch-icon" href="images/icon-ipad-retina.png" sizes="144x144" />


Um den Glanzeffekt der Icons müsst ihr euch übrigens nicht selbst kümmern, das wird von den Endgeräten selbst gemacht. Wollt ihr die Glanzeffekte allerdings explizit unterdrücken, könnt ihr das ebenfalls machen, müsst dafür aber die Syntax etwas anpassen.

<link rel="apple-touch-icon-precomposed" href="images/icon-iphone.png"/>
<link rel="apple-touch-icon-precomposed" href="images/icon-ipad.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="images/icon-iphone-retina.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="images/icon-ipad-retina.png" sizes="144x144" />


Bei Android-Geräten könnt ihr ebenfalls ein Icon auf dem Startbildschirm platzieren. Verwendet hier die folgende Angabe:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />

Das Bild sollte eine Größe von 72x72 Pixel haben.

Auf diese Weise könnt ihr die App also schon mal eine ganze Ecke nativer erscheinen lassen. Selbstverständlich fehlen noch zahlreiche Dinge, damit aus einer normalen HTML5-Seite eine App wird, die auch tatsächlich wie eine App aussieht.


 

Icons erstellen

Die Icons könnt ihr prinzipiell natürlich mit jedem beliebigen Grafik-Tool erstellen. Mittlerweile gibt es aber auch einige Webseiten, auf denen man das noch einfacher machen kann. Eine davon findet ihr unter http://www.quirco.com/iPhoneIcon/.

Bilder



 
Hier müsst ihr lediglich die gewünschte Grafik, aus der das Icon erstellt werden soll, auswählen. Es muss sich dabei um eine Grafik in einem der Formate GIF, PNG, JPG, BMP oder TIF handeln. Legt anschließend die Optionen (Glanz, Runde Ecken, Schatten) fest. Mit Make Icon wird das Icon erstellt.

Bilder



Auf der sich öffnenden Seite werden die Icons in den verschiedenen Größen angezeigt und können direkt heruntergeladen werden.

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

Super Tutorial! Besten Dank und weiter so...

Portrait von Kundentest
  • 14.06.2014 - 17:27

Herzlichen Dank für das Tutorial.

Portrait von Steve007
  • 14.06.2014 - 12:12

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

Portrait von MicroSmurf
  • 08.06.2014 - 19:27

Vielen Dank für den weiteren Teil.

Portrait von Caesarion2004
  • 08.06.2014 - 17:52

Vielen Dank für das interessante Tutorial sowie die Materialien.

Portrait von BOPsWelt
  • 08.06.2014 - 14:31

Vielen Dank für den vierten Teil.

Portrait von johen
  • 08.06.2014 - 13:51

Danke für die Textversion der Reihe!

Portrait von figge
  • 08.06.2014 - 12:25

Danke für die Einfürhung in die App-Erstellung.

Portrait von ninafee
  • 08.06.2014 - 12:13

Vielen Dank für das Tutorial und die Arbeitsdateien.

Portrait von Steve007
  • 09.05.2014 - 19:39

Vielen Dank für Dein interessantes Video - Training.

Portrait von rocking_sid
  • 04.05.2014 - 04:36

Vielen Dank für das informative Video-Training!

Portrait von MicroSmurf
  • 03.05.2014 - 22:49

Vielen Dank für dieses Video. Wieder verständlich erklärt.

Portrait von Caesarion2004
  • 03.05.2014 - 21:16

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

x
×
×