Entwicklung multimedialer Anwendungen
Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm
Hochschule Harz
FB Automatisierung und Informatik
mwilhelm@hs-harz.de
http://www.miwilhelm.de
Raum 2.202
Tel. 03943 / 659 338
Inhalt
1. Einleitung
2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video)
4. CSS3 (Design) 5. SVG / Canvas
6. Tablet Ansteuerung (jQuery)
7. Geolocation
Lernziele
Neue Elemente in HTML5 und CSS
– Auszeichnungen (strong, em, etc.)
– Semantische Elemente (header, section, summary, details, etc.)
– Neue Formulare (number, range, date, etc.)
Grafik
– Pixelgrafik
– Vectorgrafik
– Canvas-Element
Multimedia
– Bilder
– Videos
jQuery
– Einführung in das Framework
HTML5 und CSS für Dummies David Karlins
HTML5 Handbuch
Stefan Münz / Clemens Gull
Schrödinger lernt HTML5, CSS3 und JavaScript Kai Günster
eher ein Bilderbuch
Literatur
Neue Elemente in HTML
■
Videos
•
Videos können ohne Plug-in abgespielt werden
■
Interaktivität und Animation
•
Vorher musste man komplizierte Java-Skript verwenden. Mit HTML5 kann man weitgehend alle Flash und JavaScript-
ersetzen.
■
Hintergrundbilder
•
Hintergrundbilder können direkt mit HTML5 erzeugt werden
■
Formen
•
Es ist relativ einfach komplexere Formen darzustellen
■
Anpassung an mobile Endgeräte
•
Bildschirm kleiner, CPU schwächer, Kontrast muss größer
sein
Neue Elemente in HTML
■
Neue Doctype-Deklaration
•
Es gibt nun eine einfachere Deklaration. Ich verwende diese aber NICHT.
■
Fluid-Design
•
Wird ersetzt durch das Responsive-Desig
•
Das Box-Modell kann abgerundet, gekippt und gedreht werden (border-radius, transform:rotate).
•
Aktueller Breitenstandard: 960 Pixel
■
Web-Fonts
•
Es gibt jetzt kostenlose Webfonts, die man nun sehr einfach
einbinden kann.
Neue Elemente in HTML
■
Semantische Tag‘s
•
Semantische Tags sind Tags, die den Inhalt und nicht das Aussehen beschreiben (Barrierefreie Seiten)
•
header header eines Absatzes
•
footer Fußnote eines Absatzes
•
article Hauptbereich eines Absatzes
•
section Unterabschnitte eines Absatzes
•
aside Seitenleisten
•
nav Navigationselemente
•
details WPF: extended
•
summary arbeitet mit details
•
figure enthält ein grafisches Element
Neue Elemente in HTML
■
Typografische Tags
•
bdi Text verläuft von rechts nach links
•
wbr manuelle Trennung
■
Programmierbare Tags
•
canvas
•
data jquery
Neue Elemente in HTML
■
Neue Formular-Tags
•
datalist ComboBox
•
keygen Generiert einen Schlüssel
•
output Anzeige von Ergebnissen
•
date
•
datetime
•
datetime-local
•
time
•
week
•
month
•
address
•
tel Telefon mit numerischer Tastatur (mobile)
Neue Elemente in HTML
■
Neue Tags
•
meter
•
number
•
range
•
•
pattern
•
search
•
color
•
progress progressbar
•
196. Level erreicht ?
•
upload
Neue Formular-Elemente in HTML5
■
Datentyp für Emailadresse(n) (email)
■
Datentyp für URLs (url)
■
Datentypen für numerische Eingaben
•
Numerischer Wert (ganzzahlig) (number)
•
Bereich (range)
•
Plausibilitätsprüfung und Tipps für die Eingabe
■
Datentyp für Datumsangaben
•
Monat, Woche (month, week)
•
Datum und Zeit (date, time, datetime)
•
Datum, Zeit, Woche
■
Farbauswahl (color)
■
Sucheingabe (search)
■
Datentyp für Emailadresse(n):
•
<input type="email">
■
Datentyp für URLs:
•
<input type="url">
■
Datentypen für numerische Eingaben
•
<input type="number">
•
<input type="range" min="10" max="100" step="5" value="55">
■
Auswahl einer Farbe
•
<input type="color">
■
Sucheingabe
•
<input type="search" name="search">
Neue Formular-Elemente in HTML5
■
Datentyp für Datumsangaben
•
<input type="day">
•
<input type="month">
•
<input type="year">
•
<input type="datetime">
Jahr, Monat, Tag, Stunde, Minute, Sekunde und Millisekunde nach UTC (Weltzeit)
•
<input type="date"> Jahr, Monat, Tag ohne Zeitzone
•
<input type="week">
•
