CMS (TYPO3) - Kurs Tag 8 - GraphicsMagick (Installation), Bilder einfügen, Vorbereitung zum Hochladen ins Web (strato), Filezilla

Mitschrift 19.05.2014

TAG 8

Vorbereitung für den Tag:

• XAMPP starten 
• Customizer machen 2 Projekte tag08a & tag08b
• Anwender spielen ein System aus der Sicherungskopie auf - tag08

Farben für die beiden Kurse

• Customizer
• Anwender:
• Alle Teilnehmer

Was machen wir heute?

• Wiederholung 
• Installation von GraphicsMagick
• Thema hochladen ins Web
• Providerwahl (strato)

Installation von GraphicsMagick

= Grafik-Rendering-Tools für typo3 - open Source
 
Wir benötigen ein Tool: GraphicsMagick oder ImageMagick


Unsere Bilder werden zu groß in der Dateiliste angezeigt - auch aus diesem Grund benötigen wir das Graphic Tool - die Bilder müssen gerenderred werden.

Google: GraphicsMagick (Image Processing System - rechnet Bilder in die richtige Größe - bei den meisten Providern ist es automatisch mit angeboten) - Downloads - SourceForge file download (nach untern scrollen) - Aggree und proceed - 3 Bereiche: Empfehlung: binaries! - Version: 1.3.19 - 2 verscheidene Grundversionen (8 oder 16 bit Farbtiefe) und 64bit und 32 bit - je nach Rechner:
ich wähle 16 bit/32bit Kombi - Datei speichern - 

Warum nehmen wir nicht Photoshop? 
Photo stellt nicht die gleiche Umgebung zur Verfügung - ist in einer geschlossenen Umgebung und es ist kein Open Source
Open Source untertsützen 

Windows-Explorer - Downloads - GraphicsMagick-1.3.19-Q16-win32-dll.exe - Doppelklick - Ausführen - next - accept & next.... install :)

Ab morgen wird das System uns automatisch begleiten
Heute - tag08 starten - localhost/tag08/typo3 = Backend

Nun manuell das Tool im Backend einpflegen:
Installation - Basic Configuration -

• gelbes feld: No ImageMagick installation available 
• Pfad zu GraphicsMagick im Windows-Explorer suchen:
• local - Programme oder Programme (x86) - für 32 bit  - GraphicsMagick-1.3.19-Q16 -
• oben im Fenster - die Rootline rauskopieren: C:\Program Files (x86)\GraphicsMagick-1.3.19-Q16 & Strg+C in den Zwischenspeicher
• in die Basic Configuration in das Feld:
• freies Feld: Check this path for ImageMagick installation:
• einfügen und send-Button drücken
• jetzt wird es grün angezeigt :)
• update Configuration

Überprüfung - Dateiliste - Ordner allgemein - dann wird uns das gerenderede Bild klein anzgetzeigt
Leider sehen wir nicht das Bild, sondern no thumb generated :(

Gucken wir noch weiter nach:
Aha - Fehlermeldung: Installation - Image Processing - Current Configuration - gelb - also Fehlermeldung

Nochmal in die Basic Configuration - und Vorgang wiederholen - jetzt klappt es :)

Sollte normalerweise auf jedem Webserver sein! (Mampp oder so, haben es eh schon inklusive, wenn man einen Windowsserver hat, ist es schwieriger Graphicsmagic zu installieren)

Bildelemente einfügen

Wozu brauchen wir das Tool?
Redakteure wollen Text mit Bildern versehen
Seite - unter uns - Tyopischer Seiteninhalt - Text und Bilder- Überschrift und Text
Reiter Bilder - Bild hinzufügen - dann öffnet sich meine Dateiliste (medien - allgemein)
Was müssen wir machen, um die Bilde runserem Text beizufügen?
Wir müssen sie in typo3 ziehen - im fileadmin_ordner werden die DateilistenOrdner gespeichert - dieser Ordner stellt typo3 meine Bilder bereit.
Hier kann ich auch zusätzliche Bilder hochladen .- Durchsuchen - Datei aus verzeichnis auf dem rechner auswählen (Achtung ein Bild soll maximal 2mb / ein /Upload soll maximal 10mb groß sein)
-> hier gibt es auch die Möglichkeit Bilder zu überschreiben)

Achtung: Bilder sollen immer sprechende Namen haben! Barrierefreiheit - die Bilder, werden blinden vorgelesen - daher ist der Dateiname wichtig
Reiter Bilder
Bild-Metadaten:

• Titel: auch sprechend, da auch vorgelesen - und Tooltipp
• Link: bspw. bei Logo mit Link zur Seite, in der Praxis eher nicht angewandt
• Alternativer Text: wird angezeigt, wenn das Bild nicht darstellbar ist
• Beschreibung: Quasi Untertitel des Bildes

Reiter Erscheinungsbild

• Layout des Inhaltselements bitte nicht bearbeiten, da es das CSS aushebelt!

• Bildeinstellungen

• -> Bildgrößen einstellen (Einfluss auf Darstellung): 
• Bildausrichtung - je nachdem, wo das Bild steht, ist eine automatische Berechnungsgröße eingestellt
• Hinweis: Bildgrößen kann ich mir im Browser mit dem Firebug im Quelltext anzeigen lassen
• Qualität und Typ nicht verändern!!! 
• Effekte eher nicht nutzen, sondern gute Bilder benutzen, die ggfs schon zuvor bearbeitet wurden.

• Bildausrichtung
• je nachdem welche Ausrichtung ich wähle, gibt es Standardeinstellungen im Template, die dann die Größe der Bilder regulieren.
• diese Standardeinstellungen kann ich ändern oder temporär für dieses Bild anpassen über Höhe und Breite

Was macht das typo3?
Lädt das Bild in der vollen Größe und skaliert es - es muss es also erstmal komplett laden, daher bitte Bilder nur bis max 2 MB Bildgröße!

Alles wird einer gewissen Regel unterworfen.
Selbst wenn ich Höhe und Breite so angebe, dass das Bild an sich verzerrt sein müsste, berechnet der Browser das Bild trotzdem proportional zum Originalseitenverhältnis

Wo kann ich die standardeinstellungen einsehen und verändern?
Pfad: Template - Home - Konstanten.-Editor- Content (46) - Image....

Standardeinstellungen ändern
Aber: Das Bild ist größer als der darzustellende bereich - und der Beschreibungstext wird abgeschnitten angezeigt

Firebug: div ID=Content hat nur ne width von 590 px

also müssen wir über Template - Home - Konstanten.-Editor- Content (46) - Image.... für die width im typo3 auch 590 px einstellen!

Regel für die Benutzung der Höhe und Breite:
Um die Proportionen beizubehalten gibt es folgende Regeln:

• Ist nur die Breite eingetragen, wird die Höhe nachberechnet
• Wenn nur die Höhe eingetragen ist, dann wird die Breite nachberechnet
• Werden Höhe und Breite angegeben,wird die Höhe stärker gewichtet, so dass danach dann die Breite berechnet wird
• die Standardeinstellungen sind übergeordnet, wenn nichts angegeben ist (über Template - Home - Konstanten.-Editor- Content (46) - Image....width

Mehrere Bilder nebeneinander positionieren
Seite - unter uns - normal neues Element - Text und Bilder -

• Reiter Allgemein: Titel Text...
• Reiter Bilder: 3 Bilder auswählen und Titel und Beschreibung vergeben
• Reiter Erscheinungsbild - Anzahl der Spalten auf 3 umstellen

Dann werden die 3 Bilder nebeneinander gestellt und auf die gesamte Breite 590px verteilt - der Zwischenabstand ist auf 10 px voreingestellt - will ich das verändern, dann kann ich wieder über
Template - Home - Konstanten.-Editor- Content (46)und column oder Raw space oder Margin etc. verändern.
Die hier eingestellten Werte werden dann automatisch immer runtergerechnet und danach die Bilder skaliert!

Aber was, wenn die Bilder unterschiedlich groß sind?
Dann müssen wir die Höhe einstellen, allerdings sind die Proportionen nicht

Bilder löschen (aus Verzeichnis eines Redakteurs)
(Dateiliste = Anderes Modul und Werkzeug)
Dateiliste - Medien - entsprechendes Verzeichnis anwählen und mit dem Mülleimer das entsprechende Bild löschen

ClickEnlarge - Funktion
bei Seite - unter uns - Text und Bild - Reiter Bild - gibt es eine Einstellung zum Verhalten:
Bei Klick vergrößern - Haken rein für Aktiviert.

Dieser Haken bewirkt, dass bei einem Klick auf das Bild ein neues Fenster aufgeht, welches das kleine Bild in vergrößerter Form anzeigt.
Die Standardeinstellungen sind wieder und Template - Home - Konstanten-Editor - Content eingestellt: Click-enlarge Image Width

 Jetzt geht es weiter für Customizer und ambitionierte Anwender

Website hochladen ins Web

Providerwahl - was muss ich beachten?

strato - Webhostanbieter
Provider bietet  Webspace an.
also unser Localhost im Web :)

Hostingpakete
Wir benötigen eine Domain!
Über eine IP-Adresse wird die Seite international zugänglich gemacht - um nicht die Nummer oben einzugeben, gibt man einen sprechenden Namen ein - die domain.
Die Domain besteht aus 3 Teilen:
www.
domainname
.Endung (.de, .com...)

bei den meisten Hostingpaketen gibt es eine freie Domain dazu - mit .de oder. net oder.com

wenn ich eine .de-Domain haben möchte, guckt der Hoster in einem Register der Denic nach, ob die Domain noch zu haben ist.

Wenn sie frei ist, dann kann ich sie bestellen.

Domain bestellen und Hostingpaket auswählen:
Strato - Hosting - Tarife-Powerweb - Paketangebote

Welches ist das richtige Paket für mich?
=>Anzahl Datenbanken: ich brauche php- und SQL-Datenbank = 2 Datenbanken
=>Webspace: (wieviel brauche ich für ne Typo3- Anwendung? 200 MB für Verzeichnis plus die Größe einer SQL-Datenbank und die Ursprungsgrößen der Bilder, die wir hochladen ist entscheidend
wieviele 2MB Bilder kann man dazu hochladen?)

15GB- 1GB für die Grundumgebung
14GB - wieviele Bilder kann ich mit 2 MB hochladen? - 7000Bilder (wird ein Anfänger eh nicht hochladen ;) )
ERGO: Uns genügen 15GB Webspace für den Anfang

Einschub: Maximale Größe von hochgeladenen Bildern - Bildauflösung (bei Wikipedia)
max. 2 MB pro Bild
Wenn der Monitor nicht mehr kann, ist alles größere egal.
1920x1080 ist die optimale Bildgröße (größtmögliche Einstellung, aber ist widescreen, also 16:9), um 95% der auf dem Markt befindlichen Displays zu bedienen (Retina Displays des Mac Air bilden hier die Ausnahme - die könnten noch mehr lesen)

=>php5 (strato gibt php5.5 an) - genaue Version bei typo3.org heraussuchen
=>mySQL
=>Apps - Typo3 (eher zum Rumspielen, wir können es ja jetzt selbst ;) )
=> mindestens 2 ftp-Zugänge (Zugänge für unterschiedliche Bereiche) - Zugang zu verschiedenen Verzeichnissen, damit wir für jede Seite einen eigenen Zugang haben - wenn ich Zugang rausgebe, dann nur den Allgemeinen (mit beschränktem Zugangsrecht) und einen halte ich für mich, in dem dann alles ist.

Partnersysteme: 2 Monate kostenlos, danach kostet es Geld - ist halt echt die Frage, ob es Sinn macht, da man sich in das Powerprogramm auch erstmal einarbeiten muss...

Und auf den Kundenservice achten - kostenlos? Verfügungszeiten, Achtung keine 0900 (Kostenfalle) oder 0800 Nummern!

weitere versteckte Kostenfalle: Traffic: sollte unlimited sein. (Achtung keine hochgestellte 1 mit verdeckten Kosteninfos sollte dahinter sein)
Sonst ist schnell das Limit erreicht und sie Geschwindigkeit der Site nimmt extrem ab - dann müsste man Traffic dazukaufen...

Das PowerWeb Starter Paket bei strato kostet 2,99e im Monat

Umzug:
intern bei einem Hoster - von einem Paket zum nächsten Paket: klappt super!
extern von einem Hostingpaket auf einen Webserver - kann schwierig und problematisch werden.

Betriebssystem: Unix!
Keine Windowsumgebung auf Hostingpaketen nutzen, wenn es geht! Langsame Server und verschachtelte Strukturen!

Webserverwahl

Hier scheint es darum zu gehen, wenn mal das Hostingpaket nicht mehr ausreicht und man sich für einen eigenen Server entschließt...

Also nichts für Anfänger!


Was ist ein Server?
Definition bei Wikipedia

Ein Webserver (lateinisch servire ‚dienen‘; englisch server ‚Diener‘, ‚Dienst‘) ist ein Server, der Dokumente an Clients wie z. B. Webbrowser überträgt. Als Webserver bezeichnet man den Computer mit Webserver-Software oder nur die Webserver-Software selbst. Webserver werden lokal, in Firmennetzwerken und überwiegend als WWW-Dienst im Internet eingesetzt. Dokumente können somit dem geforderten Zweck lokal, firmenintern und weltweit zur Verfügung gestellt werden.

Welche Server gibt es?
Managed Server

• Vorteil: komplett für uns eingerichtet (fast wie bei Hostingpaket - gut für den Anfang)
• Nachteil: man kann kein Reseller werden (ich kann kein Mini-Strato werden, also nicht weiter Webspace hosten an andere)
• Achtung: welche php-Version ist drauf?! - was braucht unser Typo3 (typo3.org - Downloads, 6.1 - 5.3.7 - leider wird nur php 5 angegeben - also nachfragen, ob alle Versionen funktionieren! Sonst kann es sein, dass es gar nicht funktioniert

Dedicated Server 

• Linux
• Windows

• dual, Quadcore - 2x oder 4x GHz
• Traffic unlimited (, aber mit Zusatzinfo - ab 1000GB / Monat wird es langsamer..., um zu verhindern, dass die eigenen Stratoleitungen versagen ;) )
• Man ist flexibel, kann Reseller werden
• Aber sehr komplex unf schwierig für Anfänger
• Benötigt man um professionell zu arbeiten.

ServerCloud
V-Server

• Virtueller Server = Man teilt sich die Kiste mit jemandem (hat einen festen, zugewiesenen Bereich)
• V-Server Linux
• V-Server Windows
• Vorteil gegenüber Webserver: Preiswert, Garantie & Flexibilitä, top für Reseller!
• Nachteil: Nichts für Anfänger
• Ähnlich wie bei Hostingpaketen auch preislich zu sehen
• RAM
• GB HDD
• Traffic unlimited

Datensicherheit:

• Sicherheit: RAID - Verfahren = Spiegelplatte der Festplatte
• RAID1 -die Festplatte wird parallel gespiegelt, um 2 identishe Datenbereiche zu haben
• Hardware/RAID6/10
• Crown-Job: Datensicherung automatish vom Server, um die Systeme zu sichern
• Kostet aber Geld bei der Wiederherstellung
• Besser: Selber die Datensicherung erstellen!!!

Wo steht der Server?
Am Besten steht der Server in Deutschland!zu Hause: Nachteil: eine schlechte Leitung am Heimatort, dann kann man die Website kicken, wegen langer ladezeit -
Sicherheit selbst gewährleisten: Immer Strom, damit es eimmer läuft, ggfs ein Notstromautomat, immer Leitung vorhanden?
Was, wenn Festplatte den Geist aufgibt? Spiegelung der Festplatte nötig

Umzug vom Hostingpaket zu einem Server:
Intern:
Paket angeben, welches man hat - Domain angeben, die umgezogen werden soll und dann legt mir TSrato die Domain an.
extern von bspw. 1&1 nach strato: (So oder so ähnlich ;) )
1. 1&1-Paket kündigen
AUT-Code von 1&1, mit dem ich mich bei strato anmelden kann - Strato -Server _anforderungen an 1&1 schicken und Autentifizierungscode, mit der man die Domain umziehen kann - wird dann auch bei der Denic gemacht
Bei servern hat man meist keine Domain inklusive - also 1-5€ pro Jahr pro Domain


Domainwahl:
am Besten mit Bindestrich (ist aber eher deutsch)
keine Punkte, da es Subdomains suggeriert
nicht zu komplexe Domainnamen wählen, besser kurz und knapp

Auch keine Großschreibung in den Verzeichnissen - kann zu Fehlern führen
Umlaute sind zwar erlaubt, aber werden nicht genutzt.

Filezilla

Tool runterladen:
Filezilla: was ist das? Free FTP Solution: kostenlos

ACHTUNG!!! Nicht auf filezilla-project.org!!!oder sonstige kuriose Anbieter...
Es gibt viele Seiten, die diverse Downloadlinks nebenbei anbieten - nachher hat man Programme auf dem Rechner, die man nie haben wollte.
Der Dozent stellt es uns zur Verfügung

Installation von Filezilla
.exe-Datei auf den Desktop ziehen und öffnen
Downloader - Nächster Schritt - Optimizer Pro Ablehnen!!! - Speedial Ablehnen - Jetzt installieren -I Agree - next, next, next, next, install - Finish
= freie quelloffene Umgebung

2Bereiche: Lokal links und Server rechts

Jetzt gehen wir auf unseren Server:

• Server
• Benutzername
• Passwort

im Filezilla eingeben und Verbinden drücken.

Unser Verzeichnis auf den Rechner übertragen
Dazu auf das Verzeiczhnis gehen und gucken, wo ich meine Systeme habe:
Laufwerk C - xampp - htdocs - tag08a - und wir haben die fileadmin umgebung, die wir jetzt kopieren und in den rechnten Bereich rüberziehen

Übertragung kann auch abgebrochen werden:

Übertragung abbrechen - unten auf den Server rechte Maustaste

Übertragung abbrechen - unten auf den Server rechte Maustaste


Naja - heute geht es auch am Nachmittag weiter - ich hoffe der Einstieg morgen früh gelingt...