Medienproduktion

Bewertung: 
0
Bisher keine Bewertung

Alle Fachrichtungen

Bewertung: 
0
Bisher keine Bewertung

U1: Tonwertübertragung

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

U2: Rasterungstechnik

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Autotypische und frequenzmodulierte Rasterung

Autotypisches Raster (Amplitudenmoduliertes Raster (AM-Raster))

Hierbei werden die Rasterpunkte in sog. Rasterzellen angeordnet. Diese Rasterzellen haben, in Abhängigkeit von der gewählten Auflösung, immer denselben Abstand zueinander. Der Abstand der Rasterzellen-Mitten zueinander heißt Rasterweite. Der ISO-Coated Standard der Fogra beruht ausschließlich auf einem 60er AM-Raster.

Bei einem 60er Raster setzt sich also 1 cm aus 60 einzelnen Punkten zusammen. Spezielle Rasterzähler (relativ einfache Schablonen, die sich den Moiré-Effekt gezielt zunutze machen) erlauben es, die Rasterweite mit ausreichender Genauigkeit zu bestimmen.

Um bei diesem Raster eine höhere Flächendeckung und somit eine kräftigere und dunklere Farbe aufs Papier zu bringen, bleibt der Abstand von Mittelpunkt zu Mittelpunkt der einzelnen Rasterelemente gleich, es verändert sich nur der Durchmesser und somit die Größe (Amplitude) der einzelnen Rasterpunkte. Bildhelligkeiten ergeben sich durch flächenmäßig unterschiedlich große Rasterpunkte
mit gleichem Abstand.

Dots sind die Punkte, die ein Belichter „setzt“. Die “Stärke” der einzelnen Farbanteile, genannt Tonwert, wird durch den Durchmesser und damit die Flächendeckung der Rasterpunkte gesteuert. Aus diesem Grund wird das Autotypische Raster auch Amplitudenmoduliertes Raster (AM-Raster) genannt.

Die Druckfarben liegen in bestimmten Winkeln der Rasterflächen übereinander um eine für das Auge sichtbare Raster-Moiré-Erscheinung zu vermeiden (Cyan 15grad, Magenta 75grad, Yellow 0grad, Schwarz 45grad). Die somit erreichten und für diesen Rastertyp unvermeidbaren winzigen Moirés werden auch als Rosetten bezeichnet und sind vom Auge nur schwer zu erkennen. Die konstante Anordnung der einzelnen Rasterpunkte machen gleichmäßige einheitliche Flächen zu einer Domäne des AM-Rasters, da so keine Wolkenbildung bzw. kein Rauschen in z.B. Grauflächen entsteht.

Das AM-Raster gibt es in zwei verschiedenen Ausführungen, die runde und die elliptische Punktform. Die elliptische Punktform hat ihre Vorteile, da sich die einzelnen Rasterpunkte auf zwei Etappen zusammenschließen und dadurch Tonwertsprünge verringert werden.

Bei der runden Punktform passiert der Zusammenschluss der Rasterpunkte bei 50%, d.h. bei 50% verbinden sich die einzelnen Rasterelemente an vier Stellen miteinander und bilden so eine zusammenhängende Einheit. Durch den einmaligen Zusammenschluss ist bei dieser Punktform der Tonwertsprung gravierender. Allerdings hat sie sich dennoch durchgesetzt, dass sie ihre Vorteile in der Schärfe hat.

Anordnung der AM-Rasterpunkte. Die linke Seite zeigt schwarze Rasterpunkte in gleicher Größe und mit gleichen Abständen. Die rechte Seite zeigt schwarze Rasterpunkte mit variabler Größe und gleichen Abständen.

 

Definitionen im Lexikon der mediencommunity gibt es hier:
https://mediencommunity.de/node/4835 und hier https://mediencommunity.de/node/4840

 

Frequenzmoduliertes Raster (stochastisches Raster(FM-Raster/NP-Raster))
 

Hierbei werden die Rasterpunkte stochastisch (Zufall, Wahrscheinlichkeit) angeordnet, um ein Muster (wie beim AM-Raster) zu vermeiden. In Bildern werden mit FM-Raster Moiré frei gedruckt, die in Mustern (z.b. Linien und Karos) entstehen können. Bei Wiederholungsaufträgen kann es zu Farbdifferenzen kommen, da die FM-Rasterpunkte jedes Mal neu platziert werden. Bilder haben eine höhere Detailschärfe. Häufig kommt es zu Wurmbildung, da sich mehrere Rasterpunkte überschneiden. Da man meist nur mit kleinen Rasterpunkten druckt, die im Verhältnis eine kleine Fläche mit einem großem Tonwertzuwachs haben, wird in der Standardisierung mit einer höheren Tonwertkurve gedruckt.

Es gibt 3 Grade des FM-Rasters.

  1. Grad: Alle Rasterpunkte sind rund. Alle Rasterpunkte sind gleich groß. Die Rasterpunkte haben alle die gleiche Farbschichtdicke. Je nach Tonwert variiert die Anzahl der Rasterpunkte. Die Rasterfeinheit wird über die Punktgröße beschrieben.
  2. Grad: Alle Rasterpunkte sind rund. Die Rasterpunkte sind größenvariabel (Spotverknüpfung). Die Rasterpunkte haben alle die gleiche Farbschichtdicke. Je nach Tonwert variiert die Anzahl der Rasterpunkte.
  3. Grad: Die Rasterpunkte sind formvariabel. Die Rasterpunkte sind größenvariabel. Die Rasterpunkte haben alle die gleiche Farbschichtdicke. Je nach Tonwert variiert die Anzahl der Rasterpunkte. Diese Technik wird im Sicherheitsdruck angewendet.

Anordnung der FM-Rasterpunkte. Die linke Seite zeigt schwarze Rasterpunkte in gleicher Größe und mit variablen Abständen. Die rechte Seite zeigt schwarze Rasterpunkte mit variabler Größe und variablen Abständen.

Definitionen im Lexikon der mediencommunity gibt es hier:
https://mediencommunity.de/node/1105 und hier https://mediencommunity.de/node/3698
 

 

Weiterführende Links
Bewertung: 
0
Bisher keine Bewertung
Textoptimierte Version in Einfacher Sprache: 


AM-Raster (AM = amplituden-moduliert)

Beim AM-Raster werden die Rasterpunkte in einem gleichmäßigen Raster (Gitterstruktur) angeordnet.
Die Anzahl der Rasterpunkte bleibt gleich
der Abstand von Mittelpunkt zu Mittelpunkt bleibt gleich
die Größe der Rasterpunkte ist variabel (unterschiedlich).

Anordnung der AM-Rasterpunkte. Die linke Seite zeigt schwarze Rasterpunkte in gleicher Größe und mit gleichen Abständen. Die rechte Seite zeigt schwarze Rasterpunkte mit variabler Größe und gleichen Abständen.

Die Helligkeit wird durch die Größe der Punkte bestimmt. Je dunkler die Fläche, desto größer die Punkte.

Der Abstand der Mittelpunkte der Rasterzellen heißt Rasterweite. Die Rasterweite kann man mit einem speziellen Rasterzähler genau messen.

Beispiel:

Der ISO-Coated-Standard der Fogra ist ein 60er AM-Raster, d.h. 1 cm setzt sich zusammen aus 60 einzelnen Punkten.


Rasterwinkelung

Die Druckfarben liegen in bestimmten Winkeln der Rasterflächen übereinander. Bei einem mehrfarbigen Druck müssen die Farben in unterschiedlichen Winkeln angelegt sein: Cyan 15°, Magenta 75°, Yellow 0°, Schwarz 45°. Die Grad-Angaben beziehen sich auf die rechtwinkelige Anordnung der Rasterzellen, d.h. auf die Abweichung von der waagerechten und senkrechten Achse.

Zwei stark vergrößerte Rasterfelder werden übereinander gedruckt. Die Winkelung der beiden Raster ist unterschiedlich. Das dritten Rasterfeld zeigt Ergebnis im Zusammendruck.

Vorteil des AM-Rasters:

Die regelmäßige Anordnung der Rasterpunkte bewirkt, dass man gleichmäßige Flächen drucken kann. Es gibt keine Wolken bzw. kein Rauschen in Grauflächen. Mit den unterschiedlichen Winkelungen vermeidet man auch den Moiré-Effekt.

Nachteil des AM-Rasters:

Wenn man das Druckbild durch den Fadenzähler betrachtet, sieht man: Die Druckpunkte werden nebeneinander gedruckt, nicht aufeinander. Es bilden sich im Zusammendruck kleine Rosetten.


Runde und elliptische Punkte beim AM-Raster

AM-Raster gibt es mit runden Punkten und mit elliptischen Punkten.

Elliptische Punkte

Vorteil:

Die einzelnen Rasterpunkte schließen sich auf zwei Etappen zusammen, dadurch gibt es weniger Tonwertsprünge.

Runde Punkte

Vorteil:

schärfere Abbildung

Nachteil:

Die einzelnen Rasterpunkte schließen sich bei 50% der Flächendeckung zusammen. D.h. bei 50% verbinden sich die einzelnen Rasterelemente an vier Stellen miteinander und bilden eine zusammenhängende Einheit. Der Zusammenschluss auf nur einer Etappe führt zu größeren Tonwertsprüngen.


Frequenzmoduliertes Raster (FM = frequenz-moduliert)

Beim FM-Raster werden die Rasterpunkte variabel (zufällig) angeordnet.
Die Anzahl der Rasterpunkte ist variabel (unterschiedlich),
die Größe der Rasterpunkte bleibt gleich.

Anordnung der FM-Rasterpunkte. Die linke Seite zeigt schwarze Rasterpunkte in gleicher Größe und mit variablen Abständen. Die rechte Seite zeigt schwarze Rasterpunkte mit variabler Größe und variablen Abständen.

Die Helligkeit wird durch die Anzahl der Punkte bestimmt. Je dunkler die Fläche, desto mehr Punkte werden gedruckt.

Meist druckt man nur mit kleinen Rasterpunkten. Diese haben im Verhältnis zu ihrer kleinen Punktfläche höhere Tonwerte. Deshalb druckt man standardisiert mit einer höheren Tonwertkurve.

Vorteile:
  • Es entsteht kein Moiré-Effekt.
  • Bilder haben bei einem FM-Raster eine höhere Schärfe.
Nachteil:

Bei Wiederholungsaufträgen kann es Farb-Differenzen geben, da die FM-Rasterpunkte jedes Mal neu platziert werden (zufällig). Häufig kommt es zu Wurmbildung, da sich mehrere Rasterpunkte überschneiden.


Beim FM-Raster unterscheidet man 3 Grade.

1. Grad:

  • Alle Rasterpunkte sind rund.
  • Alle Rasterpunkte sind gleich groß.
  • Die Rasterpunkte haben alle die gleiche Farbschichtdicke.
  • Je nach Tonwert variiert die Anzahl der Rasterpunkte.
  • Die Rasterfeinheit wird über die Punktgröße beschrieben.

2. Grad:

  • Alle Rasterpunkte sind rund.
  • Die Rasterpunkte sind unterschiedlich groß.
  • Die Rasterpunkte haben alle die gleiche Farbschichtdicke.
  • Je nach Tonwert variiert die Anzahl der Rasterpunkte.

3. Grad:

  • Die Rasterpunkte haben unterschiedliche Formen.
  • Die Rasterpunkte sind unterschiedlich groß.
  • Die Rasterpunkte haben alle die gleiche Farbschichtdicke.
  • Je nach Tonwert variiert die Anzahl der Rasterpunkte.

 

Diese Technik wird im Sicherheitsdruck angewendet.

AM-Rasterung

siehe PDF dazu

AnhangGröße
PDF icon U12 AM-Rasterung.pdf1.89 MB
Bewertung: 
1.666665
Durchschnitt: 1.7 (3 Stimmen)

Druckplatten-Bebilderung (1): Raster Image Processor RIP

Tags: 
Bewertung: 
0
Bisher keine Bewertung
Textoptimierte Version in Einfacher Sprache: 


Druckplatten-Bebilderung (1): RIP - Raster Image Processor

Der RIP (dt. Rastergrafik-Processor) ist eine Kombination von Software und Hardware.
Der RIP bearbeitet die Bilder und Schriften aus dem Computer (Mac oder PC) so, dass diese an einem Drucker oder Druckmaschine gedruckt werden können.

Die Daten werden als Postscript- oder PDF-Daten so aufgerastert und separiert (getrennt), dass alle Bildpunkte in Bitmap-Rastereinheiten umgewandelt werden. 

Dazu übersetzt RIP der Texte und Bilder Zeile für Zeile in ein Rasternetz von Punkten (Pixeln). Diese Bitmap-Daten werden dann meist mit Laser auf die Druckplatte übertragen.

2 Arten der Übertragung:

  • Computer-to-Plate-Anlage (CtP)
  • Direct Imaging (DI) in der Bebilderungseinheit der Druckmaschine


Ablauf im RIP


1. Interpretation

Aus dem PostScript-Programm wird eine Befehlsdatei erstellt mit Angaben zu:

  • Transparenzen und Farbverläufen
  • Rasterwerte und Tonwerte
  • Punktform, Punktwinkel, Rasteraufbau

Der RIP wird auch Interpreter (Übersetzer) der Belichtungsmaschine genannt.


2. Rendering

Beim Rendering werden die Informationen der Befehlsdatei in Bildpunkte umgewandelt.

  • Die Pixelbilder der Eingangsdatei werden an die Druck-Bedingungen angepasst, z.B. Größe.
  • Die Farben werden separiert (= Farb-Separation)
  • Eigenschaften wie Farbverlauf, Oberflächenstruktur, Helligkeit werden berechnet.
  • Ergebnis: Bytemaps (Halbtöne) mit 8 Bit Farbtiefe pro Farbe.


3. Screening

Beim Screening werden die Bytemaps in Bitmaps umgerechnet, in ein Rasternetz von 1 Bit Pixeltiefe. Das Rasternetz besteht aus frequenz-modulierten oder amplituden-modulierten Rasterpunkten.

RIPs können

  • die Farben während der Berechnung trennen (Farb-Separation),
  • geräte-unabhängige Befehlsdateien erstellen,
  • Überfüllungen, Unterfüllungen und das Überdrucken (=Trapping) berechnen und rastern.

Die Rasterung der Farbauszüge entspricht der Anzahl und Größe der Druckpunkte und der vorgegebenen Rasterwinkelung. So gibt es keine Moiré-Effekte.

U3: Netzwerkprotokolle

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Netzwerk-Begriffe

File-Server:

  • Mittelpunkt eines Netzwerkes
  • Verwaltet den gesamten Datenbestand und stellt alle Daten und Programme bereit

Host:

  • Hostrechner erfüllen Kommunikationsaufgaben
  • zentrale Dienstleistungsrechner

Gateway:(Einfahrt)

  • ermöglicht die Kommunikation zwischen Rechnern, die in unterschiedlichen Datennetzen oder Datei-Diensten integriert sind (z.B. zwischen Compuserver bzw. BTX/T-Online und dem INTERNET)
  • Übersetzt unterschiedliche Netzwerkprotokolle
  • Verbindet LANs mit externen Netzwerkkonfigurationen oder WANs mit GANs

Repeater:

  • Gerät zur Signalverstärkung
  • wenn mit zunehmender Kabellänge die im Netzwerk gesendeten Daten zu schwach oder fehlerhaft den Empfänger erreichen.
  • Hauptsächlich bei Netzwerken der Bus-Topologie
  • Durch Repeater wird das Netzwerk in Segmente unterteilt

Bridge:

  • ermöglicht Netzwerkerweiterung (bezogen auf Kabellänge und Stationen-Anzahl)
  • Verbindung von LANs mit gleicher Netzwerktopologie möglich
  • Bridges erhöhen die Ausfall-Sicherheit des Netzwerkes

Router:

  • Entscheidet, welchen Weg die Daten nehmen
  • können Netzwerke auch unterschiedlicher Topologien miteinander verbinden
  • Unterstützt mehrere Protokolle (Multiprotokoll-Router)

Brouter:

  • Bridge-/Router-Kombination

Hub:

  • Knotenpunkt von Leitungen in einem sternförmig angelegten Netzwerk

SCSI:

  • Small Computer System Interface 10 base 2
  • Durchlaufstärke (10 Mbit/s) – Entfernung von den Geräten (200 m)
Bewertung: 
3
Durchschnitt: 3 (1 Stimme)

U4: Fontformate

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Fontformate

Hier könnt ihr gemeinsam eure Notizen und Zusammenfassungen im Wiki ergänzen und so den Lernerfolg erhöhen. Teilweise gibt es schon Wikis, zu den Themen, die in bisherigen Vorbereitungen entstanden sind. Diese könnt ihr natürlich nutzen, ergänzen oder gegebenenfalls korrigieren.

Bitmap -Schrift

  • Beginnend mit dem Zeitalter des Computers wurden Bitmap-Fonts eingesetzt. Sie sind allerdings kein richtiges Schriftformat im eigentlichen Sinne
  • Bei einer solchen Schrift, wird für jeden Buchstaben ein Raster genutzt, in dem das Zeichen punktweise bezeichnet wird.
  • Skalieren kann man diese Schrift leider nicht, man muss für jede Schriftgröße einen eigenen Zeichensatz erstellen.  Um also beispielsweise das gleiche Zeichen einer Schrift in drei verschiedenen Größen dar zu stellen, werden drei Bitmaps benötigt.
  • Bitmaps-Fonts lassen sich ganz gut finden im System, denn in ihrem Dateinamen steckt auch die Schriftgröße des jeweiligen Fonts, wie z.B. "Ouch 36"
  • Bitmap-Fonts werden heute kaum noch eingesetzt. (Eher auf Kassenbons, alten Handys und Behörden-Ausdrucken)

 

Postscript-Schriften

  • 1982 entwickelten die Adobe Gründer die universelle Seitenbeschreibungssprache "PostScript"
  • PostScript-Schriftarten weisen glatte Kanten auf, sind detailreich und von hoher Qualität. Sie werden häufig im Druckwesen eingesetzt, z. B. zum professionellen Drucken von Büchern oder Zeitschriften.
  • Wie Grafiken konnten jetzt auch Schriften ausgegeben werden. Schrift wird nicht mehr in Form von Pixeln dargestellt, sondern in Form von Kurven (Bezierkurven). Sie werden mathematisch als Umrisse beschrieben, die vom Interpreter des Druckers gezeichnet und bei seiner Auflösung ausgefüllt werden.
  • Bezierkurve: Bestehen aus Anfang- und Endpunkte sowie zwei Kontrollpunkten außerhalb der Kurve. Um eine Kurve zu beschreiben, werden ergo vier Punkte benötigt.
  • Die Anweisungen werden an den Drucker geschickt und dieser richtet die Auslösung auf das Ausgabegerät aus.
  • PostScript ist eine geräteunabhängige Sprache!
  • Das bevorzugte und weit verbreiteste Fontformat sind die Type-1-PostScricpt Fonts.  Ein Postscript-Type-1-Font besteht aus mehreren Dateien. Die Endungen der möglichen Dateinamen sind .pfb, .pfm, .inf und .afm.
  • Type-3-Schriften sind die "schlechtere" Auswahl- während die Type-1 Schriften in den Anfängen nur gegen Lizenzgebühren weiter gegeben wurde, waren all jene die keine Lizenzgebühren bezahlen wollten gezwungen, das schlechtere PostScript-Type-3-Format zu verwenden.
  • Die Type-3-Schrfiten enthalten keine * Hints, was zu unausgewogener Darstellung bei kleinen Schriftgrößen führen kann (auf einem Screen und Druckern mit niedriger Auflösung)
  • Auf einem Mac bestehen Type-1-Fonts meist aus zwei Dateien:
    • Fontkoffer (beinhaltet Bildschirmschrift - als Bitmap-Font)
    • Druckerfont
  • Unter Windows  sind es:
    • PFM-Datei  (Printer Font Binary)
    • PFB-Datei (Printer Font Metrics File)
  • PostScript Schriften werden so für das Web heute nicht genommen - Es gibt aber Programme die ein PostScript Font um konvertieren können in ein webinteressantes Dateiformat.

* Hints verbessern die Fontwiedergabe bei niedriger Auslösung. Ein individuelles Hinting erhält nicht nur bis zu einem gewissen Grad die ursprüngliche Ästhetik einer Schrift, sondern optimiert insbesondere deren Lesbarkeit auf dem Bildschirm in kleinen Schriftgraden. Deshalb ist die Qualität des Font Hintings, insbesondere bei Webfonts, ein wesentliches Kriterium ber der Schriftwahl.

 

TrueType-Schriften

  • Ist eine skalierbare Vektorschrift - digitale Outlineschrift
  • True Type ist ein digitales Schriftformat für niedrigauflösende Bildschirme von PCs und Bürodruckern.
  • Sie eignen sich nicht für professionelle Schriftsatzarbeiten, die in der Druckvorstufe weiterverarbeitet werden müssen, dazu sind PostScript-Fonts notwendig!
  • Korrktur: Das schreiben alle voneinander ab, stimmt aber nicht. 
  • True Types können umgewandelt werden in einen PostScript-Font, dennoch eignen sie sich nur bedingt für die professionelle Print-Typografie
  • Der True-Type-Font besteht im Gegensatz zum PostScript-Font aus nur einer Datei
  • Sie funktioniert auf jedem Drucker und ist sehr preiswert, bzw. meist kostenlos erhältlich

 

