Tag 18

Content-Management-System 

Ein Content-Management-System (kurz: CMS, deutsch „Inhaltsverwaltungssystem“) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content) zumeist in Webseiten, aber auch in anderen Medienformen. Diese können aus Text- und Multimedia-Dokumenten bestehen. Ein Autor mit Zugriffsrechten kann ein solches System in vielen Fällen mit wenig Programmier- oder HTML-Kenntnissen bedienen, da die Mehrzahl der Systeme über eine grafische Benutzeroberfläche verfügen.
Besonderer Wert wird bei CMS auf eine medienneutrale Datenhaltung gelegt. So kann ein Inhalt auf Wunsch beispielsweise als PDF- oder als HTML-Dokument abrufbar sein; die Formate werden bei volldynamischen Systemen erst bei der Abfrage aus der Datenbank generiert.
Joomla, Drupal, TYPO3 und WordPress zählen zu den bekanntesten Open-Source-CMS.
WordPress und Joomla sind derzeit die meistverwendeten.Von zahlreichen Behörden der deutschen Bundesregierung (z. B. Bundesverwaltungsamt, Bundesamt für Verbraucherschutz und Lebensmittelsicherheit, Ministerien) wird der Government Site Builder (GSB) zur Pflege ihrer Onlineauftritte eingesetzt.

Zum Testen von Seiten 
 XAMMP = fertige Software-Lösung, lokale Oberfläche zum Testen
z. B. WordPress, Joomla

background-size: wird mit  / angefügt
background-attachment: scroll oder fixed
Floaten beenden: clear: both; 

Um die Regeln der Attributsbezogene Selektoren ect. noch mal ansehen:

www.jendryschik.de

Schöne Beispiele: www.mediaqueri.es
http://www.stpaulsschool.org.uk/about-st-pauls


Stylesheet zum Drucken aufbereiten:
Neues Stylesheet erstellen:
1) media="screen, projection" und 
2) media="print"


1. Möglichkeit: Die HTML-Methode zum Einbetten externer CSS-Dateien
<link rel="stylesheet" href="media01.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="druck01.css" type="text/css" media="print">



2a. Möglichkeit CSS-Dateien zum Einbetten externer CSS-Dateien über @import:
 <style type="text/css">
@import url(media01.css) screen;
@import url(druck01.css) print;
</style>

3. Möglichkeit:
CSS-Dateien mit spezieller Formatieren für den Druck @media screen/@media print einbinden:
type="text/css">
@media screen {h1 {color: red; font-family: Calibri;}}
@media print {h1 {color: black; font-family: "Palatino Linotype";}}
</style>

4. Externe CSS-Datei erstellen extern.css und in der HTML-Datei einbetten
 extern.css
@import url(media01.css) screen;
@import url(druck01.css) print;

 CSS-Datei im HTML-Dokument geladen
<link rel="stylesheet" href="extern.css" type="text/css">

h2 {page-break-before: always;}  erzwinge immer 
h1+h2 {page-break-before: avoid;} vermeide 

Medienspezifisches CSS

Die Technik medienspezifisches CSS einzubinden, erlaubt die Nutzung unterschiedlicher CSS-Dateien bezogen auf das Ausgabemedium.

• media="all" (Alle Medien)
• media="screen" (Bildschirm / Computermonitor)
• media="print" (Druckausgabe)
• media="projection" (Projektion / Beamer)
• media="handheld" (Mobilgeräte, PDA)
• media="speech" (Sprachausgabe)
• media="aural" (Sprachausgabe, Audioausgabe)
• media="braille" (Braille)
• media="embossed" (Blindenschriftdrucker)
• media="tv" (TV Gerät)
• media="tty" (Bildschirmlesegeräte)

Spezielle CSS Eigenschaften für den Druck

Seitenumbruch

• page-break-after: auto, always, avoid, left, right
• page-break-before: auto, always, avoid, left, right
• page-break-inside: avoid, auto

Witwen und Waisen

• orphans: Zahl | Schusterjungen (Waisen)
• widows: Zahl | Hurenkinder (Witwen)

orphans verhindert Schusterjungen, indem der komplette Absatz auf die nächste Seite geschoben wird.
widows verhindert Hurenkinder, indem der komplette Absatz auf die nächste Seite geschoben wird.

Umbrüche im Druck erzwingen

h2 {page-break-before: always;}  erzwinge immer
h1+h2 {page-break-before: avoid;} vermeide

Responsive Design

Mediaqueries | Medienabfrage
Immer bei den Meta-Angaben einsetzten
<meta name="viewport" content="width=device-width">wichtig, immer einsetzten für Responsiv Design!!!
Man kann eine gezielte Medienabfrage machen und konkret ansprechen

unter dem Style-Block einsetzen

<link rel="stylesheet" href="rot.css" type="text/css" media="only screen and (max-width: 640px)">

<link rel="stylesheet" href="gelb.css" type="text/css" media="only screen and (min-width: 641px)">


im Beispiel verändern sich die Farben, wenn man das Sichtfeld größer oder kleiner macht