CMS (TYPO3) - Kurs Tag 16 - Workspaces (LIVE- & virtuelle Arbeitsumgebung), Papierkorb (Exkurs zum Löschen) & Hinweise zur Klausur

Mitschrift 30.05.2014

TAG 16


Wiederholung Anwender:

• Powermail

• Erweiterung, mit deren Hilfe wir Felder anlegen können, mit denen wir Anwender verwalten können (sie können sich einloggen) & automatische Emails generieren
• Menüleiste - Powermail (in der Menüleiste unter web) - hier können wir uns Mails ansehen, die an uns geschickt wurden
• Kontaktformular, mit dem man auch Kampagnen starten kann - Abfragen, wie der Kronkorken von Veltins - abstimmen, um die Ergebnisse im Backend in einer Excelliste auswerten zu lassen
• Double-Opt-In: ankreuzen, dann wird folgendes gemacht:
• Email muss bestätigt werden
• Erst wenn ich meine Mail bestätige, wird die Mail weitergeleitet - also ins eigene Postfach und auf bestätigen drücken
• ganz wichtig bei Registrierungen, um zu gucken, ob die Emailadresse die richtige ist. ABER dafür nutzt man FE_User_registration und nicht Powermail
• Bei einem Kontaktformular wird das nicht gemacht
• Aufbau des Formulars:
• Liste - kontakt (oder andere Seite auswähöen, auf der das Formular platziert werden soll)
• Felder:
• Vorname
• Nachname
• Email
• Nachricht
• absenden-Button
• mit Sternchen markierte Felder sind Pflichtfelder - Im Formular kann ich es unter Feldüberprüfung: Pflichtfeld Haken rein, einstellen
• Überprüfung der korrekten Aufbauweise einer Emailadresse
• Zusammenspiel Plug-In & Formular
• Was macht das Plug-In: Damit wird es im Frontend darsgestellt = Transporteur des Formulars (Seiteninhaltsformular), ausführendes Element, damit wir die Email bekommen, liest Infos aus dem Formular aus und führt es durch
• Was das Formular: Aufbau des Formulars
• Was beide zusammen:
• Capture: Feldergänzung: Hält Robts außen vor - also können keine automatischen Spams verschickt werden - Aushebelung von Robots, da es als Bild dargestellt wird

Wiederholung Customizer:

• tt_news_template:
• Woher kommt es und mit welcher Extension steht es zusammen?
• Was macht das Template?
• Anpassungen im Frontend, beeinflusst die Darstellung der News im Frontend
• Es können verschiedenene Ansichten gewählt werden - Seite - neues - Inhaltselement - Reiter Plugin - Reiter Allgemeine Einstellungen - Ansicht
• das Template in die fileadmin-Umgebung einpflegen
• Dann wird das, was der Designer vorgegeben hat und tt_news, 1 zu 1 so dargestellt werden.
• = Kombi bvon Design (bspw- emerald-Design-Vorlage) und Funktionalität von tt_news

Klausurüberblick:

• multiple choice und Fragen, bei denen wir nur ein Wort als Antwort schreiben müssen
• jede richtige Antwort ein Punkt
• Bei jeder Aufgabe mindestens eine Antwort richtig 
• Unterschiedliche Klausuren für Anwender und Customizer
• Customizer erhalten zusätzlich zu den Fragen noch ein zu korrigierendes Skript (neuer Wein vom 2. Tag als Tipp)
• Mögliche Fragen:
• Was ist Typo3? - Content Management System (CMS)
• Was ist ein CMS? Inhaltsverwaltungssystem, mit dem Texte verwaltet werden könne, in dem Redakterue Texte schreiben können, losgelöst vom HTML
• Hilfsmittel erlaubt
• 60 min
• 20-30 Fragen

Frage eines Teilnehmers: Unterschied Marker & Subparts

• Marker: 
• an der entsprechenden Stelle gesetzt: ###MENU###
• Subparts:
• haben ein Anfang und ein Ende (öffnend und schließend <!-- ###DOCUMENT### --> <!-- ###DOCUMENT### -->

 

Workspaces - Papierkorb

Thema für Redakteure:
Link zu jweiland

wie sieht es in einer Redaktion aus?

Man muss einen Workflow darstellen - Schritte bis zur Veröffentlichung

->Diese Funktionalität gibt es auch im Typo3
Wir können unser Workflow einrichten und so ein Redaktionsumfeld erstellen

Dazu richten wir Redakteure und den Chefredakteur ein.

Grundvoraussetzung:
neue Erweiterung über einen neuen Weg aktivieren
(wie bei Upgrade auf neue Version)

Installation - Installations-Tool freischalten - passwort: joh316 =

Installationsumgebung

Upgrade Wizard

Infos abgelegt, die schon vorhanden sind, aber noch nicht aktiviert sind.

-> Install System Extensions

• Next
• Systemextensions, die mitgeliefert sind, aber noch nicht aktiv sind
• die ersten 3 aktivieren
• die letzten beiden deaktivieren
• Simulate static werden wir durch RealURL ersetzen

Install System Extensions

• Perform updates und die kommenden Button so oft klicken, bis Update Sucessful war

->Versioning and Workspaces

-> Migrate all file relations from tt_content.image and pages.media

Migration = Übernehmen der Daten aus dem alten System in das neue System = Altumgebung einstellen

->Migrate existing filemounts to be file abstraction layer compatible.

Die letzten Punkte benötigen wir erstmal nicht weiter

 

Database Analyser:

COMPARE klicken = Vergleich der Datenbanken mit der Systemumgebung

Database-Analyser: COMPARE

Wenn unterhalb die grüne Meldung kommt, dann ist alles ok

DANN F5 drücken!



schönes Add-On, welches durch drücken von F5 erschienen ist:

Papierkorb

Steuerungsmöglichkeit von Datensätzen
2 Möglichkeiten:

• löschen-Kennzeichen oder 
• physikalisch/unwiderruflich löschen 

ABER ACHTUNG: Datenbankbereinigung, damit die Datenbank nicht zu groß wird - ERGO, kann man die Datensätze auch nicht bis Ultimo wiederherstellen - meist gibt es ein bestimmtes Zeitintervall, nachdem die Datenbankbereinigung durchgeführt wird, bei der auch der Papierkorb gelöscht wird.
ALSO: AUF DATENBANKBEREINIGUNGSZEITRÄUME ACHTEN - GGFS. BEIM ADMIN ERFRAGEN!

1) Löschkennzeichen
Wir haben dann bei Web - einen Papierkorb angezeigt
Papierkorb - start - Tabelle
Hier können wir gelöschte Datensätze wiederherstellen!

Papierkorb bei typo3

 Warum geht das? Weil wir mit löschen nur ein Löschkennzeichen setzen

In der Datenbank anzeigen: phpMyAdmin - anzeigen - Datenbank tag16 -  Tabelle tt_content - in der Spalte deletet steht entweder 0 oder 1 (= gelöscht- Kennzeichen)

Wenn wir die gelöschten Seiten auswählen und dann auf den Button Wiederherrstellen gehen, kommt folgende Info und die Datensätze sind wieder in der Datenbank aktiv:

Papierkorb in Typo3 Datensätze wiederherstellen

2) Datensätze aus tt_content unwiderruflich/ physikalisch löschen

Datensätze markieren und auf den Button "Löschen" klicken

ERGO: Gelöscht ist eben nicht gleich gelöscht!!!

Tipp für Komplettlöschung: Software über das Speichermedium laufen lassen, die die Daten darauf vollkommen vernichtet (bspw, wenn man das Handy, die Speicherkarte, den Rechner verkauft), sont können die vermeintlich gelöschten Daten wiederhergestellt werden

 

Jetzt aber wirklich zu:

Arbeitsumgebungen / Workspaces

(unter Web in der Menüleiste) ist durch das Drücken von F5 auch "Arbeitsumgebungen" entstanden

Wo kann ich Redaktionen erstellen?
Liste - Tag16 - Systemdatensätze werden hier angelegt 
(Systemdatensätze haben nicht mit den Datensätzen direkt was zu tun, sondern werden System übergreifend erstellt)
Auf neuer Datensatz erstellen - Systemdatensätze - Arbeitsumgebung klicken
Reiter Allgemein: Titel = Name vergeben (Mussfeld) = redaktion (Name der Arbeitsumgebung) = vitrtuelle Arbeitsumgebung

Speichern & Schließen

Unterscheidung der Live- und virtuellen Arbeitsumgebung

Arbeitsumgebungen - Tag16 - 2 Reiter:

• LIVE-Arbeitsumgebung
• Geschriebenes ist sofort im Frontend sichtbar
• virtuelle Arbeitsumgebung: redaktion
• erstmal ist das geschriebene nicht im Frontend sichtbar

