Tag 20

Klausurvorbereitung:

- Was ist TYPO3?
Content Management System (CMS) auf PHP und SQL-Basis

- In welcher Sprache wird TYPO3 ausgegeben?
Englisch

- Mit welchem Werkzeug und Modul kann man die Deutsche Sprache öffnen?
Modul Werkzeug Language

- Kann man T3 auf jeder Plattform benutzen?
JA

- Kann ein Redakteur in dessen Umgebung die Sprache auf Deutsch abändern?
Ja ->Usersettings auf Deutsch abändern

Admin-Werkzeug "Language" für Redaktuere nicht möglich auszuwählen

- Kann man TYPO3 erweitern?
Ja (Erweiterungsmanager)

- Mit welchem Werkzeug?
Erweiterungsmanager

- Wie wird ein neues Seiteninhaltsseitenelement angelegt?
Über das Werkzeug "Seite" oder "Funktionen"

- Wie nennt man die drei Bereiche das BE?
Modul-/Werkzeugbereich (links) || Strukturbereich/Navigationsbereich (Mitte) || Arbeitsbereich/Detailbereich (rechts)

- Was sieht der User, der unsere Domain aufruft?
FE (Frontend)

- Mit welcher LOGIN Kombi kann ich mich ins BE einloggen?
admin/password (standardmäßig)

- Mit welchem Modul/Werkzeug kann man sein PW ändern?
über Einstellungen

- Mit welchem LogIN kann man auf die DB im TYPO3 zugreifen?
root/localhost -> PW bleibt leer!
Wird bei der 1-2-3-Installation zum ersten Mal eingegeben. («joh316» ist das PW für dem Installationsbereich)

- Mit welchem Modul legt man generell Datensätze an?
Modul "Liste"

- Wie nennt man das Root-Template in TYPO3 auch?
Konfigurationstemplate

- Wie nennt man das HTML- und CSS-Template?
Designtemplate

- Was heißt eigentlich Template?
Template = "Vorlage"

- Welches Objekt muss im Konfigurationstemplate vorhanden sein?
page-Objekt (Grundgerüst für das FE in TYPO3)

- Erweiterungen nennen (mind. 3):
 tt_news, realurl, indexed_search, phpmyadmin, powermail, workspace,

- Was ist Powermail?
Erweiterung, mit der man Kontakt-Formulare erstellen kann

- Was ist tt_news?
Erweiterung, um Nachrichten zu verwalten (anlegen, ändern, kategorisieren, zeigen)

- Was macht man mit dem Werkzeug Nachrichten?
Nachrichten verfassen und in Kategorien anlegen

- Was macht das PlugIn von tt_news?
Konfiguriert die Ausgabe von News für das FE (welche News werden gezeigt? An welcher Stelle? In welcher Reihenfolge?)

!!! Die Erweiterung ist alles zusammen !!! Das PlugIn ist ein Steuerungselement !!!

- Nenne 3 Inhaltselemente:
Bsp.: Überschrift, Aufzählung, Text, Text und Bilder, Tabelle, nur Bilder, Medien, etc.

- Wie nennt man den Bereich, von der man die T3-Extensions herunterladen kann?
Extension Repository

- Wie heißt die Erweiterung, mit der man Texte schreiben kann?
(Standardmäßig im T3) Richtext-Editor RTE -  ist standardmäßig installiert

- Was ist TER?
TYPO3 Extension Repository

-  Wie heißt das statische Template aus Erweiterung, mit dem Inhaltselemente für das FE aufbereiten kann?
CSS_Styled_Content

- Wie heißt der Befehl, mit dem man die in CSS_Styled_Content aufbereiteten Daten im FE für das FE zeigen kann?
styles.content.get

- Mit welchen Hilfsmitteln können wir in einem Design-Template unsere Inhalte in HTML / im FE plazieren?
Marker + SubParts!