OpenType-Schriften

  • Besteht genauso wie der TrueType-Font aus nur einer Komponente
  • Open-Type-Schriftarten ähneln den True-Type Schriftarten, verfügen aber in der Regel über einen erweiterbaren Zeichensatz, z.B. "Kaptälchen"Zahlen in alter Schrift und komplexe Formen wie Glyphen und Ligaturen. 
  • Glyphe ist die grafische Darstellung eines Zeichens - alle Schriften bestehen aus Glyphen, auch Nichtcomputer-Schriften!
  • Sie lassen sich ebenso wie der True-Type-Fonts auf beliebige Größen skalieren, sind in allen Schriftgrößen deutlich lesbar und können alle Drucker oder an sonstige Ausgabegeräte gesendet werden, die von Microsoft unterstützt werden. (auch auf dem Mac benutzbar!)
  • Es sind 216 Zeichen möglich - ergo 65.536 - basiert auf den UNICODE
  • Korrektur: es sind maximal 65536 Zeichen möglich, also 16-Bit oder zwei Byte Speicherkapazität pro Zeichen.

 

Welche Formate gibt es für Webfonts?

  • TrueType/OpenType-Fonts
     
  • Embedded OpenType (.eot)
    • Wurde von Microsoft entwickelt, funktioniert nur im  IE.
    • Abwandlung des True Type Fonts unterscheidet sich im Folgendem:< >.eot Fonts sind in der Regel für die schnellere Ausgabe im WEB komprimiert

      .eot Fonts lassen sich an bestimmte Webseiten koppeln (URL Binding)
       

  • SVG-Fonts (.svg)
    • Wurde nicht speziell für das Web entwickelt. Eigentlich handelt es sich hierbei um eine allgemeine Möglichkeit in SVG-Grafiken Schriften zu integrieren.
    • Sind XML-Dateien
       
  • Web Open Font Format (.woff)
    • Wurde speziell für das Web und für die Nutzung als eingebettete Schrift entwickelt. Es ist eigentlich ein Container für True-Type oder Open-Type Schriftarten. Die Dateien sind Dank Komprimierung sehr klein. Außerdem erlaubt .woff die Integration von Metainfos.

 

 

Bewertung: 
4
Durchschnitt: 4 (2 Stimmen)

U5: CSS-Box-Modell

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

CSS (Cascading Style Sheets)

CSS (cascading style sheets) ermöglicht das Formatieren von HTML/XML Tags und ist somit also für das Design einer Website verantwortlich. Größter Vorteil ist natürlich das strikte Trennen von Inhalt und Layout/Design (.html und .css). Das ermöglicht schnelles (und vor allem einheitliches) Ändern von Formatierungen.

Weitere Vorteile sind zum Beispiel:
1.Datenreduzierung (<h1> muss nur einmal formatiert werden und nicht in jedem HTML-Dokument)
2.Ermöglicht eine bessere Übersicht in den Dokumenten (Jeder der schon einmal einen Newsletter gemacht hat (dort wird das CSS nicht ausgelagert) weiß was ich meine).
3.Einbinden mehrerer CSS-Dateien (media, print, style-switcher, …)

Schreibweise
Selektor {Eigenschaft: Wert;}
h1 {font-size:18px;}
Die Überschrift h1 soll 18 Pixel groß sein.
Das kann auch kompliziert werden.

body#home .content_hide_all > h1:hover,
body#webdesign .content_hide_all > h1:hover {cursor: help;}

Wir lesen den Selektor von hinten:
Wenn ein h1 Element mit der Maus überstrichen (:hover) wird und es sich nur in der Verschachtelungsebene (>) (hier wird also die Vererbung eingeschränkt) von der Klasse  content_hide_all befindet und auf der Seite mit der ID (Individualformat) vom Body home oder webdesign ist, dann ist der Mauszeiger ein Fragezeichen.

Ziel einer solchen langen Anweisung ist es, das HTML-Markup so simpel und kurz zu halten wie es möglich ist.

Einbinden von CSS in das HTML:
1.im <head> als <style type=“text/css“>Hier kommt das CSS rein!</style> (wird beim Newsletter gemacht)
2.im <head> als Link <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> (das CSS wird hier ausgelagert)
3.als inline-style <li style="display:block">Text</li> (wird beim Newsletter gemacht)
4.als Import innerhalb einer CSS-Datei: @import url(screen/fancy/jquery.fancybox-1.3.1.css);

Links zu CSS:

Quizsammlung zum Thema CSS http://www.thestyleworks.de/quiz/index.shtml

 

Bewertung: 
0
Bisher keine Bewertung

CSS-Selektoren

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

Tags: 
Bewertung: 
0
Bisher keine Bewertung

Boxmodell (CSS)

Bewertung: 
2
Durchschnitt: 2 (1 Stimme)

CSS-Selektoren Tutorial

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; }
 
Es gibt noch weitere Pseudoselektoren, aber die werden die ZFA im allgemeinen Teil sicherlich nicht interessieren, vor allem da man diese erst "kürzlich" eingeführt hat in die Sprache CSS.

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. =)

Bewertung: 
4.75
Durchschnitt: 4.8 (4 Stimmen)

U6: Gradationskorrektur

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Bildkorrektur

Es gibt viele Arten von Korrekturen, die man an einem Bild durchführen kann und die meisten Korrekturen können mit unterschiedlichen Herangehensweisen erreicht werden.

Wenn ein Bild im RAW-Format vorliegt, kann man es bereits vor dem eigentlichen Öffnen in Photoshop sehr umfangreich bearbeiten. Hier ist es möglich z.B. Belichtung, Weißabgleich/Farbtemperatur, Objektivverzerrung, Bildschärfe/Rauschreduzierung am RAW, welches noch die vollständige Bildinformation besitzt, nachträglich einzustellen.

Öffnet man das Bild nun in Photoshop, sind viele Möglichkeiten geboten diverse Korrekturen und Veränderungen am Bild durchzuführen. Natürlich gibt es die Einstellung Automatisierten Bildkorrektur, jedoch liegt hierin der Nachteil, dass man nicht selbst bestimmen kann, was am Bild verändert wird. Photoshop macht quasi was es für richtig hält, was aber nicht zwangsläufig auch dem gewünschten Ergebnis entspricht.

Daher ist es ratsam sich das Bild genau anzuschauen, zu überlegen, was ist gut, was ist schlecht, was möchte ich verändern/verbessern und anschließend die Korrekturen manuell auswählen und einstellen.

Generell macht es sinn gute Bildauswahlen zu erstellen und mit Hilfe von Masken nur die Teilbereiche zu bearbeiten, die der jeweiligen Korrektur bedürfen.

Wichtige Korrekturen und einige Möglichkeiten sie umzusetzen sind z.B.:

Helligkeitsveränderungen (zu helle Bilder abdunkeln, zu dunkle Bilder aufhellen):

  • Gradationskurve,
  • Bildkorrektur Tiefen/Lichter,
  • Tonwertkorrektur