Arbeitsumngebungen - karla - Reiter redaktion:
der Admin heißt nun: admin@redaktion und der Header ist schraffiert:

Typo3 Arbeitsumgebung

So können wir nun bei Seite - karla - einen neuen Seiteninhalt erstellen
Warum verberge ich es dann nicht einfach?
Weil dann kein Workflow entsteht. Also ich schreibe den Artikel und der Chefredakteur kann diesen Artikel dann freigeben!

Typo3 virtuelle Arbeitsumgebung neuer Artikel

Wenn ich einen neuen Artikel in der virtuellen Arbeitsumgebung eingebe, dann erscheint die Seite hautfarben unterlegt. Ich als Redakteur kann mir das Ergebnis im Simulationsfrontend ansehen, aber im wahren Frontend ist der Artikel noch nicht zu sehen

Elementvorschau

Elementvorschau - Schieberegler Live - virtuelle Umgebung

Arbeitsumgebung - karla - hier wird der Redaktionsbereich in Listenform simuliert

Auge = Elementvorschau
hier kann ich mir eine Vorschau der visuellen Arbeitsumgebung ansehen - und auch mit einem Schieberegler von live zu virtuell umswitchen
ich kann auch beide Ansichten horizontal oder vertikal auf einem Bildschirm angeordnet darstellen

roter (Verwerfen) und grüner (an Stufe Senden Bereit zum Veröffentlichung) Button = Möglichkeiten zum Workflow:

Stufe Senden Bereit zum Veröffentlichen = vorletzte Stufe vor der LIVE-Veröffentlichung

Dann kann man Email mit Kommentaren senden und die Button verändern sich:

• LIVE veröffentlichen - wenn alles ok ist
• AN STUFE SENDEN bearbeiten - wieder Kommentare zurück mit Verbesserungsvorschlägen
• VERWERFEN

Bleistift = Inhaltselement ändern in der Eingabemaske

Artikel weiterleiten:
1) Bearbeiten grüner Rechtspfeil oder 
2) durch anklicken (Haken setzen) und unten auswählen - Bereit zum Bearbeiten 

Artikel weiterleiten zum Bearbeiten

 
Das wäre ein Workflow innerhalb eines Workspaces in einer Redaktionsumgebung

Einstellmöglichkeiten & Eigenschaften einer Redaktion

Wenn wir in der virtuellen Arbeitsumgebung sind, gibt es keine Admin-Werkzeuge, man kann also nicht die LiveUmgebung verstellen Das ist doch schonmal super ;)

Also wieder zurück zur Live-Arbeitsumgebung:
Arbeitsumgebungen . Reiter LIVE-Arbeitsumgebung

Liste - Tag15 - gehen wir in die Arbeitsumgeung und gucken uns bei redaktion die einzelnen Reiter an

Reiter, die Funktionen und Einstellzungsmöglichkeiten bieten:
Reiter Benutzer (hie rkann man Chefredakteur und Redakteure zuordnen)

• Besitzer (nur er kann die Artikel freigeben zur Veröffentlichung)
• Mitglieder

später mehr dazu

Reiter: Benachrichigungseinstellungen
Emailbenachrichtigungen einstellen

Reiter Verzeichnisfreigaben 
Stichwort: Berechtigungskonzept
Über die Datensatzfreigabe, kann ich die Arbeitsumgebung auf bestimmte Seiten beschränken = wer darf virtuell, wer Live arbeiten - bspw.: du darfst Regionen nur über die virtuelle Eingabe gestalten

Reiter Veröffentlichung
Hier kann zu einem bestimmten Datum veröffentlicht werden

Reiter Stufen:
Hierarchien einstellen - Workflow beschreiben:
Chefredakteur, normaler Redakteur - evtl hat der Chefredakteur eine Sekretärin, die die Infos vorher filtern, Korrekturleser...
neu anlegen - Titel eingeben: sekretärin
(Auch Benachrichtigungseinstellungen möglich oder direkt einen Nutzer auswählen)

Speichern und schließen

Arbeitsumgebung - Modul-Arbeitsumgebung aufrufen auswählen

Icon Arbeitsumgebung

Dann wieder Test bei seite - karla normal neuer Seiteninhalt : Überschrift: Huhu eingeben

Dann kommt als nächstes an Stufe senden sekretärin = Zwischenstufe eingestellt! :)

Mit Stufe kann ich also Zwischenstufen zur Filterung oder Korrekturlesen anlegen

Wenn ich jetzt eine weitere Stufe anlege für Korrekturen - wer erhält dann zuerst den Text?

Dann erhält es erst die Sekretärin, dann die danach eingestellte Person und erst dann geht es zum Chef

So kann ich den Workflow verlängern.

Reiter Andere:
Bisher kann jeder veröffentlichen. Wir wollen also Einschränkungen einstellen:

Ab in die LIVE-Arbeitsumgeung:
Liste- Tag16 - Arbeitsumbeung - redaktion - Reiter: Andere

Haken bei:

• Öffentlicher Zugriff: 
• Pulish only content in publish stage
• Only workspace owner can publish

-> So muss der Artikel alle Stufen durchlaufen!!!

Überprüfung: virtueller Workspace - Seite - karla - neuer Artikel - speichern und schließen
Arbeitsumgebungen - redaktion/virtuelle Arbeitsumgebung - jetzt muss ich alle Stufen durchlaufen, erst dann kann der Artikel LIVE veröffentlicht werden.

Den kompletten Benachrichtungssverlauf ansehen - über KLick auf den Pfeil

So - die Customizer stellen uns nun das System ein - Also wer ist Chefredakteur, wer Redakteur.

CMS (TYPO3) - Kurs Tag 12 - Search (inhaltslos) & Login

Mitschrift 23.05.2014

TAG 12


Mein Zug hatte Verspätung - aber vielen Dank an Sylke - sie stellt uns ihre Mitschrift des tageseinstieges zur Verfügung :)

Sorry, leider kann ich euch keine guten und schlüssigen Infos zu HC Search liefern :( 

Wer mehr zum indexed Search wissen möchte - hier ein Link zu blog.undkonsorten.com

Farben für die beiden Kurse

• Customizer
• Anwender:
• Alle Teilnehmer

-------------------------------------------------------------------------------- 

Unnützer Bereich - BEGINN

Was machen wir heute?
LOGIN
Sicherung Tag08 ist noch immer aktuell, die werden wir heute dann aufsetzen.

Weiter zur Suche
Customizer: weitere Ergänzungen mit einbinden
Anwender: Eigenschaften der einzelnen Elemente & Einstellungen, die SEO-mäßig wichtig sind

Wiederholung von Sylke: 

Customizer:
wir haben eine Suche eingestellt, im Erweiterungsmanager haben wir die index-search aktiviert (war bereits angelegt, verschlingt aber viele Ressourcen – Tabelle in Datenbank – benötigt viel Rechnerleistung) – configindex auf 1 setzen – Verarbeitung erfolgt im Frontend – dies wird jeweils durchsucht – für uns zu sehen auf der Seite Suche, da Plugin angelegt – allgemeines Plugin – man könnte auch das Nachrichten Plugin damit füllen – Index Suche heißt das Plugin – wir bekommen ein Formular – das Plugin hat ein Suchfeld – auf Start gehen – search –auf Einstellungen davon gehen wir im Laufe der nächsten Tage noch ein.
Wird noch nicht reingestellt, erst noch weiter bearbeitet 
Emerald hat schon Suchfeld angelegt (Formular mit action – div id search) - :)  Aus der emerald index nehmen, auf Desktop zu ziehen und umbenennen in ref.html, damit sie nicht die andere überschreibt – ist nur zum gucken – in template rein kriegen: Dateiliste – templates hochladen – desktop ref hochladen – öffnen – jetzt ist die ref vor Ort – in unserem eigenen Verzeichnis ist nun also die Ref – mit Rechtsklick öffnen – alles andere schließen, um sicher zu gehen, dass ich nur darin arbeite, auch die index.html edit with notepad – in der ref die Orginalumgebung ab Zeile 77 das li ersetzen  

Es folgt nun eine wirre Mitschrift von Search...

sorry, davon habt ihr nicht, aber im Buch (Seite 416-427) steht mehr zu "Volltextsuche mit Indexed Search"

Search:

HC Search - Stelle des Markers

HC Search - Marker

div id = sidebar
ul
li
div id search
d...
siehe oben

Frage: Warum nehmen wir das LI mit und gehen nicht in den div-container?
Weil der Designer das Design vorgibt. ;)
Weil Google sonst unsere Seite nicht als qualitativ hochwertig anzieht - Google ist die Struktur und w2c-Konformität wichtig - das zum UL passende LI darf somit nicht fehlen!

Alles was wir aufbauen sollte in ein neues Erweiterungstemplate:

Template - TS - Titel: +ext search (gleiche Begriffe erleichtern uns die Zuordnung)

Jetzt beginnen wir mit dem Aufbau:
lib.search = TEXT
lib.search.value (
li struktur einfügen

Erweiterungstemplate - immer das Basistemplate mit einfügen!

Bei value-Werten immer runde Klammern nehmen!!!

Template - TS - Titel: +ext search - Setup: 
page.10.marks
Wird nun ersetzt durch lib.search

Jetzt startklarmachen - das Go im value gefällt mir nicht = Häh? -> wir können Veränderungen vornehmen

LI und Div Id Search können wir ignorieren - das ist nur für die Struktur:

Wir gehen direkt in das Formular:

form method="get" action="#"

Wie ist ein Formular aufgebaut? Wie ist die Logik?
Form-Tag umschließt

Input-Felder sind Felder, wo man was reinfüllen kann (Aktionen)
type= Text - da kann man Text eingeben
(Name, ID, value)
Type=submit - Button, auf den ich klicken kann, um Aktion auszuführen
(ID, value)

Was macht die Method?

• get
• in der URL weitergereichte Infos 
• kann jeder mitlesen
• post
• erscheint nicht in der URL, sondern versteckt in einer temporären Datei weitergegeben.
• für sensible Daten, wie Passwörter
• ist besser, weil wir php-Logik verändern!
•  Nachteil: wenn wir Cookies deaktiviert haben, dann kann es sein, dass die Eingaben verloren gehen... -S es gibt ne Methode ohne Cookies zu arbeten, die muss man aber erst in php einstellen -> deshalb geht Google mit get an den Start ;)

Was macht Action?
Hier hinter steckt ein php-Tool - da es gut zur Infoweitergabe gut geeignet ist!
Wir wollen auf unserer Suche-Seite das Ergebnis anzeigen - es soll die Suche-Seite aufgerufen werden.
hier kommt also was rein, was unsere Suche-Seite aufruft und das Ergebnis anzeigt.

Anwender:
Wiederholung der Anwenderthemen
Inhaltselemente

Unnützer Bereich - ENDE
-------------------------------------------------------------------------------- Wir setzen ein Login - nach Prinzipien des Logins Texte platzieren!

LOGIN - Seite für Mitglieder/ Frontenduser mit Zugang

Schritt1: neuen Ordner anlegen - FE-User
Seite - neuer Ordner: Systemordner anlegen unterhalb von TS - Name: FE-User (Frontenduser ;) )

Schritt 2: Ordner spezifizieren: (Loginformular formatieren )
Template - Home - Konstanten-Editor - CONTENT (46)  - 'Login' - ID des neuen Userordners hier (bei mir ist es bspw.  eintragen & speichern

Inhaltselement: Login/ Anmeldeformular - dieses Formular benötigt die vorangegenagene Zuweisung.

Schritt 3: Eigenschaftenveränderung des Ordner einstellen
(für andere Erweiterungen den Ordner freischalten)

So kann ich auf den Ordner zugreifende Erweiterungen mit dem Ordner vertraut zu machen.
z.B. für DirectMail
Template - FE-User Mausklick - bearbeiten in die Seiteneigenschaften - Reiter: Verhalten - Benutze als Container Website-Benutzer auswählen
Speichern & schließen

Schritt 4: Frontend Benutzergruppe und Benutzer anlegen
a) Benutzergruppe anlegen
Liste - FE-User - neuer Datensatz erstellen - Website-Benutzerguppe (anlegen) klicken
Benutzergruppe: Reiter Allgemein: Gruppenname: Secret Service speichern und schließen

b) Benutzer anlegen
Neuen Datensatz anlegen - Website -Benutzer anlegen
Reiter Allgemein: Benutzername & Passwort & Benutzergruppe secret Service anlegen
speichern & schließen

Schritt 5: Seiten für's Frontend anlegen: Login & Geh heim
a) Geh heim- Seite zum Anzeigen von geheimen Nachrichten:

neue Seite unter start einfügen - Name: geh heim - und aktivieren

b) Login-Seite anlegen:
eine weitere Seite zwischen start und geh heim anlegen - Name: login

Schritt 6: Einstellung: Geheime Seite erst nach Login anzeigen
ABER: die geheime Seite soll erst erscheinen, wenn der Login auf der Login-Seite erstellt wurde.
Dann soll die Login-Seite veschwinden und die geheime Seite angezeigt werden:

a) Formel auswählen, die es regelt, dass nur eingeloggte FE-User die Seite sehen können:
Liste - geh heim - Mausklick auf geh heim - bearbeiten - Reiter Zugriff - Verfügbare Objekte - Secret Service (soll nur für den Secret Service sichtbar sein)

b) Login-Anmeldeformular auf der Login-Seite
Jetzt muss sich der User anmelden können - Anmeldefomular:
Seite - login - normal - neuer Datensatz -Reiter Formulare - Anmeldeformular ( kann an- und abmelden - passt seine Möglichlkeiten nach dem Status des Anwenders an - reagiert flexibel = flexform innerhlab des typo3)

einfach nur speichern und schließen - nichts verändern, sondern ursprünglich lassen!

Ergebnis -> Im Frontend sieht man jetzt - bei klick auf Login erscheint ein Loginformular und bei Eingabe der Zugangsdaten erscheint die Seite Geh heim - wenn ich jetzt wieder auf Login gehe, dann erscheint ein Abmeldefomular Logout

c) Login-Seite soll im Menü verschwinden, wenn User im geheimen Bereich ist

Seite - login - Mausklick - bearbeiten - Reiter Zugriff - verfügbare Objekte - nach Anmeldung verbergen - speichern & schließen

d) Abmeldeformular auf Geheim-Seite anlegen:
Also noch Abmeldeformular (flexform) auf geheim anlegen:

Seite - geh heim - normal - neuer Datensatz  - Formular - Anmeldeformular speichern

Schritt 7: Die Anwender legen nun geheime Botschaften an und wählen in den Inhaltselementen unter dem Reiter Zugriff an, welche FE-Usergruppen die Inhalte der einzelnen Nachrichten sehen dürfen:
geheime Botschaft anlegen: Seite - geh heim - normal neuer Datensatz - Inhaltselement auswählen eingeben und speichern - diese Nachricht können nur Login-FE-User einsehen

Schritt 8: Wir legen eine zweite Gruppe an
- soll auch auf die Geheimen Botschaften zugreifen können - eine Seite für alle, aber mit unterschiedlichen Geheimbotschaften für die einzelnen Nutzer.

a) andere Gruppe anlegen
Liste - FE-User - Datensatz - Benutzergruppe anlegen - Name: irgendwer speichern & schließen

b) 2 Nutzer anlegen:
neuer Benutzer hinz
name, Passwort & Verfügbares Objekt irgendwer anklicken

neuer Benutzer kunz
name, Passowrt & Verfügbares Objekt irgendwer anlegen

c) für hinz & Kunz einstellen, dass Login-Seite nach Anmeldung verborgen wird und Geh heim erscheint

Liste - geheim - Mausklick - bearbeiten - Reiter Zugriff - Anzeigen, wenn angemeldet wählen und Nach Anmeldung verbergen rausnehmen
speichern & schließen

Schritt 8: Im Inhalselement unter Zugriff einstellen, wer welche Meldung sehen kann!
Seite - geh heim - normal - in das Inhaltselement klicken - bearbeiten über den 
Bleistift - Reiter Zugriff: Objekt Secret Service auswählen

Ich kann auch einstellen, dass es nur irgendwer ansehen kann oder alle Gruppen mit Login-Berechtigung
Neues Inhaltselement auf geh heim anlegen:
Seite - geh heim - normal - Datensatz - Text - Zugriff - irgendwer oder beide FE Gruppen angeben

 Aufgaben:
Customizer: 

• In den Onlinesystemen das Login-System einstellen! 
• Interne Suche mit Suchformular auf allen Seiten einpflegen
• Norden: Anpassung der News-plugins auf den einzelnen Userseite
• Bitte das Login komplett einstellen 
• Bitte die User entsprechend berechtigen: Anwender dürfen FE:Gruppen anlegen / Anwender dürfen FE-User anlegen / Unter der Seite Geh heim dürfen neue Seiten angelegt werden. Das loginformular darf eingesetzt werden. Terminende: 12:45 h

Anwender: 

• Nachdem das Customizing das OK. für den geheimen Bereich gegeben hat, bitte testen. 
• jeweils für jede Gruppe einen Artikel auf einer neuen Unterseite einstellen/ anlegen.

CMS (TYPO3) - Kurs Tag 11 - Inhaltselemente (reines HTML & Trenner), Videos und Facebook Like Box einbetten

Mitschrift 22.05.2014

TAG 11

Farben für die beiden Kurse

• Customizer
• Anwender:
• Alle Teilnehmer

Was machen wir heute?

• Anwender 
• wählen irgendeinen Tag aus
• Einbindung von Videos 
• On Schalten und anwenden
• Anwender dürfen ausprobieren und eigene Seite bearbeiten

• Customizer: 
• interne Suche installieren mit zentralem Feld mit Typo3 befüllen und ausfüllen lassen 
• Seiten anlegen freischalten, jeder kriegt sein eigene Seite 
• Customizer legen tag10 an 

Wiederholung: 

• Anwender: 2 neue Inhaltselemente
•  Dateilinks:
• hochgeladene Dateien mit einbinden und dem User zum Download zur Verfügung stellen
• Anklickbare Ereignisse im Frontend
• automatisch generierter Link - kann der User Öffnen und Speichern
• z.B. um eine Supportumgebung bereitzustellen
• Stadtverwaltungen nutzen es gerne, um Formulare bereitzustellen
• Metadaten: Titel und Beschreibung
• Hier könnte man auch eine Dateisammlung einfügen (eher untypisch)
• Weiteres Inhaltselement, um Links zu setzen: Text 
• Links über Text - Den Text einfach verlinken ;)
• Tipp: Link einfügen - Reiter Datei: Am besten in ein Zielfenster _blank (neues Fenster) öfnnen
• Datensätze einfügen:
• interne Verlinkung, so brauch ich nicht 2 gleiche texte für 2 unterschiedliche Seiten schreiben
• wird oft für AGBs genutzt - ich schreibe 1 mal die AGBs und verweise jedesmal darauf!
• Warum werden hier im Reiter oben der Titel Artikels genannt (Site name)
• Seite - Start - Inhaltselement Datensatz einfügen - eingefügter Datensatz ist kein Seiteninhalt sondern eine Nachricht von tt_news
• übernimmt jetzt die gleiche Funktionalität, wie Single
• tt_news sieht vor, wenn ich eine Einzelnachricht anzeige, dass der Titel der Nachricht im Reiter oben erscheint

Man kann verschiedene Menüs anlegen

• Seitenmenü
• im ausgelagerten Skript: Template - TS - Setup - entryLevel und die ULLI-Struktur
• Entrylevel 
• ist standardmäßig auf 0 eingestellt, 
• es ermöglicht uns den Einstieg zu bestimmen. 
• Bspw kann ich mit -1 eine Ebene tiefer angeben - also alles Seiten, die darunter liegen

• div class="sidebar" - ul - li - li - ul

• Dropdown-Menüs
• Untermenüs 
• im ausgelagerten Skript: Template - TS - Setup - entryLevel und die ULLIStruktur
• 2 Ebenenstruktur:

• So hat ein Teilnehmer das Submenü zum Seitenmenü erstellt, nach Anleitung von typo3.net, aber der Dozent sagt, dass es zwar angezeigt wird, aber fehlerhaft ist.
  UND: Der Entwickler hatte die Struktur nicht vorgesehen... - HMenu 1,2,3
• Aber Achtung: Immer nach dem Design-Template richten, wenn es keine Unterstruktur gibt, dann nicht einfach einfügen - es sei denn, man ist befugt.
• Aber in der Agenturauftragsarbeit genau auf die Verträge achten und das liefern, was der Kunde sich wünscht!

Zur Lösung der Anwender-Aufgabe von gestern:

Kategorien verknüpfen

Eine Nachricht auf Start UND Regionen-Seite anzeigen lassen:
Steuerung erfolgt über die Kategorien - wir Kombinieren unsere Kategorien:

Nachrichten - DatensatzNews - Kategorie Start auswählen:

• Reiter Allgemein - Verbergen-Haken rausnehmen 
• Reiter Kategorien & Beziehungen: weitere Kategorie: regionen auswählen.

Anwendung in der Praxis:
Wenn ich eine Nachricht verfasse und sie auf der Startseite und im Bereich der eigenen Stadt und evtl noch dem Thema zuzuweisen, dann kann ich hier diesen Verweis wählen.
Bsp: Hochhausbrand in Duisburg kommt auf die Startseite, die Lokalen News von Duisburg und in die Kategorie Brände.

Anwender:

Einbindung von Videos - Inhaltselement: reines HTML

gehe zu youtube.de: catmando eingeben -

folgende Menüpunkte erscheinen unterhalb der Videos:
Info  Teilen  Hinzufügen Statistiken...

-> auf Teilen gehen:
Teilen, Einbetten oder Email möglich