- Wie heißt das (grundlegenede) Verzeichnis in TYPO3, in das wir unsere externen Dateien speichern?
Fileadmin

- Wie heißt das root-Verzeichnis auf einem Webserver?
htdocs

- Wie nennt man das Werkzeug, mit dem der Redakteur seinen Workflow bearbeitet? Arbeitsumgebung / Workspace

Gute Seiten:
http://typo3-anwender.blogspot.de/ 

http://www.typo3-hilfe.eu/einleitung/

Real-URL
Direct-Mail
Seiteneigenschaften

Cache =  Standard, ist 1 Tag (empfohlener Wert: 1 min.)

Indexsuche einbeziehen macht nicht immer Sinn, z.B. bei allgem. Geschäftsbedingungen

TSconfig = individuelle Vorgaben für jeden Backend-Benutzer ermöglicht. Das Eingabefeld findet man daher bei der Backend-Benutzer Administration im Datensatz der einzelnen Benutzer.
Template Metadata anlegen mit .txt-Datei

# META-TAGS
page.meta {
  description.field = description
  description.stdWrap.ifEmpty.cObject = TEXT
  description.stdWrap.ifEmpty.cObject.value = Die Standard-Beschreibung der Website.
 
  keywords.field = keywords
  keywords.stdWrap.ifEmpty.cObject = TEXT
  keywords.stdWrap.ifEmpty.cObject.value = keyword1, keyword2, keyword3

  # OPTIONAL
  author.stdWrap.dataWrap = {field:author}, {field:author_email}
  abstract.field = abstract
  revised.data = page:SYS_LASTCHANGED
  revised.strftime = %A, %d.%m.%Y
}

Ranking für die SEO wichtig, bitte immer mit E-Mail-Adresse
Bei Beschreibung etwas einsetzen, gut für die SEO
Metadaten immer komplett ausfüllen!
Nur eine H1 auf der Startseite

Klausur:

Tag 19

parcel = ein Teil des Ganzen (Template), Teil des Templates, Baukastenprinzip, Änderungsaufwand viel geringer
Grid Wizard = Backendlayout, 12 Spalten und Zeilen maximal

Klausur:

• Was ist Typo3 = ein Content Mangement System
• Worauf beruht Typo3 = Auf PHP und einer SQL-Datenbank
• In welcher Sprache wird das Source und Dummy -Packet geliefert = englisch
• Mit Extensions wird Typo3 erweitert, ja!
• Welche Erweiterungen kennen wir:
  tt-news, power-mail, phpmyadmin, index-search, css styled content, rich text editor, workspaces
• Wie nennt man das Typo3-Template, in dem Typoscript bereitgestellt wird?
  Configurations Template/Default Root Template
• 1 Antwort richtig, aber auch mehr, immer was ankreuzen!!!
• HTML und CSS-Template, welches eingebunden wird = Design-Template
• Welches Objekt muß umbedingt in einem Root-Template eingebunden sein = Page-Template page = PAGE!!!
• Mit welchem Modul oder Werkzeug legen wir Inhaltselemente an? Seite! Alternativ Liste
• Mit welchem Modul oder Werkzeug legen mehrere Seiten an? Funktionen
• Linke Bereich = Modul oder Werkzeugbereich
  Mittlerer Bereich = Strukturbereich
  Rechter Bereich = Arbeits- oder Detailbereich
• Mit welchem Modul oder Werkzeug können wir die Backendsprache einspielen? Lanuage/Sprache
• Englisches Backenend einloggen, will aber deutsche Sprache = über Einstellungen/Sprache über user settings
• Mit welchem Modul oder Werkzeug kann ich externe Dateien auswählen? Dateiliste/Dateien
• Wie heißt das Verzeichnis, indem externe Dateien zugefügt werden? im Fileadmin!!!
•  Mit welchem Modul oder Werkzeug kann man einen Frontend/Backend-User anlegen? Mit Liste
• Nenne mir bitte 3 Inhaltselemente, die du kennst? Text, Text und Bilder, Nur Bilder, Aufzählung, Tabelle, Plug-In
• Was ist tt-news? Eine Erweiterung, die Nachrichten/news verwaltet
•  Subpart ist ein bereichsumschließendes Element (Anfang und Ende des Auslesens in HTML) <!-- ###DOCUMENT### -->
• Marker ist ein Platzhalter, z. B. ###MENU###, ###LANGUAGE###
                  ###SEARCH###
                  ###LOGIN###
                  ###SIDEMENU###
                  ###SIDEBAR###
