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

Anwender bitte Wünsche auf der Startseite unter ACHTUNG CUSTOMIZER einstellen

Aufgabe für die Customizer:
Ich muss leider los