HTML and CSS Reference
In-Depth Information
6.3 »Shake it like a Polaroid picture« - die Umsetzung
Nach den ersten Vorüberlegungen widmen Sie sich nun der Umsetzung der App.
Dabei schauen wir uns gemeinsam alle benötigten Teile an und programmieren und
gestalten Schritt für Schritt die App.
6.3.1 Die HTML-Datei
Wie Sie es bereits aus den vorhergehenden Kapiteln gewohnt sind, starten Sie mit
einigen Ergänzungen im head -Bereich, die Zoom- und WebApp-Icons konfigurieren
sowie die CSS-Datei verlinken:
<head>
<!-- iOS WebApp Metatags -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" >
<!-- Homescreen Icons für iOS und Android -->
<link rel="apple-touch-icon-precomposed" href="/bilder/icon-ipad.png"
sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="/bilder/icon-iphone-
retina.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="/bilder/icon-ipad-
retina.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="/bilder/icon-iphone.png" />
<!-- CSS Stylesheet -->
<link href="styles/styles.css" rel="stylesheet">
</head>
Listing 6.4 Der Kopfbereich der HTML-Datei, welcher Verknüpfungen zu Icons und
Stylesheets enthält sowie die Webseite als WebApp konfiguriert
Der body -Bereich dieser WebApp ist sehr übersichtlich:
<!-- Polaroid-->
<div class="polaroid-rahmen">
<div class="flickr-bild"></div>
</div>
<footer>
<button>Polaroid laden!</button>
</footer>
Listing 6.5 Der Inhalt des body-Bereichs
Search WWH ::




Custom Search