Kontrast (bei flauen Bildern erhöhen):

  • Gradationskurven,
  • Tonwertkorrektur,
  • Ebenen ineinanderkopieren

Farbstiche entfernen: 

  • Gradationskurven
  • Farbbalance
  • Farbton/Sättigung
  • Selektive Farbkorrektur

Retusche/Bildmanipulation:

  • Ausbessern-Werkzeug,
  • Kopierstempel,
  • Dodge&Burn-Methode,

Schärfen/Struktur hervorheben:

  • Filter: Unscharf maskieren
  • Filter: Hochpass + Ebeneneinstellung Ineinanderkopieren
  • Filter scharfzeichnen

Hauttöne überarbeiten:

  • Gradationskurven (meist etwas weniger Cyan, damit die Haut im Druck nicht "dreckig" wirkt)

Freisteller:

  • Ebenenmaske über freizustellendes Objekt legen und die Bereiche, die ausgeblendet werden sollen, auf der Maske mit schwarz füllen, was zu sehen sein soll hingegen weiß einfärben
Bewertung: 
0
Bisher keine Bewertung

Graubalance

Bei der Graubalance handelt es sich um das Zusammenspiel der drei Grundfarben Cyan, Magenta und Yellow im Druck....

Wenn man mit diesen drei Farben ein neutrales Grau drucken möchte, muss man bestimmte Rasterwerte einhalten damit es neutral (also ohne Farbstich) wird. Dies geschieht in der Reproduktion bzw. ist in den ICC-Farbprofilen vorgegeben.

Man könnte glauben, dass z.B. 40% Cyan, 40% Magenta und 40% Yellow grau ergeben – so ist es aber leider nicht.

Warum nicht?: Weil die Beschaffenheit der Pigmente in den drei Farben nicht optimal ist. Und somit hat man ermittelt, dass Cyan einen höheren Tonwert benötigt als etwa Magenta und Yellow. So kam man auf Werte wie: C. 50%, M: 40%, Y: 40%...

Bei der GCR-Farbseparation versucht man graue Farbtöne oder Grauanteile der Mischfarbe durch Schwarz anstelle der drei Farbanteile C,M,Y zu drucken. Dadurch hat der Drucker weniger Probleme ein Bild mit den richtigen Farben  zu drucken. Grau wird immer ohne Farbstich gedruckt, da keine bunten Farben mitdrucken und in Farben in denen 3 Grundfarben vorkommen (Tertiärfarbe) wird die mögliche Farbabweichung minimiert.

 Außerdem hat der Drucker mit dem Graubalance-Feld im Druckkontrollstreifen ein Hilfsmittel, um visuell zu prüfen, ob er die Farbeinstellung der Farbwerke richtig vorgenommen hat. Er erkennt am Graubalancefeld, welches im 40% und 80% Tonwert-Bereich vorhanden ist, ob ein Farbstich und somit eine falsche Farbeinstellung der Druckmaschine vorliegt. Vorraussetzung: Richtige ICC-Profile bei der Farbseparation und richtig belichtete Druckplatten, richtige Papierwahl, etc.

 

Bewertung: 
3.5
Durchschnitt: 3.5 (2 Stimmen)

U7: Frame-Größen

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

U8: XML

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

XML Grundaufbau Tutorial

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.
Bewertung: 
4.45
Durchschnitt: 4.5 (20 Stimmen)

XML_ Zusammenfassung

AnhangGröße
PDF icon XML_Zusammenfassung.pdf1.71 MB
Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

U9: Ausgabedaten erzeugen

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Beratung und Planung

Bewertung: 
0
Bisher keine Bewertung

U10: Urheberrecht

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Urheberrecht

Beim Thema Urheberrecht  ist das eigentliche Urheberrecht und das daraus abgeleitete Nutzungsrecht zu unterscheiden. Vielfach fällt auch der Begriff Copyright, dies hat jedoch in Deutschland keine Funktion. Urheberrecht entsteht übrigens automatisch und muss nicht angemeldet werden.

Eine umfangreiche Einführung ins Thema Urheber- und Nutzungsrechte, Creative Commons bietet:

Rechtsfragen bei E-Learning Ein Praxis-Leitfaden von Rechtsanwalt Dr. Till Kreutzer, (Dieses Werk steht übrigens selbst unter Creative Commons Lizenz (allerdings Nicht zur Bearbeitung freigegeben, sonst hätten wir es hier weiterschreiben können.)

Ausführungen zu Urheberrecht von mediafon – Hotline für Freiberufler

https://www.diedruckerei.de/magazin/nutzungsrechte-fotos-und-bilder/

Bewertung: 
1.6
Durchschnitt: 1.6 (5 Stimmen)

Bildrechte

Beim Bildrecht kann man die Thematik in zwei Themenbereiche unterteilen.
http://www.rechtambild.de/

1. Zunächst die Frage des Urheberechts und der damit verbunden Nutzungsrechte für Bilder.

2. Anderseits um Fragen wie Recht am eigenen Bild aber auch Fragen ob jeder jedes Bild aufnehmen und weiterverkaufen darf z.B. Aufnahme von Sportveranstaltungen.

(Beispiel: UEFA klagt gegen Veröffentlichung von Handy-Bilder im Internet: http://www.art-lawyer.de/index.php5?page=Themen&id=Uefa_will_gegen_EM_Aufnahmen_im_Internet_vorgehen)

 

Weiterführende Links - Bildrecht allgemein:

http://www.gekforum18.de/content/e152/e446/

 

Was darf frei fotografiert werden und was nicht?

1. Bildrecht Personenbilder

Grundsätzlich gilt: Veröffentlichung nur mit Einwilligung des Abgebildeten (KUG Kunsturhebergesetz § 22 - "Recht am eigenen Bild")

 

Ausnahmen:

a) Bildnisse aus dem Bereich der Zeitgeschichte

  • früher Unterscheidung "absolute" oder "relative" Person (absolute Personen stehen durch das gesamte Wirken dauerhaft in der Öffentlichkeit, relative Personen sind z.B. Schauspieler, Sportler, etc.)

  • seit 2004 Abwägung zwischen Interesse der abgebildeten Person und dem Informationsinteresse der Öffentlichkeit (Persönlichkeitsrecht <-->Meinungsfreiheit)

b) Person als Beiwerk neben einer Landschaft oder sonstigen Örtlichkeit

  • Ausnahme zum Einwilligungsvorbehalt KUG § 23, wenn die Person keine zentrale Bedeutung für das Foto hat und demzufolge als Beiwerk nur am Rande wahrgenommen wird

c) Bilder von Massenveranstaltungen (Demonstration, Sportveranstaltung, etc.)

  • zulässig, sofern die Veranstaltung zentraler Gegenstand des Fotos ist

d) Künstlerische Fotografien

  • darf nur zu einem künstlerischen Zweck veröffentlich werden (z.B. Ausstellung)

  • es darf KEINE Auftragsarbeit sein

Oben genannte Ausnahmen gelten nur, wenn keine Persönlichkeitsrechte verletzt werden (Privat- oder Intimsphäre). Ebenfalls darf das Foto nicht für kommerzielle Zwecke genutzt werden (Stichwort Lizenzen).

 

Einwilligung des Abgebildeten lt. KUG § 22 (1):

  • Rechtssicherheit bei schriftlicher Einwilligung sowie Angabe von Zweck und Umfang der Veröffentlichung

  • bei Kindern ist die Einwilligung der Eltern erforderlich

  • bei größeren Kindern und Jugendlichen die Einwilligung der Eltern sowie des Kindes selbst

 

2. Bildrecht Sachbilder

Grundsätzlich gilt, dass für urheberrechtlich geschützte Werke die Einräumung eines Nutzungsrechts (Lizenz) erforderlich ist (Fotografien von Gemälden, Skulpturen, Schmuck, etc.)

Verboten ist ausdrücklich ein Eingreifen in die Privatsphäre (z.B. Außenaufnahme von Wohnhäusern Prominenter, Innenaufnahmen von Wohnungen, etc.).

 

a) Panoramafreiheit

  • Urheberrechtlich geschützte Werke die sich (DAUERHAFT!) an öffentlichen Wegen befinden, dürfen abgebildet werden (siehe UrhG § 59)

  • nicht zulässig: Aufnahmen von privatem Boden aus, Innenaufnahmen ohne Einwilligung sowie vorübergehend sichtbare Werke

b) Zitatrecht

  • ein Bild von anderen Werken darf in einem eigenen Werk abgebildet werden wenn eine "Belegfunktion" gegeben ist; d.h. das z.B. ein abgebildetes Werk einen Text belegt. Ein inhaltlicher Bezug zum Thema muss bestehen und die Quelle muss angegeben sein (Urhebernennung, Fundort).

c) Unwesentliches Beiwerk

  • Nutzung von Fotos, in denen andere Werke nebensächlich abgebildet sind (z.B. Abbildung von Kunstwerken um eine öffentliche Ausstellung zu bewerben oder ein Kunstdruck auf einem T-Shirt)

Für den privaten Gebrauch dürfen urheberrechtlich geschützte Werke fotografiert werden. Sollten diese Veröffentlich werden, gelten oben aufgezählte Punkte.

Die urheberrechtliche Schutzfrist eines Lichtbildes läuft ab 70 Jahre nach dem Tod des Urhebers.

 

3. Innenaufnahmen

  • Macht ein Mieter oder Eigentümer sowohl im öffentlichen als auch im nicht-öffentlichen Bereich vom Hausrecht gebrauch, dürfen Fotos weder erstellt noch veröffentlich werden (siehe Museen, Kulturveranstaltungen, etc.).

  • Gleiches gilt für Außenaufnahmen, die von privatem Grund aus erstellt werden.

 

4. Sonstige Fotografieverbote

  • Militärische Anlagen und damit zusammenhängend Waffen, Militärfahrzeuge, etc. dürfen nicht fotografiert werden. (Ausnahmegenehmigung)

  • Gleiches gilt für Luftaufnahmen, die die Sicherheit der BRD gefährden.

 

