Webtechnologien - Multimediaseite
Übung 9+10

Multimediapräsentation in HTML5

Markus Stelzl

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
1

HTML5 - Semantische Elemente

• Grundlegende Strukturierung mit

  <nav>, <header>, <footer>

• Beitragsformatierung über

  <section>, <aside>, <article>, <address>, <time>

• "Section" Kategorie - Nicht wie div zum Layouten verwenden
• "Nav" Wie Section aber mit Navigation
• "Aside" Sidebars, Werbung, Navigation - Separat zu Seiteninhalt
• "Article" Post oder Beitrag - Format kommt öfeter vor

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
2

Prefetching

• Holen und Cachen von Resourcen
• Ladezeiten werden minimiert
• Achtung! Nicht eine ganze Website cachen!
• Syntax:

  <link rel="prefetch" href="http://www.example.com/"> Firefox
  <link rel="prerender" href="http://www.example.com/"> Chrome

• Browsers: Mozilla Firefox, Google Chrome Version 13>
• Alternative: Javascript Bibliothek jQuery verwenden

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
3

SVG Scalable Vector Graphics

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="30">
   <polygon 
      points="100,10 40,180 190,60 10,60 160,180" 
      style="fill:lime;stroke:purple;stroke-width:5;">
</svg>

Mehr Info SVG Tutorial Zur Grafik Einbetten in HTML5

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
4

Audio

Audio Datei

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
5

Video

Mehr Info

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
6

Formulare 1

Colorpicker Chrome

<input type="color" name="favcolor">

Datum: Chrome

<input type="date" name="bday">

Datum/Zeit: Chrome

<input type="datetime" name="bdaytime">

E-mail: Firefox/Chrome

<input type="email" name="usremail">

Mehr Info

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
7

Formulare 2

URL: Firefox/Chrome

<input type="url" name="homepage">

Suche: Chrome

<input type="search" name="googlesearch">

Verendetes Element "input" mit unterschiedlichem Typ:
color, date, datetime, atetime-local, email, month, number, range, search, tel, time, url, week

Mehr Info

Internettechnik - Webtechnologien - Übungen
BsC, Vollzeit
8

Übungsaufgabe

• Ziel: Seite für eine Produktpräsentation
• Planen Sie Ihre Seite am Papier oder im Grafikprogramm
• Erstellen Sie daraus eine HTML5 Seite
• Verwenden Sie die in den Folien gezeigten Elemente

Mehr Info