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: