Diese auf impress.js basierende Präsentation sollte in einem Browser betrachtet werden, der HTML5 beherrscht. Ihrer tut es nicht oder nicht vollständig.

Zum Anfang

Kolloquium Wissensinfrastruktur: Sommersemester 2013

HTML5

Sebastian Wolf / Ralf Hofacker

Version 1.1, letzte Aktualisierung 18.11.2014
Dauerhaft gültige URL dieser Präsentation: http://ub.unibi.de/kwihtml5

Was ist HTML?

  • Hypertext Markup Language
  • Auszeichnungssprache für Webseiten
  • Auszeichnung mit Tags, z.B.
    <p> <br> <table>

Warum HTML5?

  • Verschiedene HTML-Versionen
  • Bisher Plugins und Add-Ons notwendig für Video, Audio, 3D-Grafik, Mikroformate

Warum HTML5?

  • Immer mehr Software komplett online
  • Besonderheiten für Mobile Endgeräte

Der Weg zu HTML5

  • 1992: HTML reiner Text
  • 1993: HTML + <h1> <p> <a> <img>
  • 1995: HTML 2.0 <form>
  • 1996: CSS (Style Sheets) h1 { font-size:48px; }
  • 1996: Javascript alert("Hello World!");

Der Weg zu HTML5

  • 1997: HTML 3.2 <table> <applet>
  • 1998: CSS 2 position, z-index, a[href]
  • 1999: HTML 4.01 <style> <script> <frameset>
  • 2000: XHTML 1 <p></p> <br /> <img … alt=""/>
  • 2005: AJAX (Asynchrones Javascript + XML)
  • 2011: CSS 3 @ media, :nth-child

XHTML 2 oder HTML5?

  • W3C wollte XHTML weiterentwickeln
  • XHTML 2 verlangt einen Browser mit XML-Parser mit rigoroser Fehlerbehandlung
  • XHTML 2 nicht abwärtskompatibel

XHTML 2 oder HTML5?

  • Browserhersteller diktieren die HTML-Praxis
  • Browserhersteller gründen Arbeitsgruppe (WHATWG) und entwickeln HTML 4.01 weiter zu HTML5
  • Browserhersteller implementieren erste HTML5-Features
  • W3C gibt XHTML auf, adaptiert HTML5 und eröffnet seine eigene Arbeitsgruppe

"Kern"-HTML5 umfasst:

  • HTML
  • CSS
  • Javascript

Erweiterter HTML5-Begriff: Umfasst verschiedene Webtechnologien, teilweise außerhalb der Spezifikationen von WHATWG und W3C: HTML5-Spezifikations-Übersicht

HTML5
Beispiele

Vereinfachter Header

HTML 4 XHTML HTML5
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/
html4/strict.dtd">		 <?xml version="1.0"
encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/
xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/
1999/xhtml" xml:lang="de">		 <!DOCTYPE html>

Vereinfachter Header

HTML 4 XHTML HTML5
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/
html4/strict.dtd">		 <?xml version="1.0"
encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/
xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/
1999/xhtml" xml:lang="de">		 <!DOCTYPE html>

Strukturierung

HTML 4 / XHTML HTML5
<div id="header"> <header>
<hgroup>
<div id="topnav"> <nav>
<div id="sidenav"> <aside>
<div class="content"> <article>
<section>
<div id="footer"> <footer>
<div class="date"> <time datetime="…">

Mikrodaten

  <article
	itemscope itemtype="http://schema.org/ScholarlyArticle" 
	itemid="http://pub.uni-bielefeld.de/publication/2580621">
	<h1 itemprop="name">Towards Linked Research Data</h1>
	<section>
	  Authors <a itemprop="author" href="/person/27436085">Wiljes, Cord</a>
	</section>
	<section itemprop="about">
	  Abstract: For Open Science to be widely …
	</section>
	</article>

Neue Formularattribute

<input type="email" placeholder="…" />
<input type="date" />

Mobile Endgeräte zeigen passende Tastatur an

Mit CSS lässt sich das ganze designen (z.B. invalide Angaben). Wie das geht zeige ich gleich :-)

Patternmatching

<input type="text" pattern="[0-9]{4}[-]{1}[0-9]{4}">

Zum Testen geben Sie etwas in das Eingabefeld ein und drücken Sie Return

Angepasste Select-Box

<input type="text" list="schulung"/>
<datalist id="schulung">
<option value="…">

Zum Testen geben Sie etwas in das Eingabefeld ein

Video und Audio

<audio id="audio" src="sound.mp3" controls></audio>
<video id="video" src="movie.webm" controls poster="images/standbild.png"></video>

Video und Audio von http://slides.html5rocks.com/

CSS3
Beispiele

Selektoren (1)

td:first-child {
  background: #ccc;
}
Zeile 1
Zeile 2
Zeile 3
Zeile 4

Selektoren (2)

tr:nth-child(odd) {
  background: #fff;
}
tr:nth-child(even) {
  background: #ccc;
}
Zeile 1
Zeile 2
Zeile 3
Zeile 4

Selektoren (3)

td:nth-child(odd) {
  background: #fff;
}
td:nth-child(even) {
  background: #ccc;
}
Zeile 1
Zeile 2
Zeile 3
Zeile 4

"Prüf"-Attribute

:invalid {   border: 5px solid #f00; }
:valid {   border: 2px solid #0f0;}

Zum Testen geben Sie etwas in das Eingabefeld ein. Nicht korrekte Eingaben werden rot umrandet, korrekte Eingaben grün.

Webfonts

@font-face {
  font-family: 'DejaVu Sans Mono';
  src:url(dvsm.ttf); 
}

body {
  font-family: 'DejaVu Sans Mono';
}
Jede(r) liest diesen Text in DejaVu Sans Mono

Runde Ecken (1)

.button {
border:2px solid #b6c828;
border-radius:10px;
padding:10px;
background-color:#eff3d7;
}

Zum Runde-Ecken-Generator

Runde Ecken (2)

.tab {
border:1px solid #b6c828;
background-color:#eee;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom:0;
}
HTML CSS Javascript

Mehrere Spalten

.columns { 
-column-count: 2;
-column-rule: 1px solid #bbb;
-column-gap: 2em;
}
Weit entfernt in den unerforschten Einöden eines total aus der Mode gekommenen Ausläufers des westlichen Spiralarms der Galaxis leuchtet unbeachtet eine kleine gelbe Sonne. Um sie kreist in einer Entfernung von ungefähr achtundneunzig Millionen Meilen ein absolut unbedeutender, blaugrüner Planet, dessen vom Affen abstammenden Bioformen so erstaunlich primitiv sind, dass sie HTML5 noch immer für eine unwahrscheinlich tolle Erfindung halten.

Minimal abgewandelt aus Douglas Adams: Per Anhalter durch die Galaxis

Javascript
Beispiele

Änderungen "on-the-fly"

Spaltenzahl: 2
Weit entfernt in den unerforschten Einöden eines total aus der Mode gekommenen Ausläufers des westlichen Spiralarms der Galaxis leuchtet unbeachtet eine kleine gelbe Sonne. Um sie kreist in einer Entfernung von ungefähr achtundneunzig Millionen Meilen ein absolut unbedeutender, blaugrüner Planet, dessen vom Affen abstammenden Bioformen so erstaunlich primitiv sind, dass sie HTML5 noch immer für eine unwahrscheinlich tolle Erfindung halten.

Minimal abgewandelt aus Douglas Adams: Per Anhalter durch die Galaxis

Buttons für Audio/Video

<audio id="audio" src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;
<video id="video" src="movie.webm" autoplay controls></video>
document.getElementById("video").play();

Speichern (Web Storage)

saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

Zum Testen geben Sie etwas ein und drücken Sie "Speichern". Klicken Sie anschließend auf "Neu laden" (Strg + R).

Probleme beim Einsatz

  • Meist nur für moderne Browser (Chrome / Firefox 20+, IE 10+)
  • Verschiedene Videoformate (kein Standard)
  • Sehr komplex (insb. Javascript)

Lösung: Frameworks!

  • Javascript + CSS
  • Browserweichen "on board"
  • Demo-Anwendungen
  • Müssen aktuell gehalten werden

Beispiele

  • jQuery, Bootstrap
  • jQuery Mobile
  • impress.js, Chosen

HTML mit jQuery Mobile

Einführung, Standards

Praxisbeispiele

(Nicht nur) Google meint

Vielen Dank
für Ihre
Aufmerksamkeit!

Verwenden Sie die Pfeiltasten zum Navigieren