•  hierachrisches Menü/Rangordnung 
• wrap (von englisch to wrap = ‚wickeln', ‚einhüllen') = Drumherum 
• Pipe-Zeichen | = Platzhalter
• TYPO3 basiert auf der Skriptsprache PHP. Als Datenbank kann MySQL eingesetzt werden.
• PHP - Scriptsprache mit der TYPO3 geschrieben ist
•  TypoScript =  internen Konfigurationssprache wird beschrieben, wie TYPO3 die Inhalte ermittelt, formatiert und ausgibt
• value = Wert, Eigenschaft, wrap = Ummantelung, HTML
• Was macht man mit dem Modul Nachrichten? Wir legen Nachrichtenkategorien oder Nachrichten an
• Was macht man mit dem Plug In tt-news? Konfiguriert die Ausgabe der News fürs Frontend
• Was ist powermail? Erweiterung mit der man Kontaktformulare erstellen kann.
• Wie heißt das statische Template aus Erweiterungen, das wir einbinden um Inhaltselemente für das Frontend aufzubereiten? CSS Styled Content
• Mit welchem Befehlt binden wir das CSS Styled Contend ein? Im Typo Script: mit styles.content.get binden wir diese im Frontend sichtbar (der Redakeur schreibt seinen Text, der Inhalt wird mit  styles.content.get ausgelesen, ohne das wird kein Inhalt gezeigt)
• Was ist admPanel? Kann man neben den Admin-Funktionen, ein Fronend Editing betreiben, auch für Redakteure sinnvoll
• Workspaces = von der viruellen Redaktionswelt wechseln zur Lifearbeitsumgebung
• Was machen Arbeitsumgebungen? = Einen Workflow bis zur Lifevoröffentlichung zu simulieren, hierbei werden verschiedene Stufen durchlaufen, vom Redakteur bis zur Veröffentlichung
• Wie heißt das Root-Verzeichnis auf einem Web-Server? HTDOCS
• Mit welchem Modul oder Werkzeug kann man im Berechtigungskonzept einstellen, wie auf Seiten/Inhalte zugeriffen wird? Über Zugriff
• Mit welchem Modul oder Werkzeug lege ich Backend-Benutzergruppen an? Liste/Seite Tag 14
• Mit welchem Modul oder Werkzeug kann ich Erweiterungen einspielen? Erweiterungsmanager
• Was ist rekusives löschen? Löschen einer Verzeichnisstruktur
• Unter welchem Modul kann man das rekusives löschen für Anweder erlauben? Benutzerwerkzeug/Benutzereinstellungen/Bearbeiten und erweitere Funktionen
• Unter welchem Modul kann man die Benutzereinstellungen kontrollieren? Über Backend-Benutzer-Verwaltung
• Wie könnte ein Scripting aussehen? Immer auf < achten, großer als!!! Und die Zahlen!!

Recycler = Papierkorb (in der Erweiterung aktivieren)

Papierkorb

Der Papierkorb erlaubt es, gelöschte Daten auszuwählen und sie wiederherzustellen. Ist auch das übergeordnete Element gelöscht (etwa die Seite, auf der sich das wiederherzustellende Inhaltselement befunden hat), können Sie Datensätze auch rekursiv wiederherstellen.
Daten wieder herstellen

Optimiertes Arbeiten (Erweiterte Ansicht anklicken)

Man kann Seiten über die Zwischenablage kopieren und einfügen. Entweder über kopieren oder ausschneiden.

Auf das Plus neben Seiteninhalt und dann erscheint "Felder setzen"

REL-URL (gut für SEO)

Tag 18

Neues Desing-Template:
nicht zu viele Verschachtelungen
jetzt mit Javascript
kein Flash mehr!

Es muß das Javascript-Dokument im Ordner hinterlegt sein.
Die neue Verzeichnisstruktur muß angepaßt werden und eingebunden werden
+ext headerdata im TS-Ordner definieren
Das Menü muß im TS-Ordner im Template angepaßt werden

Wir können selber entscheiden, ob wir eher "Anwederorientiert" arbeiten oder das "Customising" ansehen.

Im HTML = header und body löschen und die DIVS auskopieren und in
Das Pipezeichen | steht für Inhalte, die ersetzt werden
Content Objekt Array = COA, verschiedene Objekte mit Funktionen werden aufgenommen
wrap = Umschließt die Dinge mit dem Pipe-Zeichen
lib. = kleine Funktion
styles.content.get = der Befehl, mit dem ein Inhaltselement aus der Datenbank ausgelesen wird
colPos = 0/2  Spaltenposition
lib.content = Das ist der MARKER ###CONTENT###

Responsive Design:
www.getbootstrap.com

Tag 17

POWERMAIL:

Antwortformular erstellen:

Im Plugin selbst einstellen!

BACKEND-LAYOUT ANPASSEN

1) Neuen Ordner erstellen (BE-Layouts)
2) Dann über Liste in Backend-Layouts gehen
3) Dort in das kleine Symbol neben Konfigurationen gehen

Auf das Tabellen-Symbol gehen:

Für alle Seiten die selbe Darstellung:

Mann muß die Spalten definieren in den colPos = 2 oder colPos = 0 im Template, siehe unten:

FE-USER = Registierte Benutzer, Login-Funktion



Design-Template aufbauen

• Rahmen in einem Template ist immer gleich: Header/Footer/Body
• Der Content-Bereich muß flexibel gehalten werden
• wenn die HTML-Datei responsive ist, ist Typo3 das auch

Design-Template austauschen

• als erstes im Template das html einbinden
• dann im HTML <!-- ###DOCUMENT### --> einbinden
• HTML-Datei ###MENU### einsetzen
• CSS-Datei einbinden
• MARKER setzen

MENÜ aufbauen:
Struktur einer Unterseite aufbauen

page.headerData.10 = TEXT
page.headerData.10.value (
<script type="text/javascript" src="fileadmin/templates/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/dropdown.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/cufon-yui.js"></script>
<script type="text/javascript" src="fileadmin/templates/js/Grandesign_Neue_Serif_400-Grandesign_Neue_Serif_700-Grandesign_Neue_Serif_italic_400.font.js"></script>
<script type="text/javascript">
            Cufon.replace('h1') ('h2') ('h3') ('h4') ('h5') ('h6') ('#mainmenu ul li a', {
        hover: true
       }) ('.button', {
        textShadow: '0px 1px 0px #fff'
       })
</script>
)

Tag 16

Aufbau des Systems

• localhost/tag00
• Source und Dummy-Paket in die htdocs-Datei kopieren
• am Anfang ist es ein Standard
• Im Backend kann man schon alle Erweiterungen laden = Sprachpaket brauch man dann nur einmal laden
• php.ini ist für die Xampp-Umgebung (simulierte Internetumgebung), achten auf php-Version (5.3.7-5.5)
  

• Extentionmanager: tt-news, phpmyadmin, powermail instalieren
• Lanuage wählen (Deutsch, eventuell Spanisch)
• User Settings einstellen (German) / immer mal den Cache löschen
• Grundsätzlicher Aufbau der Site
• Standardseitenbaum: über Funktionen anlegen (gehen auch Ordner)
• Strukturen bestimmen
• aus der Home-Seite in Verweis umwandeln