(Quelle siehe 1. Link oben S. 3 - 6: http://www.dipp.nrw.de/lizenzen/faq/faq-bildrechte/index_html?set_language=en&cl=en)

 

 

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

Markenschutz

Bewertung: 
0
Bisher keine Bewertung

U11: Papierberechnung

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Nutzenberechnung

Nutzenberechnung

Um einen Druckbogen optimal für die Erstellung eines Druckprodukts zu nutzen, werden mehrere gleichartige Druckmotive darauf angelegt. Druck zu mehreren Nutzen bedeutet, dass zur besseren Materialausnutzung (Steigerung der Produktivität) mehrere gleiche Motive in bestimmten Abständen aneinandergereiht auf einem Bogen gedruckt werden. In Sammelformen sind vom Umfang her als gleich anzusehende Objekte untergebracht, das können zwar jeweils auch mehrere Nutzen sein, aber oftmals sind die Motive unterschiedlich. Mit Nutzen wird weiterhin die Anzahl der Bogen beschrieben, die aus einem Ausgangsbogen geschnitten werden können. Die Nutzenberechnung ist ein wichtiger Bestandteil der Druckkalkulation.

Hier einige Beispielrechnungen:

Formel für die Nutzenberechnung. Breite Druckbogen geteilt durch Breite Nutzen ergibt eine Zahl 1, Höhe Druckbogen geteilt durch Höhe Nutzen ergibt eine Zahl 2. Zahl 1 mal Zahl 2 ergibt die Anzahl der Nutzen. Im Beispiel: 88 Zentimeter geteilt durch 15 ergibt 5. 62 Zentimeter geteilt durch 10 ergibt 6. Das ergibt 5 mal 6 gleich 30 Nutzen.

Ohne Reststreifen/Ohne Laufrichtung:

Beispiel: Format 10 cm x 15 xm in einen Bogen 62 cm x 88 cm

 

Rechnung:

 

62 cm

 

88 cm

 

:10 cm

 

:15 cm

 

6 N.

5 N.

= 30 Nutzen

 

Das Format wird nun gedreht:

 

62 cm

 

88 cm

 

:15cm

 

:10 cm

 

4 N.

8 N.

= 32 Nutzen

 

Lösung: 32 Nutzen

 

Mit Reststreifen/Ohne Laufrichtung:

Beispiel: Format 10 cm x 15 xm in einen Bogen 62 cm x 88 cm

 

Berechnung der Nutzen ohne Rest:

 

62 cm

 

88 cm

 

:10 cm

 

:15 cm

 

6 N.

5 N.

= 30 Nutzen

2 cm Rest

 

13 cm Rest

 

 

Ist einer der Divisionsreste größer als die kürzere Nutzenseite, so ist noch Platz für weitere Nutzen

Hier verbleibt ein Nutzbarer Reststreifen von 13 cm x 62 cm

 

Berechnung des Reststreifens:

 

13 cm

 

62 cm

 

:10 cm

 

:15 cm

 

1 N.

4 N.

= 4 Nutzen

 

Hier könnten 30 + 4 Nutzen, also 34 Nutzen untergebracht werden

 

Es folgt die Rechnung mit umgekehrter Nutzenstellung:

 

62 cm

 

88 cm

 

:15 cm

 

:10 cm

 

6 N.

5 N.

= 32 Nutzen

2 cm Rest

 

8 cm Rest

 

 

Es ist kein Reststeifen übrig auf dem sich weitere Nutzen unterbringen lassen.

 

Nutzenberechnung bei vorgegebener Laufrichtung: (es braucht keine Gegenprobe)

Beispiel: Format 12 cm x 16 cm auf einem Druckbogen 46 cm x 66 cm

 

46 cm

 

66 cm

 

:16 cm

 

:12 cm

 

2 N.

5 N.

= 10 Nutzen

L

Bewertung: 
0
Bisher keine Bewertung
Textoptimierte Version in Einfacher Sprache: 


Nutzen berechnen

Nutzen = Anzahl der Exemplare

Bei der Nutzenberechnung wird berechnet, wie viele Einzelexemplare eines Produktes (z. B. Visitenkarten, Flyer) auf einen Druckbogen passen.

Druck zu mehreren Nutzen

Man druckt auf einem Bogen mehrere gleiche Motive in einem bestimmten Abstand, weil man den Bogen gut nutzen will. Die Produktivität wird gesteigert.

Sammelformen

In Sammelformeln kann man unterschiedliche Motive aus mehreren Aufträgen drucken, wenn die Auflage ähnlich groß ist.

Die Nutzenberechnung ist ein wichtiger Teil der Druck-Kalkulation.

Beispiel: Nutzen optimal berechnen

Formel für die Nutzenberechnung. Breite Druckbogen geteilt durch Breite Nutzen ergibt eine Zahl 1, Höhe Druckbogen geteilt durch Höhe Nutzen ergibt eine Zahl 2. Zahl 1 mal Zahl 2 ergibt die Anzahl der Nutzen. Im Beispiel: 88 Zentimeter geteilt durch 15 ergibt 5. 62 Zentimeter geteilt durch 10 ergibt 6. Das ergibt 5 mal 6 gleich 30 Nutzen.

U12: Webdesign/Layouttechnik

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Konzeption und Visualisierung

Bewertung: 
0
Bisher keine Bewertung

U10: Urheberrecht

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Verlinkte Beiträge unter FR Beratung und Planung: https://mediencommunity.de/content/u10-urheberrecht

Bewertung: 
0
Bisher keine Bewertung

 

U11: Preflight

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

U12: Display-Berechnung

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Gestaltung und Technik, Schwerpunkt Print

Bewertung: 
0
Bisher keine Bewertung

U10: Bild-Komprimierung

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Bildkomprimierung

Bildkomprimierung
- für einzelne Dateiformate werden verschiedene Komprimierungstechniken angeboten

LZW – Lempel-Ziff-Welch
- Verlustfreie Komprimierung von 24- und 32-Bit-Farbbildern und Grafiken sowie indizierte Dateien mit bis zu 256 Farben in den Dateiformaten TIFF, PDF und GIF
- in der Abfolge von Pixeln wiederholen sich bestimmte Muster
- bei einer Komprimierung wird eine Musterbibliothek angelegt, bei mehrfacherer Verwendung eines Musters wird nicht mehr das Muster sondern nur noch der Bibliotheksindex gespeichert

JPEG – Joint Photographic Experts Group
- Verlustbehaftete Komprimierung für 24- und 32-Bit-Farbbilder, die von den Dateiformaten JPEG, TIFF und PDF unterstützt wird
- weitesten verbreite Bilddatei- und Komprimierungsverfahren für Internet
- wird aber auch in anderen Formaten wie PDF und TIFF eingesetzt
- erfolgt in mehreren Schritten, die nacheinander abgearbeitet werden

PNG – Portable Network Graphics
- lizenzfreie Alternative zum GIF
- besitzt eigenes komplexes Kompressionsverfahren zur verlustfreien Komprimierung
- unterstützt zwischen 1- und 64-Bit-Bilder
- wird von allen Browsern unterstützt

GIF – Graphics Interchange Forma
- erlaubt verlustfreie Komprimierung
- mehrere Einzelbilder können in einer Datei abgespeichert werden(Animation)
- Grafikformat für Bilder mit Farbpalette

Huffman-Codierung
- die Werte in einer zu codierenden Datenmenge sind ungleichmäßig in ihrer Häufigkeit verteilt
- die häufigsten Werte werden mit dem kürzesten Binärcode bezeichnet, die seltensten haben den längsten
- die Häufigkeitsverteilung der Ton- und Farbwerte erfolgt über Histogramme

Bewertung: 
0
Bisher keine Bewertung

U11: Farbprofil-Klassen

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

U12: PDF/X

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

PDF/X Standard

Mit dem PDF/X-Standard wird das Ziel verfolgt einen zuverlässigen Austausch von PDF-Dokumenten zwischen den, an der Produktion von Drucksachen Beteiligten, zu gewährleisten.

Mit dem "X" in PDF/S soll deutlich gemacht werden, dass ein solches PDF Dokument "blind" (blind eXchange) ausgetauscht und verarbeitet werden kann.

Die PDF/X Standards definieren druckvorstufen-spezifische Eigenschaften. Es handelt sich bei PDF/X-Datein nicht um eine Untermenge von PDF, sondern um Beschränkungen innerhalb des PDF-Formats, auf die in der Druckvorstufe relevanten Aspekte.

Alles, was nicht für die Druckausgabe notwendig ist, darf in einer PDF/X-kompatiblen Datei nicht enthalten sein. 

Der kleinste gemeinsame Nenner einer solchen Anforderung ist die PDF-Spezifikation 1.3.

 

Die PDF/X-Anforderungen:

  • alle Schriften eingebunden
  • alle bilder eingebunden (kein OPI)
  • Angaben zu Erstellungsdatum, Dokumententitel und Erzeugungsprogramm
  • die Definition des Netto-Seitenformats (Trim Box) und des Anschnitts (BleedBox)
  • Information zur Überfüllung
  • Festlegung eines Ausgabefarbraums

 

PDF/X-3 erlaubt die Verwendung von medienneutralen Farbräumen wie Lab der RGB (im Gegensatzu zu PDF/X1a, nur CMYK).

Vorraussetzung ist, dass RGB Daten mit ICC-Profilen versehen sind.

Nicht erlaubt sind:

  • Verschlüsselung
  • Transparenzen
  • Anmerkungen innerhalb der druckbaren Seite
  • Formularfelder
  • LZW-Kompression (lizenzrechtliche Gründe)
  • JavaScript, interaktive und Multivedia-Elemente
  • Transferkurven

 

Trim Box:

beschreibt das eigentliche, beschnittene Endformat. Funktioniert wie eine Maske, alles ausserhalb wird abgeschnitten.

 

Bleed Box:

erlaubt die Aufnahme von Anschnitt und Infobereich im PDF. Vergrößert die Maskierung der Trim Box.

Bewertung: 
4.625
Durchschnitt: 4.6 (8 Stimmen)

Gestaltung und Technik, Schwerpunkt Digital

Bewertung: 
0
Bisher keine Bewertung

U10: CSS3-Animation

Animationen auf Webseiten können seit der Veröffentlichung der CSS3 (Cascading Style Sheets Version 3) direkt mittels CSS definiert werden.

Umwege/Situation vor CSS3 Animationen

Vorher war es Web-Entwicklern nur über Umwege möglich Animationen auf Webseiten zu implementieren. Solche Umwege waren zum Beispiel

  • der Einsatz von Flash Animationen (von Adobe 2021 eingestellt und ab sofort in allen Browsern blockiert)
  • Scripte um einzelne Elemente auf den Webseiten zu manipulieren sodass diese Veränderungen zeitliche Animationen entstehen ließen, beispielsweise Script-Sprachen wie JavaScript
  • das Einbinden von Medieninhalten, die Animationen abbilden können, dies umfasst zum Beispiel GIF (Graphics Interchange Format) oder APNG (Animated Portable Network Graphics)

 

CSS3 Animationen

Animationen in CSS betreffen wie auch die über CSS festgelegten Styles immer ein spezifisch ausgewähltes (selektiertes) Element des HTML-DOMs.

Dabei definierst du die Animation getrennt von dem Element, welches du animieren möchtest. Dies macht es möglich, die gleiche Animation gleich auf mehrere Elemente anwenden zu können.

Die Arbeit mit CSS-Animationen gliedert sich demzufolge also in die folgenden zwei grundlegenden Bestandteile:

  1. Die Definition der CSS3 Animation
  2. Die Zuweisung der vorher definierten CSS3 Animation

 

Definiton der Animation

Normale CSS Styles beschreiben das Aussehen eines beliebig selektierten HTML-Elementes immer "fix und statisch", also das Aussehen verändert sich nicht auf zeitlicher Ebene.

Die Webseite wird geladen, der Browser liest die CSS-Styles und wendet diese optisch auf die entsprechenden Elemente an, das wars.

Eine weitere Veränderung des Aussehens der Elemente erfolgt nicht (zumindest nicht durch CSS, mit JavaScript oder ähnlichen Script-Sprachen ist auch dies möglich.)

Damit aber nun genau das doch möglich ist durch CSS lassen sich solche zeitlichen Abfolgen von Veränderungen des Aussehens der HTML-Elemente durch die besagten CSS Animationen erstellen.

Hierbei handelt es sich um übliche Style-Zuweisung, welche nun jedoch nicht ein fixen Zusatnd eines Elementes beschreiben sondern eben mehrere Zustände.

Ein einzelner Zustand ist hierbei ein sogenannter Keyframe, Animationen entstehen nun, wenn mehrere dieser Keyframes definiert werden durch die unterschiedlichen Styles, die jeweils im entsprechenden Keyframe festgelegt sind.

Wie auch bei CSS Media Queries gibt es hierzu in CSS eine sogenannte AT-Rule (at da mit dem @-Zeichen beginnende Deklaration), diese seiht so aus: 

@keyframes

Um nun eine vollständige Animation mit mehreren Keyframes aufzubauen muss zunächst einmal der Name der Animation festgelegt werden, dieser folgt der @-Regel und nach dem Namen schließen sich entsprechend die CSS üblichen geschweiften Klammer an, welche alle weiteren animationsspezifischen Deklarationen umschließen werden.

@keyframes example { … }

Die oben definierte CSS-Animation trägt den Namen example und kann entsprechend über diesen auch später referenziert werden.

Namensgebung von Animationsnamen

Zur Bennenung deiner Animation solltest du am besten standardisiert vorgehen, so vgersteht jeder Entwickler intuitiv worum es geht und kann mit deinem Code etwas anfangen.

Weit verbreitet sind hierbei die folgenden Regeln:

  • englischsprachige Bezeichnungen
  • alles in Kleinbuchstaben
  • Zur Trennung logischer Bestandteile des Namens Bindestriche verwenden (da wo du sonst zum Beispiel Leerzeichen setzen würdest)

 

Generell ist bei den Namen rein technisch folgendes zu beachten:

A name identifying the animation. This identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be none, unset, initial, or inherit.

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

 

Nach der Namensgebung schließen sich nun die einzelnen Styles der verschiedenen Zustände/Keyframes der Animation an, diese werden alle innerhalb der geschweiften Klammern geschrieben.

Das besondere nun ist, dass sich die Styles ja in mehre Zustände gliedern, daher schreibst du dort hin, wo du sonst den Selektor einer CSS-Regel schreiben würdest, stattdessen eine zeitliche Festlegung.

Diese bestimmt dann, wann der Zustand der Animation ausgelöst wird.

Konkret hasst du hier verschiedene Optionen die Zeitpunkte zu makieren:

  • über die Keywords from und to
    • from beschreibt den Zustand beim Start der Animation
    • to hingegen den Zustand am Ende der Animation
  • über %-Angaben
    • hierbei ist eine unebgrenze Anzahl an Zwischenstopps/Keyframes möglich

 

Beispiel von w3schools.com der from/to-Zuweisung

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Bei der oben stehenden Animation ist beim Start der Animation der Hintergrund des gewählten Elementes Rot und bei Ende ist dieser entsprechend Gelb.

Bei der Nutzung von Prozent-Angaben kann es zum Beispiel wie folgt aussehen (w3schools.com):

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

Zuweisung der Animation

Nachdem die Animation nun definiert ist, kannst du diese einem beliebig selektierten HTML-Element mittels den entsprechenden CSS Deklarationen zuweisen.

Hierfür gibt es eine ganze Reihe an CSS Eigenschaften (Properties),  die du hierbei deklarieren kannst.

Die folgenden Eigenschaften sind zuweisbar:

  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

 

Erforderlich sind zunächst einmal der Name der Animation, in unserem Fall example sowie eine Zeitangabe, wie lange die Animation dauern soll.

Diese Eigenschaften sind beide in dem Selektor-Block des Elementes unterzubringen, welche die Animation erhalten soll, hier z. B. jeder div auf der Webseite.

div {
  animation-name: example;
  animation-duration: 2s;
}

Den Name legst du durch folgende Eigenschaft fest:

animation-name: example;

Die Zeitangabe/Dauer der Animation dann entsprechend über:

animation-duration: 2s;

Hier hast du zunächst dein Animationsname und anschließend eine bestimmte Zeitdauer, hier 2 Sekunden angegben, diese Angaben reichen bereits aus, dass deine Anmiation dem Element zugeordnet ist, und dieses somit animiert, so wie du es in der Abfolge der Keyframes deiner Animation festgelegt hast.

 

Weiterführende Inhalte

Die Details kannst du nochmals über folgende Links nachvollziehen, hier erhäst du zusätzlich ncoh weitere Einblicke in die Theamtik Animationen mittels CSS3:

 

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

 

U11: PHP-Formularauswertung

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

 

Formularverarbeitung mit PHP

Ganz simpel!

Auf der HTML-Seite hat man irgendein Formular.

    <form method="POST" action="formularverarbeitung.php" >
   
        <input type="text" name="betreff">
       
        <textarea name="kommentar"></textarea>
       
        <input type="submit" value="Speichern">
   
    </form>

Welche Art von Feldern in dem Formular stehen, ist egal. Was man braucht ist der "name". In der PHP-Datei, an die es geschickt wird, kann man den Inhalt nämlich unter diesem Namen abrufen und in Variablen speichern.

    <?php
   
        $betreff = $_POST['betreff'];
       
        $kommentar = $_POST['kommentar'];
   
    ?>

Wenn das Formular mit method="GET" funktioniert, dann muss da anstelle $_POST['...'] allerdings $_GET['...'] stehen. Man kann auch einfach $_REQUEST['...'] schreiben, denn das geht für beide.

Nachfolgend kann man mit den Variablen anstellen, wonach einem der Sinn steht... In eine Datei schreiben, in die Datenbank schreiben oder auch einfach nur ausgeben.

    <div class="beitragstitel">
    
        <h2><?php echo $betreff; ?></h2>
    
    </div>
    
    
    <div class="beitrag">
    
        <?php echo $kommentar; ?>
    
    </div>

 

Nicht schlecht, aber für Newbies ein bisschen viel auf einmal ;)
Tutorial auf Quakenet: http://tut.php-q.net/de/post.html

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

U12: Video-Einstellungsgrößen

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üfungen 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.
Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe. https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2021

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung