13.02.2 HTML, XML, JSON
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 110 | |
Author | ||
License | CC Attribution - NonCommercial - ShareAlike 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
Identifiers | 10.5446/9563 (DOI) | |
Publisher | ||
Release Date | ||
Language | ||
Producer |
Content Metadata
Subject Area | |
Genre |
Informatik 1, Winter 2010/2011101 / 110
1
2
3
5
6
8
10
12
13
19
25
26
27
30
32
39
42
47
48
49
53
54
55
56
58
59
61
64
66
67
69
70
71
72
78
79
81
82
83
87
92
93
94
96
97
98
99
101
102
106
107
108
109
110
00:00
ZahlAbsolute valueLattice (order)HTMLFormal languageHypertextMarkup languageACCESS <Programm>Algebraic closureTypAttribute grammarWeb pageElement (mathematics)ErweiterbarkeitXHTMLPhysical quantityComputer animation
04:10
Web browserFormal languageHTMLTypZahlComputer animation
05:15
HTMLCodeInsertion lossOpenOffice.orgComputer fileService (economics)Computer animation
08:41
Insertion lossOpenOffice.orgComputer animation
08:58
Text editorSTYLE <Programmierumgebung>Content (media)Computer animation
09:21
Internet ExplorerComputer animation
09:41
Internet ExplorerComputer fileComputer animation
09:57
Formal languageAlgebraic closureIP addressBoom (sailing)Computer animation
10:14
Formal languageComputer animation
10:27
Algebraic closureFormal languageIP addressWeb pageVariable (mathematics)Programming languageJavaScriptFirefox <Programm>Aktion <Informatik>Scripting languageTypInternetMathematical structureFile formatComputer animation
11:05
Programming languageJavaScriptHTMLTypFirefox <Programm>Mathematical structureVariable (mathematics)Web pagePlane (geometry)DebuggerComputer animation
Transcript: German(auto-generated)
00:01
Ich will Ihnen noch die beiden wichtigsten Beispiele für formale Sprachen in der Praxis zeigen. HTML und sehr verwandt damit XML-basierte Sprachen. In HTML finden Sie ein Dokument zusammengesetzt aus Elementen in XML genauso,
00:25
aber jeweils etwas anders geschrieben im Zweifelsfall. In HTML sieht das dann nachher so aus. Ein Element, ich sage jetzt mal bla, nachher ist das Element eine Überschrift, ein Bild, ein Textabsatz.
00:41
Ich sage jetzt einfach mal bla, hier steht dann drinnen, was das für ein Element ist. Das nennen Sie nachher tag. Wie ist das getaggt, das Element? In Spitzenklammern, also einfach kleiner größer Zeichen. Dann schreiben Sie Text da rein, zum Beispiel den Text für einen Absatz.
01:01
Und am Ende sagen Sie, okay, das ist das Ende vom Element, Schrägstrich und der Name des Texts. Nachher steht dann so etwas hier wie P für einen Textabsatz, Schrägstrich P für den Textabsatz, H1 für eine Überschrift, erste Ordnung. Und hier Schrägstrich H1, um die zu beenden, abzuschließen.
01:21
Und dazwischen steht dann die Überschrift oder der Textabsatz. Denen kann man noch weitere Daten mitgeben. Attribute nennen sich die, wenn es ein Attribut namens Bloop gäbe, dann könnte ich das da so zwischenschreiben, 2, 3, 4. Das wäre ein Element mit Inhalt. Aus solchen Elementen ist danach ein HTML-Dokument zusammengesetzt.
01:44
Die dürfen auch verschachtelt sein, sehen Sie gleich, hier darf auch wieder ein Element drinnen stehen. Nochmal die Begriffe hier, das wäre das tag, der Bezeichner für dieses Element. Das hier drinnen ist der Inhalt vom Element. Das wäre ein Attribut, es dürfen auch mehrere Attribute drinnen stehen.
02:01
Es geht auch ohne Inhalt, das sähe dann so aus, bla. Ein Attribut, das hätte den Wert 2, 3, 4. Und kein Inhalt. Das ist auch okay mit HTML. Es endet dann einfach so. Das hängt jeweils von dem Typ des Elements ab. Einige haben Inhalt, andere haben nicht.
02:22
Manche müssen, manche dürfen. In XML sieht das Ganze etwas strenger aus. In XML sieht das so aus wie bla auch, der Name des Texts. Dann müssen aber die Werte in Anführungszeichen gesetzt sein, 2, 3, 4.
02:44
Jetzt kommt der Inhalt. Und am Ende steht hier jetzt wieder auch der Abschluss, da tut sich das nichts. Nur wenn so ein Element ohne Inhalt vorkommt, erzwingt XML, dass da stehen muss, bla. Das Attribut.
03:01
Da müssen wir mit Doppel-B schreiben, egal. Das Attribut. Und dann will XML, dass da steht, Schrägstrich größer. Ich sollte mal die Unterschiede markieren. Also XML will Anführungszeichen haben und es will bei einem leeren Element einen Schrägstrich am Ende haben.
03:22
Das habt ihr wahrscheinlich mitgekriegt. Es gibt auch eine XML-Variante von HTML, XHTML, XHTML. Das muss dann alles auch so aussehen. Aber die klassische Variante von HTML ist sehr großzügig. Das hab ich gar nicht gesagt. HTML, die Hypertext Markup Language, die Auszeichnungssprache für Hypertext.
03:47
Und XML, die extensible, erweiterbare Markup Language. Eigentlich ist XML für sich selbst keine Sprache. Man kann eigene Sprachen damit formulieren. Die sehen aber alle so aus.
04:03
Mit Elementen in Spitzenklammern. Unverschaktet, unverschaktet. So, jetzt einmal den HTML angeguckt. Die Seite mach ich mal auf. Das ist, was Sie kennen vom Browser. So sehen Sie HTML typischerweise.
04:20
Und dahinter steckt eben so ein Dokument in dieser formalen Sprache. Die erste Zeile ist ziemlich hässlich. Sagt nur, was für ein Typ an Sprache das ist. Was für ein Typ an Dokument das ist. Ignorieren wir. Und dann sehen Sie hier ein Element mit dem Tag HTML.
04:43
Da wird es abgeschlossen, da unten. Darin steckt ein Element mit dem Tag Het. Von wegen Hetter, der Kopf. Da wird es abgeschlossen. Und ein zweites mit dem Namen Buddy, der Körper. Da wird es abgeschlossen.
05:01
Und den Het steckt wieder eines. Mit dem Tag Title, der Titel der Seite. Eine geniale Seite. Wo sehen wir den hier? Hier sehen Sie den Titel der Seite. Der taucht nachher auch als Lesezeichen auf. Wenn Sie den hier als Lesezeichen speichern,
05:24
haben Sie den auch unter dem Titel eine geniale Seite. Im Körper steht jetzt der Text der Seite. Eine Überschrift.
05:41
H heißt dann, wir sind jetzt bei Semantik, sehen Sie. Semantik heißt das. Oh, hier kommt jetzt eine Überschrift. Das soll die Überschrift sein. Dann kommt P, Paragraph. Ein Textabsatz. Noch ein Textabsatz. Dann H1, noch eine Überschrift. Sie sehen die Umlaute. Das kann man anders einstellen. Aber eigentlich sollten die Umlaute erst mal so aussehen.
06:01
Kaufmannsund Umlaut. Und zwar ein großer Umlaut. Semikolon ist der Code dann für das große Ü. Man kann tatsächlich, wenn man es richtig einstellt, auch ein großes Ü reinschreiben. Aber das hier ist die schönere, saubere Variante. Universiellere Variante.
06:21
Also Sie können diese Elemente verschachteln, verschachteln, verschachteln. Wie Sie sehen. Das malen wir vielleicht noch einmal gerade auf. Als Idee. Es entsteht nämlich mit der Weise ein Baum.
06:43
Diese Dokumente bilden einen Baum. Sie sehen was außen die Wurzel sein muss. Die Wurzel ist HTML. HTML, HTML. In der Wurzel gibt es jetzt zwei Kinder. Nämlich einmal Het und einmal Buddy.
07:04
In dem Het gibt es noch ein Kind. Das ist der Titel. Da stehen nachher auch unsäglich viel mehr drin. Aber lassen wir es dabei. Und in dem Buddy stehen jetzt fünf Kinder drin. Er hat eine Überschrift erster Ordnung H1.
07:22
Und einen Textabsatz. Und noch einen Textabsatz. Und eine weitere Überschrift erster Ordnung. Und noch einen Textabsatz. Das gilt für alle HTML und XML Dokumente. Die müssen einen sauberen Baum bilden.
07:40
Die tun sie automatisch, weil diese Verschachtlung das erzwingt. Sie können nicht dieses Buddy-Tech mitten in der Überschrift zumachen. Das Buddy-Tech muss nach der Überschrift zugemacht werden. Und dann ergibt sich automatisch diese Baumstruktur.
08:02
Vor allem das Weitesuchen zeige ich einmal gerade noch. XML bekommen Sie zum Beispiel, wenn Sie einfach OpenOffice aufmachen.
08:27
Irgendein Text, wie auch immer. Das speichere ich. Unter einem sehr klugen Namen. Und wenn Sie da reingucken in die Datei, die da gerade geschrieben worden ist.
08:43
Dazu müssen Sie die ganz dreistum benennen auf zip. Wenn Sie die jetzt doppelklicken würden, würde ja wieder OpenOffice aufgehen. Wenn Sie einfach diese in zip umbenennen. Ohne Rücksicht auf Verluste. Und da reingucken, in das zip. Stehen Sie fest, aha, was Ihnen das Programm einfach geschrieben hat.
09:02
Ist eine Sammlung von XML-Dateien. Eigentlich hat es Ihnen nur nicht mitgeteilt. Hier können wir zum Beispiel uns den Inhalt, Content angucken. Hier sehen Sie Styles. Das scheinen also die Formatierungen abgespeichert zu sein. Wir können mal in Content reingucken. Vielleicht erst mal mit einem normalen Texteditor.
09:21
Sorry, aus dem zip. Content, da. Und Sie sehen, aha, das war noch ein bisschen unübersichtlich hier. Aber irgendwo geht das los hier mit Spitzenklammern. Es wird etwas übersichtlicher, wenn man das in einer Bauansicht aufmacht.
09:44
Zum Beispiel mit dem Internet Explorer. Sie nehmen diese Datei und ziehen den auf den Internet Explorer. Dann öffnet er die in einer Bauansicht. Jetzt kann ich hier die einzelnen Unterabteilungen des Baums auf und zu klappen.
10:05
Das sieht dann aus wie HTML, aber on steroids. Mit allen möglichen Ergänzungen. Ich müsste jetzt erst mal suchen, wo überhaupt der Text ist. Irgendwo sollte auch der Text sein. Ah, da ist der Text. Irgendwo steht tatsächlich unser Text drin. Schön eingerahmt von Text.
10:22
Also das Prinzip sehr ähnlich wie HTML. Auch eine formale Sprache. Das hier wäre XML. Sie sehen hier alles schön in Anführungszeichen gesetzt. Immer schön Schrägstrich vor dem Abschluss. Abschließend wollte ich Ihnen noch eine formale Sprache zeigen, die mehr und mehr in Mode kommt.
10:42
JavaScript Object Notation. Ohne A geschrieben. JSON gesprochen. Ist deutlich schlanker als die XML basierten Formate. Und wird deshalb mehr und mehr insbesondere in Internetanwendungen verwendet. Vor allem weil es auch JavaScript in JavaScript eingebaut ist.
11:01
Aber auch in mehr und mehr andere Internetumgebungen eingebaut ist. JavaScript ist ja die Sprache, die Programmiersprache für HTML Seiten. Ich habe noch mal das Beispiel von eben jetzt im Firefox. Als Beispiel von eben, aber etwas garniert.
11:22
Seitenquelltext. HTML wie eben. Jetzt kommt aber eine weitere Sprache mitten rein. JavaScript. Hier außen ist noch HTML. Hier sage ich OK. Vorsicht. Nun kommt eine Portion JavaScript. Von da hinten bis da.
11:41
Und hier geht es weiter mit HTML. Wenn man das ganz richtig professionell aussähe, müsste man noch ein bisschen was dazuschreiben. Also funktioniert es. Ich möchte es nicht überfrachten an der Stelle. Also in HTML noch eine andere Sprache rein. JavaScript, die Programmiersprache für Webseiten. Und in dieser Programmiersprache verwende ich jetzt JavaScript Object Notation.
12:03
JSON, was hier steht, dieser Teil hier, ist die Beschreibung von Daten. In dieser JavaScript Object Notation. Ich richte eine Variable ein, namens A. Und da soll dann etwas kompliziertes drinstehen. Analog zu einem Strakt in C.
12:23
Ein Titel, das soll der Titel sein. Ein Datum, das soll das Datum sein. Eine Uhrzeit, das soll die Uhrzeit sein. Eine Location ist wieder eine Struktur mit Adresse, Ort und Postleitzahl. Jeweils dahinter angegeben. Teilnehmer soll ein Array sein. Markiert man hier in JSON mit der eckigen Klammer. Und jeder Eintrag in diesem Array hat Nachname und Vorname.
12:45
Jeder Eintrag ist wieder eine Struktur. Ohne, dass diese Strukturen tatsächlich benannt wären wie Personen. Oder dass die, wie ich sagen würde, was in diesem Array an Typen drin steht. Ich schreibe nur die Daten. Wir nennen hier diese Typen aber nicht. Das kann man sich auch in Aktionen angucken.
13:05
Wenn ich hier den Firebug anmache, den muss man sich getrennt installieren. Das ist auch nichts. Firebug haben wir hier. Neuladen. So. Firebug, wie der Name sagt, ist der Debugger für Webseiten.
13:25
Was suche ich jetzt eigentlich? Also. Meine Variable A. Was steckt da drin? Da steckt meine Variable A drin. Genau, was ich hier gesagt habe.
13:42
In der Variable A auf oberster Ebene hat sie ein Datum, eine Uhrzeit. Datum, Uhrzeit, alphabetisch sortiert. Sie hat eine Location. Und die Location hat für sich wieder Adresse, Ort, Postlerzahl und die Teilnehmer. Eine Liste. Zwei Einträge. Eintrag Nr. 0. Eintrag Nr. 1. Der eine ist Eintrag bin ich.
14:01
Und der zweite Eintrag ist blablabla. Blub. Das ist JSON. Das ist also eine recht knappe Sprache. Wie man hier sieht, ist JSON. Das ist eine recht knappe Sprache, um Daten praktisch beliebiger Art zu übertragen.
14:23
Und das Ganze etwas, nicht nur etwas, sondern deutlich schlanker als das mit XML passiert.