• Unter neues gleich single eingeben
• Über Home das Template anlegen: Root Template ist schon eingestellt
• Template-Erweiterungen im Template laden: CSS Styled Content, ect

• das Setup:
  page = PAGE
  page.stylesheet = fileadmin/templates/style.css stylesheet mit Pfad einbinden
  
  page.10 = TEMPLATE Template einbinden
  page.10.template = FILE Datei einbinden
  page.10.template.file = fileadmin/templates/index.html Pfad (wo es liegt) einbinden
  
  page.10.workOnSubpart = DOCUMENT Ähnlich wie ein Kommentar im HTML Subpart
    <!-- ###DOCUMENT### --> (2x im body im HTML am Anfang und im Ende einsetzen)
  ließt etwas aus, wir führen dem Scripting etwas zu
  
  page.10.marks.MENU < lib.menu MARKER wird etwas ersetzt, anstelle von dem, was da stand
  page.10.marks.SIDEMENU < lib.sidemenu MARKER
  page.10.marks.SEARCH < lib.search MARKER
  page.10.marks.LOGIN < tt_content.login.20 MARKER
  
  page.10.marks.CONTENT < styles.content.get Inhalte werden normal eingschrieben
  page.10.marks.SIDEBAR < styles.content.getRight Inhalte werden rechts reingeschriebenÜbernahme der Inhaltselemente über das  Styled Content

• Templates for free: freecsstemplates.org (sind ganz einfache HTML-Templates)
• Wo kann ich was im HTML finden, wo setze ich die Marker? Wie ist der Aufbau?
• Firebug einsetzen, Umschließende DIVS finden!! (blaue Kästchen) content sidebar
• Index.html öffnen im Notepad
• Wir nehmen eine Vorlage und bestimmen dann die Inhalte
• im fileadmin Ordnern templates anlegen und unsere Designvorlage reinkopieren (index.html, css, images)
•  SQL ist eine Datenbanksprache zur Definition von Datenstrukturen in relationalen Datenbanken sowie zum Bearbeiten (Einfügen, Verändern, Löschen) und Abfragen von darauf basierenden Datenbeständen.
•  Subpart ist ein bereichsumschließendes Element (Anfang und Ende des Auslesens in HTML)
  <!-- ###DOCUMENT### -->
• Marker ist ein Platzhalter 
• Im HTML kann man den DIV-Bereich auch anders benennen und entsprechend den Marker auch anders benennen
• Im Notepad sieht man die DIV-Container, die zusammenhängen, um die Marker entsprechend zu setzen und der Inhalt wird entfernt und der Marker gesetzt (immer Container behalten!)
  von unten nach oben entfernen (keine Angst vorm löschen!)
  ###CONTENT###

 

•  Übernahme der Inhaltselemente über das Styled Content
• Im TS-Ordner werden die Basis Templates ausgelagert,
  wie z. B. +ext menu (+ext config / +ext search), die über Home Template wieder eingebunden werden, bezieht sich auf den Marker
  lib.menu = HMENU
  lib.menu {
  1 = TMENU
    1{
    wrap = <ul> | </ul>
    NO.wrapItemAndSub = <li> | </li>
    CUR = 1
    CUR.wrapItemAndSub = <li class="current_page_item"> | </li>
    }
  }
• hierachrisches Menü/Rangordnung
• wrap (von englisch to wrap = ‚wickeln', ‚einhüllen') = Drumherum
• Pipe-Zeichen | = Platzhalter
• value = Wert
• NO = Normalstatus
• CUR = grauer Hintergrund, Bold, der User weiß, wo er sich befindet

  TT-NEWS

1. Seite-Neues = werden alle Artikel angezeigt
2. DatensatzNews-Ordner = werden alle Artikel angelegt
3. PID = PageIDs definieren (Ordner/Seite neues/Single)
4. Über Erweiterungen verwalten, Haken rausnehmen

