http://www.beindorff-ipland.de/fileadmin/user_upload/Seminare/Softwarelizenzen_im_rechtlichen_Blickfeld.pdf

http://www.conect.at/uploads/tx_posseminar/conect_Bernhard_CHSH_Softwarelizenzen.pdf

Hier könnt ihr eure Notizen, Sammlungen von hilfreichen Links etc. zum Thema sammeln. Einige Beiträge gibt es bereits aus vorhergehenden Prüfungsvorbereitungen.

Weiterführende Links

http://css-selektoren.mozork.de/

http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Damit ist entweder die allgemeine Positionierung von Elementen mit CSS gemeint oder die Hintergrundbildpositionierungen mit CSS.

Positionierung von Elementen mit CSS

de.selfhtml.org/css/eigenschaften/positionierung.htm

Hier einige kurze Beispiele dafür:

Hintergrundbildpositionierungen mit CSS

de.selfhtml.org//css/eigenschaften/hintergrund.htm#background_image

Beispiel:

body{
background-image:url(../bilder/body-Hintergrund.jpg);
background-repeat: no-repeat; //(repeat-x, repeat-y, repeat)
background-position: left top;
//oder
background-position: center top;
//oder
background-position: 10px 30px;  //(10 von links, 30 von oben)
}

ALLGEMEINE POSITIONIERUNG IM CSS

• body{
• background-image: url(grafi k.gif);     = Hintergrundbild liegt im selben Ordner wie CSS-Datei
• background-position: right bottom;     = position des Hintergrundbildes.
• background-repeat: no-repeat oder repeat;    = (keine) Wiederholung des Hintergrundes
• background-size: cover;     = Anzeigegröße des Hintergrundbildes.
• } 
• background-size:
• cover = Fläckendeckendes Bild, füllt ganzen Bildschirm aus, Bild wird hierbei "abgeschnitten", wenn Größe nicht passt.
• auto = Skaliert originalformat auf gesamte Breite des Bildschirms
• contain = Bild wird auf Inhalts"größe" des Webseitencontents skaliert.

In HTML einbinden (index.htm)

index = startseite

• Verknüpfung durch <img> Tag
• width, height = Breite und Höhe, Maße des Bildes, können in px "100" oder in Prozent "30%" angegeben werden
• alt = “...“ Beschreibung des Bildes, zur Orientierung für Blinde. Suchmaschinen erkennen so
• den Bildinhalt. Berschreibung wird angezeigt, wenn Bild nicht darstellbar ist.
• src = “button.png“ Dateiname und Verlinkung des Bildes
• href="link" Verlinkt das Bild mit einer Webseite

<img src=“button.png“ width=“200“ height=“200“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im selben Ordner wie der HTML-Code <img src=“Bilder/button.png“ width=“20%“ height=“30%“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im Unterordner „Bilder“ !ACHTUNG!alt ist sehr wichtig beim Einfügen eines Bildes. Gründen siehe oben.

Videos zum Thema

Grundlagen für den Gebrauch von Bilder auf einer der Webseite in HTML mit dem IMG Element. Wichtige Attribute bei Bildern sind sicherlich CLASS, TITLE und ALT.

https://www.youtube.com/watch?v=_BArhD7NubE

Auch hier grundlegende Informationen wie man Bilder Bilder in HMTL einfügt. 
https://www.youtube.com/watch?v=XvKT3FWSLfo

Möchte man Hintergrundbilder im HTML verwenden, dann werden diese über CSS zugewiesen.
https://www.youtube.com/watch?v=u5Chq_GF_8k

Bilder werden mittlerweile nicht mehr nur über IMG eingebunden. Für responsives Webdesign können Bilder an bestimmte Bildschirmanforderungen geknüpft werden. Z.B. Handy im Hochformat hat andere Anforderungen als ein 5K iMac. Dann kommt das PICTURE Element hinzu.
https://www.youtube.com/watch?v=uLLqafzVIlw&list=PLPjKx80JC4CAWBNOp8z_LJqYIekU8MzKi&index=4

Bilder für das Web optimieren ist ein ergänzender Teilbereich. Natürlich sollte man sich Gedanken über Auflösung und Qualität sowie Speicherplatz machen.
https://www.youtube.com/watch?v=udaLENwDyXY

Weiterführende Links:

http://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html

CSS-Box-Modell
eine CSS-Box definiert sich durch:
- Breite(width), Höhe(height), Rahmenlinie(border), Außenabstand(margin) zum umgebenden Kasten oder Browserfenster, Innenabstand(padding) zum Inhalt des Elements, farbigem Hintergrund(background-color)

Der Innenabstand: padding (Polsterung)
Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand. Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs. Padding kann für alle vier Seiten einer Box einzeln definiert werden. Die Eigenschaften sollte jeder kennen, dennoch hier nochmal:
padding-top für oben
padding-right für rechts
padding-left für links
padding bottom für unten
Padding funktioniert übrigens bei Block und Inline Elementen absolut identisch

Der Rahmen drum herum: border (Rahmenlinien)
Um das padding legt sich der Rahmen (border), der Rand der Kiste, der eine eigene Breite, Linienart und Farbe annehmen kann (width, style, color).Die Eigenschaften hier heißen:
border-top
border-right
border-bottom
border-left
Der border ist sehr flexibel und kann für jede dieser vier Seiten eine gesonderte Breite, Linienart und Farbe erhalten. Die Regeln zur Erstellung von Rahmenlinien mit border gelten ohne Einschränkungen auch für Inline Elemente

Der Außenabstand: margin (Rand)
Jede Box kann einen Außenabstand (margin) haben, der ebenfalls für alle vier Seiten einzeln definiert werden kann:
margin-top
margin-right
margin-bottom
margin-left
Der Außenabstand liegt außerhalb der Box und übernimmt die Hintergrundfarbe des umgebenen Elements. margin darf im Gegensatz zu border und padding übrigens auch negative Werte haben.

Das Team der mediencommunity

Einführung in CSS-Kaskadierung: http://jendryschik.de/wsdev/einfuehrung/css/kaskade

Allgemeines:
Die Positionierung eines Elements bietet gestalterisch einen gewissen Spielraum.
So kann man mit einer gewissen Positionierung eines Elements andere Überlagern, per JavaScript bewegen lassen, oder einfach eine bestimmte Anordnung der Elemente festlegen.

Diese Angabe im CSS kann auf alle Elemente angewendet werden, ist nicht vererbbar und zeigt sich optisch im Browser.

Die vier Arten:
- static
- relative
- absolute
- fixed

static
Initialwert eines Elements.
Die Positionierung durch top,right,bottom und left ist hier unwirksam.
Elemente mit diesem Wert werden von links nach rechts und oben nach unten positioniert, also im Textfluß.

relative
Relative Positionierung im Textfluß.
Die Angaben top,right,bottom und left, verschieben dieses Element aus deren relativen Position und hat keinen Einfluss auf die nachfolgenden Elemente.

absolute
Absolute Positionierung eines Elements zum Eltern-Element, welches ebenfalls positioniert sein muss.
Diese Elemente liegen über alle anderen und haben keinen Einfluss auf die Positionierung der anderen.
Die Angaben top,right,bottom und left, positionieren dieses Element ausgehend vom Eltern-Element... dies kann z.B. ein anderes DIV oder der BODY Tag sein.

fixed
Wie absolute. Bis auf, dass sich das Element am Browserfenster orientiert und nicht mit gescrollt wird.
Man kennt diese Positionierung von fest positionierten Navigationen oder Werbebannern.

im CSS wird die Positionsart wie folgt bestimmt:

#beispiel {
   position: fixed;     <<< Art der Positionierung
   top: 10px;     <<< Abstand von oben
   left: 20px;     <<< Abstand von links
}

Positionierung durch "float":
Durch das Floaten von Elementen werden diese aus dem Textfluss genommen und verdrängen so nachfolgende Elemente mit ihrer Breite und Höhe und nicht in der gesamten Breite.
So können zum Beispiel Bilder von Texten umgeben werden.

Arten von float:
- left
- right

 Left positioniert das Element links im Eltern-Element und right tut dieses rechts im Eltern-Element.

#beispiel {
   float: left;
}

Weiterführende Links

http://little-boxes.de/lb1/IV-css-positionierung.html

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

http://www.css4you.de/position.html

"Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren. Als Selektoren bezeichnet man die Teile einer CSS-Regel, die vor dem Abschnitt aus geschweiften Klammern stehen. Voneinander unabhängige Selektoren, denen dieselben Eigenschaften zugewiesen werden, können in einer mit Kommata getrennten Selektor-Liste notiert werden." - Quelle: selfhtml.org

Außerdem: Terminologie von CSS-Selektoren

link zu w3schools CSS selectors

Wozu sind Selektoren da?

Selektoren innerhalb einer CSS-Datei sprechen HTML-Tags an und weisen diesen Attribute (Farbe, Hintergrundfarbe, Textformatierung uswusf.) zu und geben dazu die entsprechenden Werte an.

Klingt gut, aber wie sieht so ein Selektor aus?

Die Syntax (Schreibweise) einer CSS-Regel ist wie folgt:

Selektor { Attribut: Wert; }

wobei man jedem Selektor auch mehrere Attribute zuweisen kann. Will man dies denn nun tun, so trennt man die einzelnen Attribute immer mit einem Semikolon voneinander ab.

Bsp.: Selektor { Attribut, Wert; Attribut: Wert; Attribut: Wert; … }

Welche Selektoren gibts denn so?

Der Universalselektor

Wie man ihn auch aus den SQL-Befehlen kennt, das *. Mit dem Sternchen (Asterisk) spricht man alle Elemente einer HTML-Datei an, das heißt, dass allen Elementen die Attribute zugewiesen werden, die man in so einer CSS-Regel notiert.

Bsp.: * { color: #fff; background-color: #000; }

Mit dieser CSS-Regel wird allen Elementen weiße Schriftfarbe und schwarze Hintergrundfarbe zugewiesen. Sinn macht das sicherlich keinen, es dient lediglich dem Zweck.

Der Tag- bzw Typ-Selektor

Will ich nun genauer vorgehen und nur bestimmte Elemente meiner HTML-Datei ansprechen, so kann ich dies indem ich zum Beispiel nur einer bestimmten Sorte von Tags Attribute zuweise. Das ist einfacher als einem Kind nen Lolli zu klauen, glaubt es mir:

Bsp.: h1 { color: #f00; font-size: 36px; font-weight: bold; }

So, damit haben wir jeder Überschrift höchster Ordnung (jedem Tag h1) die Werte "rote Farbe", "Schriftgröße 36 Pixel" und "Schriftschnitt fett" zugewiesen.

Der Klassen-Selektor

Jetzt wird es langsam spannender. Wir wollen jetzt eine Klasse definieren. Klassenselektoren kann man beliebig vielen Tags auf einer HTML-Seite zuweisen. Nehmen wir an, wir haben Überschriften zweiter Ordnung (h2) einmal in der linken Spalte einer Webseite auf weißem Hintergrund und einmal in der rechten Spalte auf schwarzem Hintergrund. Dumme Geschichte, denn wir haben ja vorher notiert:

h2 { color: #000; }

wodurch alle Überschriften der zweiten Ordnung nun schwarz sind und somit rechts nicht mehr lesbar.

Das Problem lösen wir einfach indem wir allen h2-Tags auf der rechten Seite folgenden Zusatz geben:

<h2 class="name">Überschrift</h2>

Jetzt können wir diese Überschriften gesondert ansprechen mit einem Klassenselektor:

.name { color: #fff; }

Die Notierung ist also ein Punkt und der Name, den man dem Tag als Wert zuweist. Der Name ist hierbei frei wählbar. Ob man also sinnvoll ausschreibt "rechts" bei unserem Beispiel oder "name" wie ich oder sowas schönes wie "mistmistmist" bleibt euch überlassen. Wichtig ist folgende Schreibweise:

.klassenname { Attribut: Wert; }

Der ID-Selektor

Wie der Klassenselektor kann man auch mit dem ID-Selektor einzelne Tags verändern, auch wenn man diese vorher schon mit einem Tag-Selektor verändert hat. Man sollte nur in das Tag des Elements das Attribut id notieren und sich wieder einen lustigen Namen einfallen lassen.

<h2 id="name">Noch eine Überschrift</h2>

Unterschiede zum Klassenselektor gibt es allerdings nicht nur in der Schreibweise! Oh ja, denn eine ID vergibt man nur ein einziges Mal in einer HTML-Datei. Wie auch in Datenbanken werden IDs nur einmal vergeben und damit hat sichs.

Merke: Klassen so oft man lustig ist, IDs nur ein einziges Mal vergeben.

Wie notiert man ID Selektoren nun in einer CSS-Datei? Ganz einfach:

#idname { Attribut: Wert; }

Also eine Raute mit dem ID-Namen, geschwungene Klammer und so weiter und so fort wie bisher.

Hier sind wir dann am Ende mit dem oberflächlichen Selektorengedönse angelangt. Ich werde auf Wunsch gerne noch erklären was Attributselektoren sind, wie man Kindselektoren notiert, welche Sonderzeichen es noch gibt neben Raute und Punkt und was diese dann so bewirken und was Pseudoselektoren sind (Letztere sind übrigens m.E. nicht zu verachten und sicherlich Prüfungsrelevant, bzw. kann ich mir nicht vorstellen, dass man die weglässt. Aber das weiß ja nur die zfa -__- ).

Pseudo-Selektoren

Wer da den Namen gewählt hat weiß ich nicht, aber er klingt sehr seltsam beim ersten Mal. Ein Pseudoselektor wird hinter einem Selektor angefügt und beschreibt bestimmte Zustände des Elements, welches man mit dem Selektor angesprochen hat.

Zum Beispiel haben Links vier verschiedene Zustände. Da wäre der "Normalzustand", wo der liebe Link einsam und allein auf der Website rumhängt und keiner mit ihm interagiert. Dies wäre der :link Zustand. Will man also diesem Zustand eines Links Eigenschaften zuweisen, macht man das so:

a:link { Attribut: Wert; }

Dann hätten wir noch die Links, welche schonmal besucht wurden. Sprich sie wurden bereits einmal vom Benutzer der Seite angeklickt und wechseln somit in den benutzten Zustand (klingt etwas schmutzig).

a:visited { Attribut: Wert; }

Der dritte Zustand ist der beliebte "Mouseover-Effekt" oder "Rollover-Effekt". Früher hat man sowas mit Javascript gelöst, heute geht das mit CSS viel einfacher:

a:hover { Attribut: Wert; }

Hierzu muss man sagen, dass es noch den zusätzlichen Zustand a:focus gibt, der für Barrierefreiheit und Menschen, die mit der Tastatur navigieren gedacht ist. Sprich, a:hover ist für Mausinteraktion und a:focus ist für Tastaturinteraktion (ganz grob formuliert).

a:focus { Attribut: Wert; }

Der vierte Zustand ist der aktive Zustand eines Links. Das wäre dann der Moment in dem der User ihn anklickt und direkt mit dem Link interagiert. Auch für diesen Zustand kann man Eigenschaften dem Link zuweisen, was über folgende CSS-Regel passiert:

a:active { Attribut: Wert; }

WICHTIG! Wenn man alle vier Zustände in einer CSS-Datei beschreibt, dann muss dies auch genau in der Reihenfolge passieren, die ich soeben verwendet habe. Warum das so ist? Wegen der Vererbung von Eigenschaften; Und glaubt mir, da wollt ihr nicht, dass ich zu detailiert werde, es ist einfach wichtig, dass die Reihenfolge eingehalten wird:

a:link,
a:visited,
a:hover,
a:focus,
a:active { Attribut: Wert; }

Kombinierte Selektoren

Wie ihr oben seht, habe ich die verschiedenen Selektoren durch Kommas getrennt und dann allen { Attribut: Wert; } zugewiesen und ja, das funktioniert auch. Zum Beispiel kann es ja sein, dass ich nicht will, dass all meine Überschriften fett geschrieben werden. Ich hab ne h1, ne h2 und ne h3 und alle drei sind se fett. Also notiere ich folgende CSS-Regeln:

h1 { font-weight: normal; }
h2 { font-weight: normal; }
h3 { font-weight: normal; }

Rischdisch? Ja, richtig, aber es geht viel einfacher mit einem "Kombiselektor":

h1, h2, h3 { font-weight: normal; }

Alle drei Überschriften sind nun nicht mehr fett, sondern normal ausgezeichnet und wir haben Platz, Zeit und Datenmenge bei der CSS-Datei gespart.

Kindselektoren (Sonderzeichen die Erste: ">")

Gerade haben wir etwas über die kombinierten Selektoren gelernt, nun kommen wir zu den Kindselektoren. Wie der Name bereits sagt, geht es darum Kinder von Elementen anzusprechen mit einer CSS-Regel um genau diese Kinder zu stylen.

Warum? Weil es ja sein kann, dass man für die komplette Seite festgelegt hat, dass alle Links rot und fett sein sollen, da man rot + fett = super findet. Jetzt haben wir aber auch eine super Navigationsleiste, welche rot hinterlegt ist und somit sieht man unsere Superlinks darauf nicht.

Was tun? Wir sprechen die Links in der Navigation gesondert an, indem wir einen Kindselektor schreiben. 

Bsp.: Vorausgesetzt wir haben einen Container (div) mit einer ID "nav" und haben darin die Navigation untergebracht in Form einer unsortierten Liste "ul", welche die Listenpunkte "li" enthält, welche wiederum die Links "a" enthalten, dann können wir diese Kindeskindeskindeskinder mit einer CSS-Regel direkt ansprechen:

#nav ul li > a:link { color: #000; }

Jetzt sind alle Links im Container "nav" mit der "ul" und den "li"s darin schwarz.

Ein einfacher Kindselektor wäre zum Beispiel:

body > p { Attribut: Wert; }

In diesem Fall stylen wir nicht den Body sondern alle Paragraphen, die Kindelemente des body-Tags sind. Andere Paragraphen auf der Seite, welche Kinder anderer Elemente sind, sind davon nicht betroffen! Klar soweit?

Elternselektor

Wäre sinnvoll, ne. Gibts aber nicht. Es gibt keine CSS-Regel mit einem "kleiner als" Klämmerchen und deswegen gibts da auch nix zu wissen. Weitergehen, es gibt hier nichts zu sehen!

Nachbarselektor (Sonderzeichen die Zweite: "+")

Ach, aber den gibts? Ja, den gibt es. Folgendes Beispiel macht das relativ eindeutig.

Bsp.:

<h2>Überschrift</h2>
<p>Erster Paragraph</p>
<p>Zweiter Paragraph</p>

Welch Dilemma, wir wollen nur den ersten Paragraphen verändern und den zweiten unberührt lassen. Wir machen wir das nun? Indem wir einen Nachbarselektor notieren:

h2 + p { Attribut: Wert; }

Damit sagen wir, dass nur Paragraphen, welche auf der gleichen Ebene wie das vorhergehende Element liegen angesprochen werden und diesem unmittelbar folgen.

Indirekter Nachbarselektor (Sonderzeichen zum Dritten: "~")

Einen hab ich noch! Und der inrekte Nachbarselektor funktioniert ähnlich dem Vorhergehenden.

Der Unterschied ist, dass nicht nur der erste Nachbar eines Elements angesprochen wird, sondern alle nachfolgenden Elemente gleichen Typs, welche Nachbarn auf gleicher Ebene zu dem Element sind.

Bsp.: Da nehmen wir das Beispiel von oben mit der Überschrift und den beiden Paragraphen nochmal. Nur das wir diesmal ein anderes Sonderzeichen in die CSS-Regel reinschreiben.

h2 ~ p { Attribut: Wert; }

Damit sind nun alle Paragraphen, welche dem h2-Element folgen angesprochen.

Attributselektoren (noch mehr Sonderzeichen: "[" und "]" und "=" und ")

Ja Himmel, hörts denn nicht bald auf? Nein, denn man kann Elemente eines HTML-Dokuments auch nach ihren Attributen ansprechen und umgestalten.

Wozu brauch ich das, wo ich doch IDs und Klassen und all die anderen Optionen habe? Dazu ziehen wir ein Beispiel zur Hand:

Wir haben eine Seite mit einem Formular für unsere Benutzer, mit dem sie uns mit ihren Adressdaten versorgen können, damit wir sie daheim besuchen und persönlich kennenlernen können. Wozu sonst benötigt man wohl Benutzerdaten? In diesem Formular haben wir Texteingabefelder für Vorname, Nachname und all die anderen Adressdaten, außerdem haben wir Checkboxen, wo sich unser Benutzer entscheiden kann, ob er vom Admin persönlich oder dem Designer der Seite besucht werden möchte. Schlussendlich dann natürlich noch den Absende-Button.

Jetzt findet der Designer die Standardoptik der Formularfelder und des Buttons endlangweilig. Ergo will er sie umgestalten. Das tut er über Attributselektoren. Jedes input-Feld hat sein persönliches Attribut. Zum Beispiel haben Absendebuttons immer das Attribut type="submit" und Texteingabefelder immer das Attribut type="text".

Man könnte natürlich hingehen und alle Inputfelder mit einem Typselektor ansprechen:

input { Attribut: Wert; }

aber viel mehr Sinn macht es doch, wenn wir die Textfelder vom Absendebutton trennen:

input[type="text"] { Attribut: Wert; }
input[type="submit"] { Attribut: Wert; }

Natürlich kann man jedwedes Element eines HTML-Dokuments auf diese Weise ansprechen. Zum Beispiel über das title-Attribut oder das alt-Attribut oder was einem sonst so einfällt. Ein letztes Beispiel, welches aber nur ganz eventuell vielleicht Sinn machen könnte:

Wir haben Bilder auf der Seite, denn Bilder sind hübsch. Einige haben eine Weite von 300 Pixeln (300px) andere dagegen sind breiter (600px). Jetzt wollen wir aber nur den schmaleren Bildern eine Eigenschaft zuweisen und nicht allen Bildern. Ergo folgende CSS-Regel mit einem Attributselektor:

img[width="300px"] { Attribut: Wert; }

Natürlich sind dies Beispiele, die ich nun zur Hand genommen habe, weil sie Sinn machen, es gibt auch einen simplen, standard, normalo Attributselektor, womit man Elemente anspricht, die ein bestimmtes Attribut beinhalten unabhängig vom Wert desselben:

img[width] { Attribut: Wert; }

Somit sind alle Bilder einer Seite, welche das Attribut width im Element notiert haben, angesprochen. Wichtig sind hierbei die eckigen Klammern, welche das Attribut beinhalten.

Fehler bitte melden/korrigieren und Fehlendes ergänzen. =)

Wie sehen Sprites eigentlich aus?
Auf der Startseite von www.spiegel.de seht ihr im großen Footer weitere Serviceangebote. Vor jedem dieser Service-Links steht ein kleines Icon. Alle Grafiken in einer einzigen  Datei zusammengefasst ergeben ein Sprite. Im Falle vom Spiegel-Footer sieht das dann so aus: http://www.spiegel.de/static/sys/v10/bg/bg_footer-partner-sprite.png

Wie wird das Sprite dann positioniert?
Gehen wir davon aus, wir haben eine DIV-Box mit der Abmessung von 30px x 30px. Wenn wir nochmal einen Blick auf das Spiegel-Sprite werfen sehen wir, dass diese Grafik wesentlich größer ist 30x30 px. Die "überstehenden Teile" der Grafik sind also nicht sichtbar da die DIV-Box zu klein ist. Und genau darin liegt die Idee: Ich verschiebe über die CSS-Eigenschaft "background-position" meinen Hintergrund so, dass nur der Ausschnitt sichtbar ist den ich sehen möchte und der Rest "abgeschnitten" wird.

Kann ich die einzelnen Icons kreuz und quer auf der Grafik platzieren?
Mit Sprites zu arbeiten bedeutet, dass ihr ein wenig rechnen müsst. Wollt ihr z.B. das 3. Icon von oben sehen, und jedes Icon ist 30px hoch, dann muss die Hintergrundgrafik 60px nach unten verschoben werden.

Und wie sieht der Quellcode dazu aus?
<div style="width:25px; height:30px; background-image:url(bg_footer-partner-sprite.png); background-position:0 -60px; background-repeat:no-repeat "></div>

OK, was bringt das Ganze?
Der Haupt-Sinn liegt darin, eine geringere Anzahl an requests zu erzeugen. Jedes mal wenn euer Browser eine Datei abruft (ein Bild, eine html-Datei, ein PDF, ...) stellt er eine Anfrage (request) an den Webserver. Z.B.: "Gib mir bitte die Datei logo.jpg"
Der Server antwortet (response): Hier ist die Datei logo.jpg.
Das "Frage-und-Antwort-Spiel" benötigt Zeit. Jedes Bild, jede CSS-Datei, jede JavaScript-Datei - alles wird beim Laden einer Seite separat angefragt. Durch das Zusammenfassen von Grafiken (Sprite) verringert man die Anzahl der Anfragen. Dadurch wird ein Geschwindigkeitsvorteilt erzielt.

Ist die Dateigröße eine Sprites größer oder kleiner als die Summe aus den Einzelgrafiken?
Das Ganze ist halt die Summe seiner Teile. Demnach macht es erstmal keinen Unterschied.
Trotzdem kann man etwas an Größe einsparen, in dem man Sprites farblich zusammenfast und z.B. als gif abspeichert.
Die Idee dahinter ist, beispielsweise alle roten Piktogramme zusammen zu fassen, das Rot anzugleichen und einschließend ein .gif mit 2 Farben zu speichern, da ein gif mit wenigen Farben kleiner ist als eins mit mehr Farben. Das selbe wiederholt man mit Grau, Blau, etc.

Sollte ich Sprites auf jeder Webseite einsetzen?
Tja, das hängt sehr mit der Projekt-Art und -Größe ab. Muss wirklich beim ersten Laden der Seite das E-Mail-Symbol in der Sprite-Grafik geladen werden, obwohl die Mailadresse nur im Impressum auftaucht? Auf den restlichen 600 Unterseiten erscheint diese Grafik nirgendwo. Habe ich sowieso nur spärlich hier und da mal ein Icon auf der Seite, lohnt sich der Mehraufwand dann wirklich?

Wann empfiehlt sich der Einsatz unbedingt?
Beim Hovern. Früher sah man häufig, dass eine Grafik, die beim Mousover wechseln sollte, nachladen musste. Das war unschön. Durch den Einsatz eines Sprites wird die Grafik direkt geladen und beim Hovern per CSS nur verschoben. Dies geschieht sofort, ohne dass irgend etwas nachgeladen werden muss.

Siehe dazu PDF:

http://www.braekling.de/web-design/3311-css3-color-farben-mit-farbtabellen.html

http://www.peterkroener.de/aenderungen-in-der-neuen-css3-farbverlauf-syntax-ohne-vendor-prefix/

Media Query gehört zum Themenbereich CSS und es geht dabei darum geräteabhängige darstellung von Website zu realisieren. Dass also der Gerätetyp erkannt wird und dann das passende CSS dazu angesteuert wird.

Weiterführende Links:

http://www.heise.de/ix/artikel/Allen-recht-1058764.html
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
http://webmasterparadies.de/webdesign/246-responsive-webdesign-teil-2-media-queries-einrichten.html

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungs-Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.
Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (https://mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2019) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.
Das Team der mediencommunity

SQL

Scriptsprache

Structured Query Language (Strukturierte Abfrage-Sprache)

Datenbanksprache zur Definition von Datenstrukturen in relationalen Datenbanken

zum Bearbeiten (Einfügen, Verändern, Löschen) und Abfragen von darauf basierenden Datenbeständen

SQL dient quasi als Mittel zum Zweck, um sämtliche Datenbankoptionen durchzuführen

3 DATENBANKSYSTEME DIE MIT SQL ARBEITEN

MySQL 

PostgreSQL

MaxDB

SQL-Anweisungen

DDL(DATA DESCRIPTION LANGUAGE)

Datendefinition

—> Definition des Aufbaus und der Struktur der Datenbank

DML(DATA MANIPULATION LANGUAGE)

Datenmanipulation 

—> Abfrage und Veränderung von Daten

DCL(DATA CONTROL LANGUAGE)

Datenkontrolle

—> Berechtigung erteilen und verwalten

Datentypen

INT(Integer)
—> Ganze Zahlen (positiv oder negativ)

Beispiel: 10 —> INT (2)

DEC(Decimal)
—> Festkommazahl(positiv oder negativ) mit insgesamt n Ziffern, davon m Nachkomma stellen

Beispiel: 4859,27 —> DEC (6,2)

CHAR(Character)
—> Zeichenkette mit fester Länge (max.255)

Beispiel: Vierbuchstaben-Abkürzung z.B. MiMa —> CHAR (4)

VARCHAR(n)
—> Zeichenkette mit variabler Länge

Beispiel: Vornamen —> VARCHAR(30) (maximal benötigte Länge an Buchstaben)

DATE
—> Datum

Beispiel: Geburtsdatum 24.06.1992

YEAR
—> Jahr

Beispiel: 1992

TIME
—> Uhrzeit

Beispiel: 10:53

DATETIME
—> Datum und Uhrzeit zusammengefasst

Beispiel: 24.06.1992, 10:53

TIMESTAMP

—> Zeitstempel mit Datum und Uhrzeit; wird für die aktuelle Zeit  verwendet

Beispiel: 24.06.2018, 10:54

DDL-Anweisung

Weitere SQL Anweisungen

UNSIGNED —> Nur positive Zahlen

NOT NULL —>  Dieses Feld darf nicht leer bleiben

PRIMARY KEY—> Angabe welches Element der Primärschlüssel sein soll

AUTO_INCREMENT—> Automatisch ansteigend

Quelltext einer erstellten MySQL/SQL

Datenbank mit dem Namen „literatursammlung“

CREATE DATABASE literatursammlung;
USE literatursammlung;

CREATE TABLE buecher(
Titel_Nr INT(3) UNSIGNED NOT NULL;
Titel VARCHAR(30) UNSIGNED NOT NULL;
Verlag_Nr INT(3) UNSIGNED NOT NULL;
Abt_Nr INT(3) UNSIGNED NOT NULL;
PRIMARY KEY(Titel_Nr)
);

CREATE TABLE buecher_autoren(
Titel_Nr INT(3) UNSIGNED NOT NULL;
Autor_Nr INT(4) UNSIGNED NOT NULL;
PRIMARY KEY (Titel_Nr, Autor_Nr)
);

CREATE TABLE autoren(
Autor_Nr INT(4) UNSIGNED NOT NULL;
A_Name VARCHAR (30) UNSIGNED NOT NULL;
A_Vorname VARCHAR(30) UNSIGNED NOT NULL;
PRIMARY KEY (Autor_Nr)
);

CREATE TABLE verlage(
Verlag_Nr INT(3) UNSIGNED NOT NULL;
Verlag VARCHAR(30) UNSIGNED NOT NULL;
PRIMARY KEY (Verlag_Nr)
);

SQL-Befehle zur

Abfrage und Veränderung der Daten

SELECT

—> Datensätze aus Datenbank abfragen

Beispiel:

SELECT * FROM buecher;

—> vollständige Tabelle „buecher“ wird aufgelistet, das * steht für alle

SELECT Titel FROM „buecher“;

—> alle Buechertitel aus der Tabelle werden aufgelistet

SELECT * FROM buecher WHERE Titel=“Dateiformate“;

—> liefert alle Datensätze der Tabelle „buecher“ mit dem Titel Dateiformate

SELECT Titel FROM buecher WHERE Verlag_Nr = „103“ AND Abt_Nr= „3“;

—> liefert alle Titel, die im Verlag Springer erschienen sind und in der Abteilung Print stehen

ORDER BY

—>Datensätze sortiert ausgeben;

ASC= aufsteigende Sortierung

DESC= absteigende Sortierung

Beispiel:

SELECT * FROM autoren

ORDER BY A_Name ASC;

—>wählt alle Inhalte aus der Tabelle „autoren“ aus

und sortiert sie alphabetisch aufsteigend nach dem Nachnamen

DELETE

—>Datensätze löschen

Beispiel:

DELETE FROM buecher

WHERE Titel=“HTML Handbuch“

—> löscht alle Datensätze mit dem Titel HTML Handbuch

aus der Tabelle „buecher“

UPDATE

—>Einträge verändern

Beispiel:

UPDATE buecher SET Abt_Nr=“3″

WHERE Titel_Nr=“203″

—>ändert die Abteilungsnummer des Buches

mit der Titel_Nr 203 in der Tabelle „buecher“

a. Allgemeines

• SQL-Injection (dt. SQL-Einschleusung) bezeichnet das Ausnutzen einer Sicherheitslücke in Zusammenhang mit SQL-Datenbanken, die durch mangelnde Maskierung oder Überprüfung von Metazeichen in Benutzereingaben entsteht.

• Der Angreifer versucht dabei, über die Anwendung, die den Zugriff auf die Datenbank bereitstellt, eigene Datenbankbefehle einzuschleusen. Sein Ziel ist es, Daten auszuspähen, in seinem Sinne zu verändern, die Kontrolle über den Server zu erhalten oder einfach größtmöglichen Schaden anzurichten.

• Das heißt, dass SQL Abfragen Zugriffskontrollen hinters Licht führen, und dadurch Standard Authentifizierungs- und Authorisationschecks umgehen können, und manchmal können SQL Abfragen sogar Zugriff zu Kommandos auf Betriebssystemebene erlauben.

• Sie sind möglich, wenn Daten wie Benutzereingaben in Web-Formularen in den SQL-Interpreter gelangen und Zeichen enthalten, die für den Interpreter Sonderfunktionen besitzen:

• ==> Backslash \
• ==> Anführungszeichen „“
• ==> Apostroph ’
• ==> Semikolon ; etc.

b. Vorgang der SQL-Injection

• Der „Hacker“ benutzt eine Standard-Datenbankanfrage oder ein Formular und merkt sich dabei den übergebenen Syntax

==> http://webserver/cgi-bin/find.cgi?ID=42

• Dieser wird im SQL-Interpreter als entsprechende Befehlskette umgewandelt

==> SELECT author, subject, text FROM artikel WHERE ID=42;

• Der „Hacker“ muss sich in der SQL-Syntax Schreibweise auskennen um dem Befehl eigene Syntax-Befehle anhängen zu können.

• Um bei der oben angesprochenen Datenbank Daten ausspähen zu können, könnte der „Hacker“ folgendes schreiben:

==> http://webserver/cgi-bin/find.cgi?ID=42+UNION+SELECT+'Datenbank',+'Tabelle',+'Spalte'+ UNION+SELECT+table_schema,+table_name,+column_name+FROM+information_schema.columns+ WHERE+NOT+table_schema='information_schema';#%20

• Das Beispiel zeigt, wie bei einer Abfrage mit 3 Ergebnisspalten die Struktur sämtlicher zugreifbarer Datenbanken in Erfahrung gebracht werden kann.

• Mit zeitbasierten Angriffen (also jene, die im richtigen Moment passieren), ist es dem Angreifer auch möglich sich für die Datenbank einen Administratorenstatus anzulegen. Hierzu muss er während der eigentliche SuperUser eingelogged ist eine SQL-Injection mit einem „root“ Befehl einschleusen. Da der SuperUser vom System immer mit der Hierarchie → „Root“ versehen wird.

==> Wurde ein System infiltriert, kann man sich über den Server-Traffic die Seitenzugriffe ansehen. Ist ein Traffic sehr auffällig (Normale Monatszugriffe im Schnitt 10.000 und plötzlich sieht man in einem Monat 100.000 oder 1.000.000 Zugriffe) ist es anzunehmen, das ein Zugriffs-Algorithmus in Verbindung mit einer Root-SQL-Injection genutzt wurde um im richtigen Moment (wenn der SuperUser eingelogged ist) das System mit Administratorenrechten zu infiltrieren.

c. Gegenmaßnahmen

• Bei der Programmierung von HTML/PHP Formularen sollten zwingend Inhaltsabfragen eingebaut werden, bei denen aus der Benutzereingabe die SQL-Syntax-Befehlszeichen ( \ “ ’ + ; etc.) entfernt bzw. maskiert werden.

• Bei den Inhaltsübergaben sollten Datentypabfragen eingebaut werden, damit wenn möglich der Input auch immer dem erwarteten Datentyp entspricht.

• Bauen Sie Codefragmente in den PHP Code ein, der verhindert, dass Fehlermeldungen beim Client angezeigt werden, diese geben dem Hacker Informationen über das Datenbankschema.

• Verwendung von verschlüsselten Passwortfeldern für alle Nutzer der Datenbank und akribisches Achten auf die Nutzerverwaltung

• Legen sie einen individualisierten „SuperUser“ an und loggen sie sich ausschließlich mit diesem „Account“ ein, damit der „Root“-SU nie genutzt wird.

• Verwendung von WAF (Web-Application-Firewall)

==> Eine Web Application Firewall (WAF) oder Web Shield ist ein Verfahren, das Webanwendungen vor Angriffen über das Hypertext Transfer Protocol (HTTP) schützen soll. Es stellt damit einen Spezialfall einer Application-Level-Firewall (ALF) oder eines Application-Level-Gateways (ALG) dar. • Verwendung von „stored procedures“

==> Es ist eine Funktion in Datenbankmanagementsystemen, mit der ganze Abläufe von Anweisungen vom Datenbank-Client aufgerufen werden können. ==> Sie ist somit ein eigenständiger Befehl, der eine Abfolge gespeicherter Befehle ausführt.

==> Gespeicherte Prozeduren tragen dazu bei, die Sicherheit einer Anwendung stark zu erhöhen. Da der Client in der Regel keine DELETE-, UPDATE- oder INSERT-Zugriffsrechte mehr benötigt, ist es Angreifern nicht möglich, selbst Datenbanken zu manipulieren (z. B. durch SQL-Injection).

• Verwendung von „Prepared Statements“ mit gebundenen Variabeln

==> Dabei werden die Daten als Parameter an einen bereits kompilierten Befehl übergeben. Die Daten werden somit nicht interpretiert und eine SQL-Injection verhindert.

Es gibt verschiedene Möglichkeiten Dateiformate in Gruppen zu klassifizieren. Entweder ob es sich um programmeigene oder programmübergreifende dateiformate handelt, oder nach ihrer »Datenstruktur«

Programmeigene Dateiformate
Diese originäre Dateiformate von programmen können in der Regel nur von den jeweiligen Programmen gelesen und erstellt werden. Andere Programme benötigen dazu Plugins oder es kommt zu darstellungsabweichungen.

Sie stammen z.B. von Layoutprogramme (.indd, .qxp, .pm, ...), von Grafikprogrammen(.ai, .cdr, ...) oder Bildbearbeitungsprogrammen (.psd)

Programmübergreifende Dateiformate
Solche Dateiformate können unabhängig vom Erstellungsprogramm in anderen Applikationen platziert und/oder verarbeitet werden. Beispiele sind hierfür .tiff, .eps, .jpg)

Unterscheidung nach Datenstruktur

1. Pixelbasierte Dateiformate

2. Vektorbasierte Dateiformate

3. Metafiles (Dateiformate, die Pixel- und Vektorformate speichern können)

XML-Grundaufbau

Wozu dient XML im Gegensatz zu HTML?

XML dient zum Transport und zur Ablage/Sicherung von Daten, wohingegen HTML zur Darstellung von Daten gedacht ist.

Was ist XML?

• XML steht für "eXtensible markup language".
• XML ist HTML sehr ähnlich.
• XML wurde gemacht um Daten zu transportieren, nicht um Daten darzustellen.
• XML Tags sind nicht vordefiniert. Man muss sich seine Tags selbst definieren.
• XML wurde derart gestaltet, dass sie sich selbst beschreibt

XML tut absolut gar nichts

XML strukturiert, speichert und transportiert Informationen.
Man kann mit dieser Sprache nichts senden, empfangen oder darstellen. Man kann lediglich Informationen zwischen Tags schreiben, welche die Information näher beschreiben.

XML ersetzt HTML nicht

Es ist wichtig zu verstehen, dass XML nicht HTML ersetzen kann oder soll. XML ist ein Zusatz zu HTML mit dem man Daten an das HTML Dokument sendet, welches dann die Daten darstellen kann.

XML ist Soft- und Hardwareunabhängig

Man kann XML, genau wie HTML, in jedem beliebigen Texteditor schreiben, der reinen Text darstellen kann.

Der XML Dokumentbaum

XML Dokumente haben eine Baumstruktur. Sie starten mit dem Wurzelelement und diversifizieren sich dann bis zu "Zweigen" und "Blättern.

Beispiel:

1.: <?xml version="1.0" encoding="ISO-8859-1"?>
2.: <notiz>
3.:  <an>Blubb</an>
4.:  <von>Bla</von>
5.:  <ueberschrift>Dings</ueberschrift>
6.:  <inhalt>Palaver Palaver Rhabarber.</inhalt>
7.: </notiz>

Die erste Reihe ist die XML-Deklaration. Sie definiert die XML Version (1.0) und die Encodierung, welche benutzt wurde (ISO-usw, kann auch UTF-8 oder sonstwas sein). Die zweite Reihe is das Wurzelelement, welches alle anderen Tags umschließt. Es sagt in diesem Fall aus, dass es sich um eine Notiz handelt. Die nächsten 4 Elemente sind Kindelemente der Wurzel (Zweige). Die letzte Zeile schließt das Wurzelelement. Man erkennt also, dass es sich um eine Notiz von Bla an Blubb handeln muss.

XML Dokumente müssen ein Wurzelelement enthalten, welches das Elternelement aller anderen Elemente ist.
Da alle Elemente wiederum Kindelemente enthalten können, ergibt sich so eine Baumstruktur von der Wurzel, über die Zweige und deren Äste zu den Blättern (bildlich gesprochen).

Beispiel:

1.: <?xml version="1.0" encoding="ISO-8859-1"?>
2.: <wurzel>
3.:	<kind>
4.:		<kindvomkind>
5.:			<kindeskind>Blubb</kindeskind>
6.:		</kindvomkind>
7.:	</kind>
8.: </wurzel>

Wie man sieht, könnte man das Ganze ad absurdum weiterführen. Zu beachten ist, dass jedes Element Inhalte und Attribute haben kann.

Ein erweitertes Beispiel für einen Buchladen, welcher seine Bücher in Kategorien einteilt und die einzelnen Bücher nach Titel, Autor, Jahr und Preis katalogisiert.

<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore>
  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

Syntaxregeln (wie darf man XML schreiben und wie nicht)

Die Syntaxregeln sind sehr einfach und logisch, deswegen kann man sie auch schnell und einfach erlernen.

Alle Elemente müssen ein schließendes Tag haben

Bei XML ist es illegal ein schließendes Tag wegzulassen!
Man geht dafür zwar nicht in den Knast, wenn man dies trotzdem tut, aber die Datei wird nie nicht funktionieren.

In HTML 4.01 und auch in HTML5 ist es erlaubt schließende Tags wegzulassen:
<p>Ein Paragraph
<p>Noch ein Paragraph
Der Browser wird die Paragraphen trotzdem darstellen.

Das einzige "Tag" bzw. Element, welches kein schließendes Tag hat, ist die XML Deklaration. Sie ist nicht Teil des XML Dokumentes sondern teilt nur dem darstellenden Medium mit, um welche Art von Dokument es sich handelt (wie bei HTML Doctype Deklarationen auch).

XML Tags sind case sensitive

Es ist ein Unterschied ob man <Tag> oder <tag> notiert, deswegen ist es wichtig das öffnende und das schließende Tag in der selben Schreibweise zu notieren.
<tag>Bla</Tag> wird nicht funktionieren!

XML Elemente müssen richtig ineinander verschachtelt werden

Es ist nicht erlaubt die Tags durcheinander zu wirbeln. Ein geöffnetes Tag muss auch nach seinem Inhalt wieder geschlossen werden.

Folgendes Beispiel wird nicht funktionieren:
<bla><blubb>text</bla></blubb>

Es darf nur "richtig verschachtelt" werden:
<bla><blubb>Text</blubb></bla>

XML Attribute müssen in Anführungszeichen gesetzt werden

Wie in HTML kann man auch XML-Tags Attributwerte zuweisen, indem man sie im Tag selbst notiert. Sie müssen immer folgender Notierung folgen:

<tag attribut="wert">

Das bedeutet, dass erst der Tag-Name kommt, dann der Name des Attributs, dann ein =-Zeichen und dann der Attributwert in doppelte Anführungszeichen gesetzt.

Eintitas richtig referenzieren

Sonderzeichen wie &, ', ", < und > dürfen nicht ausgeschrieben werden in einem XML-Dokument.

Dies wird einen Fehler generieren:
<tag>bla & blubb > blubb & bla</tag

Um den Fehler zu vermeiden müssen die Sonderzeichen als Entitätsreferenz geschrieben werden:
<tag>bla &amp; blubb &gt; blubb &amp; bla</tag>

Es gibt (zum Glück) nur 5 vordefinierte Entitäten in XML:
&lt; ergibt < (kleiner als)
&gt; ergibt > (größer als)
&amp; ergibt & (das "und-Zeichen oder ampersand)
&apos; ergibt ' (ein Apostroph)
&quot; ergibt " (Anführungszeichen)

Kommentare in XML Dokumenten

Kommentare werden wie in HTML notiert:

<!-- Das ist ein Kommentar -->

Im Westen nichts Neues also.

Leerzeichen sind in XML konserviert

Wenn man in HTML mehr als ein Leerzeichen setzt, so werden diese zu einem einzigen zusammengefasst.
In XML ist dies nicht der Fall und je mehr Leerzeichen man notiert, desto mehr werden auch ausgegeben.

HTML:
<tag>bla blubb</tag>
Ergibt:
bla blubb

XML:
<tag>bla          blubb</tag>
Ergibt:
bla           blubb

So, das wäre dann eigentlich alles zum Grundaufbau von XML. Ich werde weitergehend noch auf XML Elemente und Attribute detailiert eingehen, alles weitere führt definitiv zu weit, wenn man vom Grundaufbau spricht.

Was sind XML Elemente

Ein XML Element ist alles vom öffnenden Tag bis zum schließenden Tag (diese mit eingeschlossen).
Ein Element kann folgendes beinhalten:

• Weitere Elemente (Kindelemente)
• Text
• Attribute

<bookstore>
  <book category="children">
    <title>Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title>Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

Das Beispiel vom Buchladen zeigt sehr gut was das bedeutet.
<bookstore> und <book> haben Kindelemente als Inhalt.
<book> hat außerdem das Attribut "children".
<title>, <author>, <year> und <price> haben außerdem Textinhalte.
Wobei jedes Element alles von dem vorher genannten auch beinhalten kann:
<tag attribut="attributwert">Text
<kind>text</kind>
</tag>

Namenregeln für XML-Elemente

Folgende Regeln sind zu beachten, wenn man XML-Elemente notiert:

• Namen können Buchstaben, Zahlen und andere Zeichen beinhalten
• Namen dürfen nicht mit einer Nummer oder einem Interpunktionszeichen beginnen
• Namen dürfen nicht mit der Buchstabenkombination xml oder XML beginnen
• Namen dürfen keine Leerzeichen enthalten

Ansonsten kann man sich total austoben, was die Inhalte eines Elements angeht, da man ja die Tagnamen und Attributnamen selbst definieren kann, wie sie einem gefallen.

Der passende Namen für den passenden Inhalt

Ja, wie soeben erwähnt, kann man wild Tagnamen und Attributsnamen verteilen, wie man lustig ist. Aber natürlich macht es mehr Sinn die Namen passend zu den Inhalten der Elemente zu vergeben.
Man sollte Namen beschreibend wählen! Sie sollten kurz und einfach sein.

To do:
<buch_titel>

Not to do:
<der_titel_des_buchs>

Unterstriche sind gut geeignet um Namen zu strukturieren:
<buch_titel>, <buch_autor>, <buch_jahr>, <buch_preis> zum Beispiel

Man sollte keine Bindestriche, Punkte oder Doppelpunkte verwenden um Namen zu strukturieren, da es Programme gibt, die diese anders interpretieren könnten.

XML Elemente sind "extensible"

XML Elemente können erweitert werden um mehr Information zu transportieren.

Beispiel:

1.: <?xml version="1.0" encoding="ISO-8859-1"?>
2.: <notiz>
3.:  <an>Blubb</an>
4.:  <von>Bla</von>
5.:  <inhalt>Palaver Palaver Rhabarber.</inhalt>
6.: </notiz>

Erweitern wir nun diese Notiz um einige Elemente um zu präzisieren, was für eine Notiz es ist und wann sie verfasst wurde.

Beispiel:

1.: <?xml version="1.0" encoding="ISO-8859-1"?>
2.: <notiz>
3.:	<datum>tt.mm.yyyy</date>
4.:	<an>Blubb</an>
5.:	 <von>Bla</von>
6.:	<ueberschrift>Erinnerung</ueberschrift>
6.:	<inhalt>Laber Palaver Rhabarber.</inhalt>
7.: </notiz>

Ein weiteres Beispiel, welches dies noch eindeutiger macht:

1.: <?xml version="1.0" encoding="ISO-8859-1"?>
2.: <notiz>
3.:	<erinnerung>
4.:		<an>
5.:			<vorname>Bla</vorname>
6.:			<nachname>Blabla</nachname>
7.:			<strasse>Dingsweg</strasse>
8.:			<hausnummer>123</hausnummer>
9.:			<plz>12345</plz>
10.:			<ort>Dingshausen</ort>
11.:		</an>
12.:		<von>
13.:			<vorname>Blubb</vorname>
14.:			<nachname>Blubbblubb</nachname>
15.:			<strasse>Bumsweg</strasse>
16.:			<hausnummer>321</hausnummer>
17.:			<plz>54321</plz</plz>
18.:			<ort>Bumshausen</ort>
19.:		</von>
20.:		<ueberschrift>Hömma</ueberschrift>
21.:		<inhalt>
22.:			<erstens>Laber</erstens>
23.:			<zweitens>Palaver</zweitens>
24.:			<ausserdem>Rhabarber</ausserdem>
25.:		</inhalt>
26.:	</erinnerung>
27.: </notiz>

Die Datei wird immernoch funktionieren, sie ist lediglich viel präziser angelegt, als die vorhergehende Notiz.

XML Attribute und wozu sie gut sind

XML-Elemente können wie HTML-Elemente Attribute enthalten.
Attribute beschreiben zusätzliche Informationen über ein Element.

Beispiel: <person geschlecht="weiblich">

Elemente VS Attribute

Hier sind mal zwei Beispiele wie mans machen kann:

<person geschlecht="weiblich">
  <vorname>Anna</vorname>
  <nachname>Smith</nachname>
</person>

<person>
  <geschlecht>weiblich</geschlecht>
  <vorname>Anna</vorname>
  <nachname>Smith</nachname>
</person>

Im ersten Beispiel ist das Geschlecht ein Attribut, im zweiten Beispiel ein Kindelement von Person. Beide Beispiele transportieren die selbe Information.

Es gibt in diesem Fall keine eindeutige Regel, wie man es besser macht. Attribute sind sehr nützlich in HTML, bei XML würde ich darauf eher verzichten und stattdessen Kindelemente notieren (ist aber eine persönliche Sache und somit nur eine Empfehlung).

Welche Probleme können mit Attributen entstehen

• Attribute können nicht mehrere Werte enthalten (Elemente schon)
• Attribute folgen keiner Baumstruktur (Elemente schon)
• Attribute sind nicht so einfach zu spezifizieren (für zukünftige Änderungen)
• Attribute sind schwieriger zu lesen und zu editieren

Man sollte Attribute am besten dazu nutzen Informationen zu transportieren, die nicht relevant sind für die Daten.

Absolutes NO GO:
<note day="10" month="01" year="2008" to="Tove" from="Jani" heading="Reminder" body="Don't forget me this weekend!"></note>
Das ist XML Horror.

Wozu brauche ich sie denn dann noch?

Ein sinnvoller Nutzen von Attributen und Attributwerten sind zum Beispiel ID-Vergaben an Elemente.
Das ist insofern nützlich, dass man eine laufende Nummer zu Einträgen hinzufügen kann, wenn es zum Beispiel um eine Personenliste geht und man einen Wert brauch, der auf jeden Fall frei von Redundanzen (Wiederholungen) bleiben muss.

Beispiel:

<namensliste>
<person id="0001">
<vorname>Karli</vorname>
<nachname>Knusper</nachname>
</person>
<person id="0002">
<vorname>Klausi</vorname>
<nachname>Knusper</nachname>
</namensliste>

Was das Beispiel deutlich macht ist, dass man nun eindeutiger zuweisen kann welches Element gemeint ist. Hat man eine endlose Datenbank mit endlos vielen Personen der Familie Knuspre, dann wird man sich darin totsuchen, bis man zu der Person gelangt, welche man nun sucht.
Da ist es doch viel einfacher die entsprechende ID zu suchen und somit direkt zu Person X zu gelangen.
Merke: Metadaten in das Element als Attribut notieren! Daten als neues Element notieren!

DTD

Jedes XML-Dokument sollte wohlgeformt (richtige Tag-Benennung, Verschachtelung… s. o.) und valide sein. Valide wird es erst durch die Referenzierung auf eine DTD (Doctyp definition). Dies ist eine Auflistung der möglichen Inhalte der XML-Datei und ihrer erlaubten Reihenfolge. Die DTD wird vom Erstersteller der XML-Datei miterstellt. Sie kann ebenfalls mit einem Texteditor geschrieben werden, muss aber die Endung .dtd beinhalten.

Aufbau einer DTD

Als Beispiel nehme ich das folgendes XML-Dokument:

<?xml version="1.0" encoding="utf-8" ?>
<root_element>
<child1>Inhalt1</child1>
<child1>Inhalt2</child1>
<child2>
<subchild1>SubInhalt1</subchild1>
<subchild2>SubInhalt2</subchild2>
<child2>
</root_element>

Die dazugehörgie DTD wäre:

<!ELEMENT root_element (child1+, child2)>
<!ELEMENT child1 (#PCDATA)>
<!ELEMENT child2 (subchild1, subchild2)>
<!ELEMENT subchild1 (#PCDATA)>
<!ELEMENT subchild2 (#PCDATA)>

Bedeutung: ist gibt ein Element mit dem Namen root_element, das ein oder mehr (+) Elemente child1 und ein Element child2 enthalten darf. child1 darf wiederum PCDATA (Parced character data = Buchstaben, Ziffern…) enthalten. child2 enthält zwei weitere Elemente jeweils ein mal. Gleiches PCDADA dann für die subchilds.

Folgende Befehle stehen noch zur Verfügung:

• | für das Eine oder Andere
• * für nichts, 1 oder viele Element
• ? für 0 oder einmal
• + für 1 oder mehrmals

Stimmt die XML-Datei nicht mit der zugehörigen DTD überein (z. B. 2 x child2 in diesem Fall), dann ist sie nicht valide und je nach Browser wird ein Fehler geworfen.

Einbindung einer DTD

Eine DTD kann entweder direkt in die XML-Datei eingebunden werden (hier der DTD mit dem Namen testdatei):

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE testdatei [
<!ELEMENT root_element (child1+, child2)>… usw.
]>
<root_element>… usw.

Oder ausgelagert in eine extra Datei mit der Endung .dtd eingebunden werden:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE testdatei SYSTEM="testdoctype.dtd">
<root_element>… usw.