Mitschrift 20.05.2014
TAG 9Vorbereitung für den Tag:
- XAMPP starten
- Customizer machen 2 Projekte tag09a & tag09b
- Anwender spielen ein System aus der Sicherungskopie auf - tag09
Farben für die beiden Kurse
- Customizer
- Anwender:
- Alle Teilnehmer
- Wiederholung
- Inhaltselement (Text und Bild) als Wiederholung
- Wir gehen online!
- Dozent hat vorbereitet - User angelegt / vorbereitet
- weiteres Inhaltselement kennenlernen
Aufzählung und Tabellen
Wiederholung
Inhaltselemente:- Inhaltselemente sind statische Elemente (werden eingestellt und bleiben an der Stelle stehen)
- Inhaltselemente sind nötig, um im Friontend das zeigen zu können, was der Redakteur im Backend schreibt
Text und Bilder - das häufigst genutzte Inhaltselement
- Man kann Texte und Bilder in Spalten setzen
- Text und Bilder - neuer Reiter Bilder, der die Bilder einfügt, die rein sollen
- Bild-Metadaten - wichtiger Bereich für Barrierefreiheit und SEO
- (Beschreibung, Titel, Alternativer Text)
- Reiter Erscheinungsbild:
- Bildausrichtung - Es gibt Konstanten, die wir hiermit temporär verändern können. Wenn wir die Konstanten ändern wollen, dann müssen wir über Templ
Exkurs Lightbox
Bsp Lightbox
Bild, wird bei Klick vergrößert und der Hintergrund verdunkelt - kann man auch eine Bildergalerie draus machen - hierzu findet man auch die Konstanteneinstellungen im Konstanten-Editor - dafür müssen wir später mal ein weiteres Tool runterladen und einspielen
GraphiksMagick:
- externes Tool, weil Typo3 selbst keine Bilder klein rechnen kann.
- wandelt die Bilder vorher in PNG um, damit keine Verluste durch Komprimierung entstehen können
Typo3temp - processed oder gileadmin - processed - Das sind die beiden Ordner, in denen die Bilder abgelegt werden, damit sie temporät geöffnet werden können - die Bildgröße eines jeden Bildes von ca 8kb ;) WEIL: Es wird in PNG umgewandelt, dann kleingerechnet und für die Ausgabe wieder großgerechnet - so haben wir keinen Qualitätsverlust
Wie kann ich Bilder hochladen:
direkt aus dem Inhaltselement - Text und Bilder - Bilder - entweder Durchsuchen auf meinem PC oder bereits hochgeladenen Bilder verwenden
Fileserver einstellen in Typo3:
Liste - Tag08 - Dateispeicher - Reiter: Allgemein, Configuration, Access
Strato:
Hosting ( = Aufteilung auf mehrere Server) vs Server (Eigener/Dedicated Server, VServer, Managed Server)
Was brauchen wir, wenn wir unsere Domain haben?
- Datenbank
- Verzeichnisstruktur
- für jedes Projekt ein eigenes Verzeichnis
- FTP-Zugang
- für jedes Projekt einen eigenen FTP-Zugang
- Filezilla als Beispiel FTP-Client
- Zugang über IP/Domain, Benutzername, Passwort
Neue Domains:
- Es gibt neuerding neue Domains, wie.berlin, .mail, .web, .gmbh, .bayern
- nur sinnvoll, wenn ich es in der Suchmaschine zur Optimierung nutzen kann.
- Kostet aber Geld - kostenpflichtig
- genau, wie Umlaute, die mittlerweile in den Domains genutzt werden können - sie werden selten in die Suchmaschine/Browserfenster eingegeben.
=> Entwicklung beobachten
Bigdump = gezipte php.-Datei von Alexander Ozerov
Mit BigDump kann ich größere Dateieingaben machenFile...if-Schleife
SQL-Datei wird abgearbeitet, statt importieren, kommt die Schleife.
Öffnen der bigdump.php, um Einstellungen zu ändern:
Änderung mit der zusätzlichen Null am Ende, um die Range größer zu stellen : Parameter größer gesetzt, damit wir größere Datenmengen hochladen können (Einsetzen der Parameter für störungsfreien Ablauf):
- Lines per Session: 300 anstatt 300
- max_query_lines : Abfrage: 3000 statt 300
- Länge einer Abfrage: define ('DATA CHUNK LENGTH', 163840);
Weitere Einstellungen tätigen:
- Zeile 45-48:
- db_server, db_name, db_username, db_passsword (man kann nicht auf alles Einfluss nehmen, Passwort natürlich ;) )
- = Zugangsdaten zu unserer Website/ Onlinesystem - so erreichen wir die entsprechende Datenbankenumgebung (nicht localhost, sondern eben vom Webhost vergeben - leider nicht standardisiert, da sie keinen localhost haben, sondern auf viele schwarze Kisten verteilt sind)
- Bei Fragen die Hotline des Anbieters anrufen
Dazu braucht man die entsprechende sql-Datei, weil wir mit bigdump uns der sql-Datei bedienen - die Daten auslesen, daher muss sie im gleichen Verzeichnis sein. im gleichen Verzeichnis, wie fileadmin - also keine Überordner mehr!
Einspielen einer bigdumpdatei:
kurs05.burkard-balzer.de/bigdump.php
Benutzername.domain/bigdump.php ins Browserfenster eingeben
Und start
Das ist jetzt bigDump:
![]() |
BigDump |
![]() |
Bigdump - Start |
Wer mehr über BigDump wissen will, kann das folgende Zitat lesen:
Eine SQL-Datei mit BigDump importieren
Wenn beim Hochspielen Ihrer MySQL Datenbank die Fehlermeldung "CPU Limit reached" oder "Maximale Ausführungszeit erreicht" erscheint, dann ist Ihre Datenbank zu groß für das Einspielen via phpMyAdmin (je nach Tarif bis zu 8 MB) oder beim Entpacken auf dem Server.
Die Lösung:
Spielen Sie die MySQL Datenbank mit Bigdump ein:
Zuerst müssen Sie sich Bigdump von Alexey Ozerov runterladen:
http://www.ozerov.de/bigdump.zip
Die ZIP-Datei muss z.B. mit WinZIP oder WinRAR entpackt werden. Nach dem Entpacken erhält man die Datei "bigdump.php". Diese Datei öffnen Sie mit einem Editor Ihrer Wahl, z.B. mit dem Windows Editor "Notepad".
Folgende Zeilen müssen im Bigdump-Skript angepasst werden (Zeilen ohne Änderung wurden der Übersichtlichkeit halber ausgelassen):
// MySQL 4: 127.0.0.1:3306 oder MySQL 5: 127.0.0.1:3307
$db_server='127.0.0.1:Port';
// Hier muss der Name Ihrer Datenbank stehen.
$db_name='DB-Name';
// Hier muss Ihr Benutzername für die Datenbank stehen.
$db_username="DB-User";
// Hier muss das Passwort für Ihren Benutzer der Datenbank stehen.
$db_password="DB-Passwort";
// Dateiname der Backupdatei
$filename="namedersqldatei.sql";
// Anzahl der Zeilen die in einer Session verarbeitet werden sollen.
// (Nur anpassen, falls Bigdump den Import abbricht)
$linespersession=3000;
// Zeit in Millisekunden, die Bigdump zwischen zwei Sessions warten soll.
// Funktioniert nur, wenn JavaScript aktiviert ist.
// (Nur anpassen, falls Bigdump den Import abbricht)
$delaypersession=0;
Speichern Sie die vorgenommen Änderungen ab und laden Sie die Datei "bigdump.php" zusammen mit Ihrer sql-Datei per FTP hoch. Beide müssen im gleichen Ordner liegen.
Jetzt muss die Datei "bigdump.php" nur noch per Browser aufgerufen werden (z.B. http://www.domain-bei-profihost.de/verzeichnis/bigdump.php ) und auf "Start Import" geklickt werden.
Der Import wurde erfolgreich abgeschlossen, wenn "Congratulations: End of file reached, assuming OK" angezeigt wird.´
Sollten Sie hier eine Fehlermeldung angezeigt bekommen, finden Sie auf http://www.ozerov.de/ zahlreiche Hinweise aufgelistet. Meist muss man in der bigdump.php nur ein Kommentarzeichen rauslöschen um einen Import erfolgreich abschließen zu können.
Bitte löschen Sie nach der erfolgreichen Durchführung Ihre sql-Datei auf Ihrem Webspace und die Datei "bigdump.php".
An sich haben wir gerade Omas geschenk ausgepackt, nur nicht lokal, sondern online:
Verknüpfung der Datenbank mit dem php-Sytsem:
kurs05.burkard-balzer.de/typo3/install
Jetzt dem Typo3 sagen, dass es eine online-Datenbank gibt -
Enable_INSTALL_TOOL kopieren und in typo3conf ein - rechte Maus in die Server-Umgebung: Neue Datei erstellen und reinkopieren
Browserfenster aktualisieren - password: joh316
!!! Folgende Veränderungen vornehmen: Passwort ändern!!!!
Basic Configuration
Einstellmöglichkeiten für die Datenbanken
- Username
- Password
- Host (vom Host vorgegeben - nur auf eigenem Server localhost möglich)
- site Name (steht oben im Reiter drin
Mit den Zugangsdaten hat sich jetzt auch die Database geöffnet
Database kann jetz ausgewählt werden
Update Configuration
und Einloggen über Backend Admin-Link
admin & password zum Login
Als Erstes folgendes tun!!! - Passwort vergeben
Liste - Kurs05 - User anlegen - Mit dem User neu einloggen, damit der Admin verschwindet
Reiter Allgemein:
Username und Passwort in Kleinbuchstaben vergeben:
Wichtig: Haken bei Admin! Dann haben wir einen user mit allen Fähigkeiten ausgestattet, der genauso, wie ein Admin vorgehen kann.
Erst testen, ob der Admin-berechtigte User sich einloggen kann, dann erst den admin rauslöschen!
über liste - Tag05 (oberste Ebene) admin ab in den Papierkorb
-> JETZT IST DAS SYSTEM sicher!
Wir haben nun ein Online-System, von dem sich jeder Berechtigte von der ganzen Welt aus einloggen kann.
-> Es kostet bis hierhin nur 3€ für das Hostingpaket im Monat
Bau ich mir die Website direkt online auf oder vorher lokal auf dem Rechner?
Vorarbeit geschieht meist lokal auf XAMPP - oder direkt online mit vorgelagerte Subdomain: subdomain.domain.de
Denn die Suchmaschinen vernachlässigen Subdomains
Aufgaben:
Dozent hat uns alle angelegt:
nord05.burkard-balzer.de
süd05.burkard-balzer.de
Customizer:
- bitte die Anwender anlegen
- Im System die anwender so etablieren, dass sie arbeiten können
- Aufgaben:
- 1 Seiten und Verzeichnisse anlegen
- 5 Verzeichnisfreigaben
- 3 Gruppen anlegen
- 2 Kategorien & Plugins
- 4 User anlegen
Xampp - tag08a
Wir lernen verschiedene weitere Inhaltselemente kennen:
Inhaltselemente:
Zwei Wege der Eingabe:- über Seite - neues - Spalte auswählen und Inhaltselement auswählen
- bleibt immer an der gleichen Stelle stehen
- über Nachrichten - DatensatzNews (tt_news)
- das aktuellste steht immer ganz oben
- ergo verschwindet meine Nachricht irgendwann, weil sie durch neuere nachrichten
=> Inhaltselement: Nur Bilder
Seite - karla - normal - neuen Datensatz hinzufügenInhaltselement auswählen: Nur Bilder
Unterschied: Keine Texte mehr ;)
Z.B. für Bildgalerien
Reiter Allgemein:
Überschrift = Überschrift über allen Bildern
Reiter Bilder - Bilder auswählen
Wenn ich eine Galerie erstellen möchte:
Alle Bilder auswählen über: Auswahl umkehren ;) und Auswahl importieren
und die Metadaten pflegen!!!
- Titel = Tooltipp und wird vorgelesen bei Screenreadern
- Alternativer Text - steht dann, wenn das Bild nicht geladen werden kann
- Beschreibung = quasi Untertitel des Bildes
Wenn man keine beschreibung haben möchte, dann bitte die Haken rausnehmen, denn dann wird der Seitenquelltext auch nicht mit leeren Feldern belastet - das ist gut für die Suchmaschinenoptimierung!!!
Reiter Erscheinungsbild:
Einstellung von:
Höhe, Spaltenanzahl, Ausrichtung
Wenn ich jetzt einen Text dazu haben möchte, dann wähle ich unter Seite - karla - normal ein Inhaltselement Text :)
Ich hab also viele gestaltungsmöglichkeiten - kann mehrere Inhaltselemente wählen - im Frontend sieht man nicht mehr, aus wie vielenInhaltselementen die Seite besteht ;)
Wechsel der Inhaltselemente innerhalb eines Datensatzes (ist möglich :) )
TIPP: Wir können aber auch den Typ des Inhaltselementes von Nur Bilder auf text und Bild ändern, falls wir nachträglich uns dazu entschließen, doch noch Text zu meiner Bildgalerie zu schreiben.
Hinweis: Selbst wenn ich von Text und Bild zu Nur Bild wechsel, dann geht mir der Text nicht verloren! :) - Ich könnte also auch wieder den Text später einspielen - vorausgesetz, ich habe zwischendurch gespeichert ;)
=> Inhaltselement: Aufzählung
-> sowas ähnliches haben wir auch schon im Inhaltselement: Text erstellt :)Hier haben wir ettliche Möglichkeiten zu formatieren, aber die Gefahr ist auch groß, dass dann immer anders formatiert ist auf der Seite
Mit dem Inhaltselement Aufzählung können wir es getrennt customizen und bestimmte Formatierungen mitgeben, so dass alle Aufzählungen auf der Inet-Seite gleich aussehen
Das lernen wir später - also wie wir die Aufzählungen customizen können.
Dann wird uns auch der Vorteil klar, denn leider können wir hier keine Gliederungen machen!
Reiter Allgemein:
- Überschrift
- Aufzählung
Reiter Erscheinungsbild
Hinweis: Wir können auch über die Glühbirne Datensätz ein und ausblenden, um sie im Frontend sichtbar zu machen oder zu verbergen
![]() |
Möglichkeit in typo3 Datensätze zu verbergen |
=> Inhaltselement: Tabelle
Anhand der Bundesligatabelle etablieren :)Seite - regionen - normal - Datensatz hinzufügen - Tabelle
Reiter Allgemein: ähnlich, wie bei den anderen Inhaltselementen
Reiter Tabelle:
- Ersteinmal abspeichern, dann erscheint in diesem Reiter ein Tabellenassistent
Auf dem schwarzen Plus kann ich dann weitere Spalten hinzufügen
Erweiterungsoptionen:
Reiter Barrierefreiheit
- Tabellenbeschriftung
- Tabellenzusammenfassung (erscheint nur als summary im Quelltext, wird aber teilweise von den Suchmaschinen ausgelesen - SEO!!!
tfoot: (Aktivieren oder nicht durch Haken) Tabellenfuß, also die letzte Tabellenzeile kann auch nochmal extra formatiert werden
tbody: alles was zwischen den beiden Zeilen (erste und letzte Zeile der Tabelle) steht
Zusätzliche CSS-Klasse
(setzt Attribut in die HTML-table, die später mit CSS gesondert formatiert werden kann)
mit diesem Feld kann ich in meiner table noch ne class eingeben, damit das CSS die Tabelle extraordinär formatieren könnte
-> <table class="meinetabelle">
![]() |
Tabelle - Erweiterungsoptionen - Reiter Barrierefreiheit |
Exceltabellen in Typo3 verwenden
Reiter CSV-Analyse (unter Seite - regionen - normal - Inhaltselement Tabelle - Reiter Tabelle - Erweiterungsoptionen - Reiter CSV-Analyse)Aber an sich ist doch excel viel besser für schöne Tabellen! Wenn ich meine Tabelle aus excel in typo3 übernehmen möchte, geht das :)
Dafür muss ich meine Exceltabelle als Dateityp: CSD Trennzeichen getrennt anzeigen!
Dann im Windowsexplorer die Tabellendatei mit dem Notepad++ öffnen und Quelltext kopieren und in den Text der Tabelle einfügen!
Meine Tabelle im Quelltext des Notepad++
Pl;;Verein;Spiele;TD;Pkt;
1;;FC Bayern;34;71;90;
2;;Borussia Dortmund;34;42;71;
3;;Schalke 04;34;20;64;
4;;Bayer 04;34;19;61;
5;;VfL Wolfsburg;34;13;60;
6;;Borussia M'gladbach;34;16;55;
7;;Mainz 05;34;-2;53;
8;;FC Augsburg;34;0;52;
9;;1899 Hoffenheim;34;2;44;
10;;Hannover 96;34;-13;42;
11;;Hertha BSC;34;-8;41;
12;;SV Werder;34;-24;39;
13;;Eintracht Frankfurt;34;-17;36;
14;;SC Freiburg;34;-18;36;
15;;VfB Stuttgart;34;-13;32;
16;;Hamburger SV;34;-24;27;
17;;1. FC Nürnberg;34;-33;26;
18;;Eintracht Braunschweig;34;-31;25;
Jetzt den zweitern Reiter: CSV-Analyse
wählen und den Feldbegrenzer Semikolon auswählen, dann kann typo3 meine Tabelle auslesen und darstellen!
![]() |
Tabelle - Erweiterungsoptionen - Reiter CSV-Analyse |
Fertig :)
Keine Kommentare:
Kommentar veröffentlichen