Apps mit HTML & CSS
Vortrag von Stefan Regniet & Matthias Edler-Golla
Vortrag von Stefan Regniet & Matthias Edler-Golla
OpenAppMkt is an app store for HTML5 mobile apps.
The easiest way to discover and install mobile webapps on the Open Web, where freedom reigns and dreams come true. openappmkt.com
Moderne Websites/Web-Applicationen sind dank fluidem Layouts und dem Einsatz von Media Queries extrem an unterschiedliche Browsergrößen anpassbar
Es ist damit nicht mehr notwendig, unterschiedliche Website-Versionen für unterschiedliche Endgeräte zu erstellen.
Egal, ob der User mit einem Desktop-PC, einem iPad oder einem modernen SmartPhone die Site besucht – er bekommt eine auf die entsprechende Bildschirmauflösung angepasste Website.
Tip: Besuchen Sie doch mal unsere Website iPadYou.de mit dem iPhone oder einem modernen Browser (am besten: Safari oder Chrome) und verändern Sie die Größe des Browser-Fensters: Die Inhalte passen sich dynamisch an!
<!DOCTYPE html>
<html lang=de>
<head>
(…)
1 <meta name="viewport" content="width=device-width; initial-scale=1.0">
2 <meta name="apple-mobile-web-app-capable" content="yes" />
3 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
4 <link rel="apple-touch-icon" href="apple-touch-icon.png" />
(…)
</head>
Die oben aufgeführten Zeilen im HTML-Code sorgen dafür, dass:
Das Speichern geschieht direkt im Safari-Browser von iPhone/iPad
In modernen HTML-Apps können Daten (Bilder, HTML, CSS, Javascript) auf dem Endgerät gespeichert werden.
Dies geschieht mittels einer .manifest-Datei
CACHE MANIFEST
NETWORK:
data.php
CACHE:
css/style.css
images/icon.png
images/background.png
Daten lassen sich dynamisch in einer im Browser laufenden SQL-Datenbank speichern.
var database = openDatabase("Database Name", "Database Version");
database.executeSql("SELECT * FROM tabelle WHERE id = 1", function(result1) {
document.write('...');
});
Dank CSS3 und Javascript ist es möglich, Webstandard-konforme Präsentationen zu erstellen, die (auch) via iPhone oder iPad auf den Beamer projiziert werden können.
iPadYou-Präsentationen sind bei unserem Unterricht an der FH Salzburg laufend im Einsatz – Sie finden eine Auswahl auf der Website iPadYou.de
Wenn Sie auf die „Seitenzahlen“ klicken, wird die Übersicht aller Slides sichtbar. ↗
Wenn Sie Ihre Präsentation online gestellt haben und z.B. via eMail auf einen speziellen Slide verweisen wollen, können Sie dies folgendermaßen machen:
http://servername.de/demo/index.html#A_7 <a href="http://servername.de/demo/index.html#A_7">Angaben</a>
#A_7 gibt dabei an, dass S6 auf das Slide mit der Nummer „7“ springen soll – die Nummer des jeweiligen Slides sieht man oben rechts im Browserfenster!
Will man HTML-Seiten am iPad/iPhone via Beamer präsentieren, benötigt man dazu kleine Zusatz-Apps wie z.B. den GoodReader, der übrigens auch PDFs, Office-Dokumente und Filme darstellen kann.
Bei GoodReader müssen alle benötigten Dateien auf den iPhone/iPad herunterladen werden. Möchte man dies nicht machen, ist das Programm 2Screens eine interessante Alternative, die allerdings nur auf dem iPad läuft…
Wir freuen uns, wenn Sie „iPadYou" ausprobieren möchten!
Bitte melden Sie sich dafür kostenlos auf unserer Website an…
Dort können Sie auch das Script dieses Vortrag herunterladen.
Viel Spaß!
Stefan Regniet und Matthias Edler-Golla
iPadYou wird unter der GNU Affero Lizenz veröffentlicht.