iPadYou // 7-12-2010 // Apps mit HTML & CSS


|



 



Apps mit HTML & CSS

Vortrag von Stefan Regniet & Matthias Edler-Golla


Apps für iPhone/iPod/iPad via AppStore

apple-app-store

Apps für iPhone/iPod/iPad via HTML(5)/CSS/Javascript

html5_for_designers
HTML5 for Web Designers by Jeremy Keith

Open App Market

openappmkt

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


Responsive Design

Olive-oil-bubble-variations
Olive oil bubble variations von fdecomite

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!


Besondere Settings im HTML-Code für iPhone/iPad


<!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:

  1. die App in Original-Größe geöffnet wird
  2. bei iPhone/iPad die App ohne „Chrome“ von Safari gezeigt wird, wenn diese auf dem Homescreen gespeichert ist
  3. die Farbe der Statusleiste schwarz wird
  4. die App auf dem Homescreen ein markantes, selbsterstelltes Icon bekommt

Speichern einer Web-App (1)

Das Speichern geschieht direkt im Safari-Browser von iPhone/iPad

Laden der Web-App in Safari auf dem iPhone
Hinzufügen der App zum Homescreen

Speichern einer Web-App (2)

Benamen der App
Web-App auf dem Homebildschirm

Speichern einer Web-App (3)

Web-App ohne „Browser-Chrome“

Offline-Browsing

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	


Clientseitige Datenbanken

webkit_stickyNotes

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('...');
});

http://webkit.org/demos/sticky-notes/index.html


Konkretes Beispiel: HTML/CSS-Präsentationen aus der Hosentasche

iPodTouch_P1070604
iPadYou auf dem iPod Touch „Retina“

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.

Einmal erstellen – auf vielen Endgeräten ansehen:


iPadYou.de

Homepage von ipadyou.de

iPadYou-Präsentationen sind bei unserem Unterricht an der FH Salzburg laufend im Einsatz – Sie finden eine Auswahl auf der Website iPadYou.de


Bedienung

Übersicht aller Slides

Wenn Sie auf die „Seitenzahlen“ klicken, wird die Übersicht aller Slides sichtbar.

Tastatur-Befehle

0 („Null“)
Zurück zur ersten Seite der Präsentation
→ (Pfeiltaste rechts)
Nächste Seite
← (Pfeiltaste links)
Vorherige Seite
C
Aufruf eines deutlich größeren Cursors – funktioniert momentan nur bei Safari & Chrome
?
Hilfe zu den Tastaturbefehlen
SPACE („Leerzeichen“)
Übersicht aller Slides sichtbar/unsichtbar schalten

Verlinken auf einen speziellen Slide

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!


Apps für Präsentationen am iPad/iPhone

goodreader
2screens_icon

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…


Erstellen und Verändern einer neuen Präsentation

iPadYou befindet sich noch im Entwicklungsstadium.
Funktioniert aber schon...

Ausprobieren von iPadYou.de

ipadYou_aufmacher

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.