-> auf Einbetten gehen:
Iframe - HTML-Codierung: es wird die Umgebung mitgeliefert, die wir zum einbetten des Videos benötigen

-> HTML-Code kopieren

-> in unser Typo3 gehen:
Seite - patricia - normal - neues Inhaltselement: Spezielle Elemente: Reines HTML (Möglichkeit HTML einzufügen)
Hinweis: Wir können nicht direkt strg+v machen - erst a einfügen, dann strg v,  und das a wieder löschen

dann speichern und ansehen

Karte aus Maps einbetten

gehe zu Google Maps:
unten rechts ist ein kleines Menü - Zahnrad für Einstellungen wählen - Karte teilen und einbetten - Link teilen oder Karte einbetten
auf Karte einbetten - dann kommt iweder ein iframe
diesen HTML-Code des Iframes kopieren

und dann ins Typo3 3 gehen
Seite - Seite wählen - normal - neues Inaltselement: Spezielle Elemenzte: Reines HTML - iframe-HTML-Code einfügen

So kann ich auch einen Routenplaner von MAps auf meine Seite laden:
also bei Maps - Rout auswählen und meine Adresse eingeben

Facebook Like-Box Facebook: Inhaltselement: reines HTML & index.html

Für eine LikeBox benötigt man eine FANPAGE!!!!
Dokument - Facebook - Likebox
Fanpage -
google: facebook developer like box eingeben: hier werden uns die Social Plugins gezeigt
- Ich kann Werbung für mein Profil machen

facebook developer like box

Erstmal eigene Fanpage aufrufen -Link zur Fanpage aus dem Browseradressfeld kopieren und bei der Like Box auf Facebook Page URL einfügen & Button getcode drücken
2 Bereiche:

• oben - das macht man als Anwender!
• java Script, den wir einbinden müssen in der index.html - direkt nach dem öffnendem Body-Tag
• C:\xampp\htdocs\tag10\fileadmin\templates  - index.html oder besser noch typo3 Backend - Dateiliste - fileadmin - templates - index.html - kontextsensitives Menü - Punkt Bearbeiten drücken und den oberen Teil einfügen
• Aber Achtung: aus Typo3 Sicht nicht hinter das öffnende Body, sondern hintder den Subpart <!-- ###DOCUMENT### -->, da erst ab hier das Typo3 ausliest.
• <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
   
• speichern schließen
• unten - das müssen die Admins/ Customizer einstellen!!!
• Müssen wir in Inhaltselement reines HTML setzen mit copy & paste
• Seite - Patricia oder ausgewählte Seite - Rechts - Neues Inhaltselement - spezielles Element: reines HTML - unteren Code einfügen (erst a, dann strg + v, dann a löschen)
• <div class="fb-like-box" data-href="https://www.facebook.com/pages/h%C3%B6nne-design/442278179154261" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
• speichern & schließen

Aufgaben:

Customizer:
Nord und SÜD

Javascript in die index.html eintragen: JS - Facebook hinter body eintragen (<!-- ###DOCUMENT### -->)

Anwender:

können dann später nochmal ne Fanpage einbinden in die Umgebung

Die Customizer haben gelernt, wie sie es den Redakteuren ermöglichen eigene Seiten anzulegen.
Wenn die Redakteure dann eine Seite anlegen, sind sie Besitzer und können sie dann auch selbst, wie ein Admin löschen und bearbeiten und Unterordner anlegen ( wenn der Admin das nicht im Backend nachträglich beschränkt. 

Anwender:

Inhaltselement: Trenner:

Ein Trenner ist eine Linie <hr> , um bspw. Artikel voneinander visuell anzutrennen
Name des Trenners vergebbar, sonst nichts.
Passt sich in der Breite an die Spalte/Containers ein

Einen Artikel aus mehreren Inhaltselementen erstellen - diese langen Artikel
können wir dann durch Trenner abgrenzen :)

Bildzeitung als Beispiel
Seite - Karla - normal - Inhaltselement Text und Bilder


Überschrift: Langer Text mit vielen Bildern
Dann in den Text einen Text einfügen 
Ein Bild einfügen

Bildausrichtung Mittig untendrunter
Speichern schließen
------------------------------------------ Dann nues Inhalteselement: Text und Bilder
Text und Bilder einfügen Bildausrichtung rechts im Text
Speichern schließen

------------------------------------------
Dann Inhaltselement Bilder
Bild einfügen
Speichern schließen

------------------------------------------
so haben wir einen Artikel aus mehreren Inhaltselementen erstellt