1. Über Nachrichten einen neuen Artikel im DatensatzNews anlegen
   

5. auf Neue-Seite das Plugin Nachrichten anlegen
6. Plugin = Inhaltselement = es stellt die Ausgabe/Konfiguration ein im Frontend
hier wird die Ansicht, Reihenfolge, ect. eingestellt

7. TT-News ist eine Erweiterung mit der man News verwalten kann.
Das machen wir in dem wir mit dem Modul Nachrichten in dem Ordner DatensatzNews die Nachrichten anlegen und speichern. Durch das Plugin Nachrichten auf der Seite Neues die Ausgabe der News in Listform steuern. Die Darstellung der Einzelansicht erfolgt durch eine veränderte Ansicht in dem Plugin auf der Seite Single.

8.Single-Seite = hier aktivieren wir im Plugin auf der Seite die Anzeige auf Einzelansicht stellen

9. Kategorien anlegen: auf Button klicken und anlegen
10. dann auf ensprechende Seite START gehen, auf welcher Seite der Artikel gesetzt werden soll und Plugin setzen

 










POWERMAIL

Was ist powermail?
Erweiterung mit der man Kontaktformulare erstellen kann.

Das Plugin vom Powermail nimmt das Formular auf und verwaltetet die in dem Formular eingegebenen Daten. Hierzu gehört der komplette Mailverkehr inkl. der Frontend-Kommmunikation mit dem Kontaktformular-Ausfüller.

Für die Anlage eines Formulars gehen wir auf Fomulare/Seiten und Felder auf das schwarze + (wir sind auf der Seite Kontakt)

Beim Formalare anlegen bedenken: immer Name und E-Mail angeben! Und einen Verschicken-Button! Immer zweite Optionspalette anlassen.

Die Nachrichten werden hier hinterlegt (Powermail/Ordner Powermail):

Mit Exel kann man die Daten auch abgespeichern

Tag 15

Wiederholung, eigenes System aufbauen! 15 a

Tag 14

Wiederholung vom Freitag (Film dazu sehen: jweiland.net /Anleitung für Redakteure/41)

workspaces (Arbeitsumgebungen)
Werden auf Systemebene angelegt (über Liste und Site14, obereste Ebene)
Es wird ein Name vergeben, Benutzer definiert, Benachrichtigungseinstellungen

Hierachischer Aufbau!

Eine Art Vorschau, Life-Arbeitsumgebung nur für Artikel und News:

Kontakt-Mail-Formular über Erweiterungen einstellen, für Aktion und Adressen sammeln

1. Erweiterung laden

2. Sprachen überprüfen

3. Templates laden (3 Stück)

4. Konstanten-Editor schauen und PowerMail auswählen

5. Neuen Ordner (powermail) erstellen und PID eingeben

  















Weitere Eingaben:

  

Plug in in Kontakt auswählen

Auf das schwarze Kreuz klicken

Erstellen des Formulars

Zum Schluss noch bestätigen!

Plugin Benennen, siehe unten:

Neue Datensätze anlegen:

Ein SUBMIT-Feld auswählen:

So sieht es aus:

Backend, wenn was eingetragen ist:

Inhalte der Felder spezifizieren:

Über Liste/Kontakt/Seiteninhalt "Plugin Kontaktformular" auf Seite "kontakt" bearbeiten wird das Formular konfiguriert:

Immer Betreff aktivieren!

1. Einmal Absender ausfüllen

2. Einmal Antwort ausfüllen

Kontakt/Plug in = Haken bei Bestätigungsseite aktivieren:

Pflichtfeld anklicken:

Bei E-Mail Überprüfung/E-Mail anklicken/man kann alle möglichen Optionen anklicken

Sieht dann so aus:

Spam-Filer: Captcha

 
Optimierung: Personalisierung und zurück!-Feld

Exel-Liste mit den Adressen: